如何在 Flutter 中将下拉选择项设置为 TextFormField

Question

我在 TextFormField 中创建了下拉列表，我成功地将列表 (bankDataList) 加载到动态列表的下拉列表中。数据显示在下拉列表中。但我有一个问题要分配 “value : _bankChoose”到 DropDownButton 中，它没有更新到 TextFormField 中。我用的是图标和文字，请看截图

  String _bankChoose;

   List<BankListDataModel> bankDataList;

      Container(
                  margin: EdgeInsets.only(left: 15, top: 10, right: 15),
                    child: FormField<String>(
                      builder: (FormFieldState<String> state) {
                        return InputDecorator(
                          decoration: InputDecoration(
                              contentPadding:
                                  EdgeInsets.fromLTRB(12, 10, 20, 20),
                              // labelText: "hi",
                              // labelStyle: textStyle,
                              // labelText: _dropdownValue == null
                              //     ? 'Where are you from'
                              //     : 'From',
                              errorText: _errorBank,
                              errorStyle: TextStyle(
                                  color: Colors.redAccent, fontSize: 16.0),
                              border: OutlineInputBorder(
                                  borderRadius:
                                      BorderRadius.circular(10.0))),
                          child: DropdownButtonHideUnderline(
                            child: DropdownButton<BankListDataModel>(
                              style: TextStyle(
                                fontSize: 16,
                                color: text_gray_color,
                                fontFamily: "verdana_regular",
                              ),
                              hint: Text(
                                "Select Bank",
                                style: TextStyle(
                                  color: text_gray_color,
                                  fontSize: 16,
                                  fontFamily: "verdana_regular",
                                ),
                              ),
                              value: _bankChoose,
                              isExpanded: true,
                              isDense: true,
                              onChanged: (BankListDataModel newValue) {
                                setState(() {
                                  _bankChoose = newValue.bank_name;
                                });
                              },
                              items: bankDataList
                                  .map<DropdownMenuItem<BankListDataModel>>(
                                      (BankListDataModel valueItem) {
                                return DropdownMenuItem(
                                  value: valueItem,
                                  child: Row(
                                    // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      new CircleAvatar(
                                        backgroundImage: new NetworkImage(
                                            valueItem.bank_logo),
                                      ),
                                      // Icon(valueItem.bank_logo),
                                      SizedBox(
                                        width: 15,
                                      ),
                                      Text(valueItem.bank_name),
                                    ],
                                  ),
                                );
                              }).toList(),
                            ),
                          ),
                        );
                      },
                    ),
                  ),

Answer 1

一种方法是使用 TextEditingController 并分配给您的 TextField，例如 controller: textEditingController

final textEditingController = TextEditingController();

Answer 2

您想要选择 BankListDataModel 类型的下拉项，那么您的 _bankChoose 变量应该是 BankListDataModel.

类型

试试这个，

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //String _bankChoose;
  BankListDataModel _bankChoose;


  List<BankListDataModel> bankDataList=[
    BankListDataModel("SBI","https://www.kindpng.com/picc/m/83-837808_sbi-logo-state-bank-of-india-group-png.png"),
    BankListDataModel("HDFC","https://www.pngix.com/pngfile/big/12-123534_download-hdfc-bank-hd-png-download.png"),
    BankListDataModel("ICICI","https://www.searchpng.com/wp-content/uploads/2019/01/ICICI-Bank-PNG-Icon-715x715.png"),
    //BankListDataModel("Canara","https://bankforms.org/wp-content/uploads/2019/10/Canara-Bank.png")
  ];
  @override
  void initState() {
    super.initState();
    _bankChoose = bankDataList[0];
  }
  void _onDropDownItemSelected(BankListDataModel newSelectedBank) {
    setState(() {
      _bankChoose = newSelectedBank;
    });
  }
  @override
  Widget build(BuildContext context) {

    return
      Scaffold(
        body: Form(
          child: Center(
            child: Container(
              margin: EdgeInsets.only(left: 15, top: 10, right: 15),
              child: FormField<String>(
                builder: (FormFieldState<String> state) {
                  return InputDecorator(
                    decoration: InputDecoration(
                        contentPadding:
                        EdgeInsets.fromLTRB(12, 10, 20, 20),
                        // labelText: "hi",
                        // labelStyle: textStyle,
                        // labelText: _dropdownValue == null
                        //     ? 'Where are you from'
                        //     : 'From',
                        errorText: "Wrong Choice",
                        errorStyle: TextStyle(
                            color: Colors.redAccent, fontSize: 16.0),
                        border: OutlineInputBorder(
                            borderRadius:
                            BorderRadius.circular(10.0))),
                    child: DropdownButtonHideUnderline(
                      child: DropdownButton<BankListDataModel>(

                        style: TextStyle(
                          fontSize: 16,
                          color: Colors.grey,
                          fontFamily: "verdana_regular",
                        ),
                        hint: Text(
                          "Select Bank",
                          style: TextStyle(
                            color: Colors.grey,
                            fontSize: 16,
                            fontFamily: "verdana_regular",
                          ),
                        ),
                        items: bankDataList
                            .map<DropdownMenuItem<BankListDataModel>>(
                                (BankListDataModel value) {
                              return DropdownMenuItem(
                                value: value,
                                child: Row(
                                  // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    new CircleAvatar(
                                      backgroundImage: new NetworkImage(
                                          value.bank_logo),
                                    ),
                                    // Icon(valueItem.bank_logo),
                                    SizedBox(
                                      width: 15,
                                    ),
                                    Text(value.bank_name),
                                  ],
                                ),
                              );
                            }).toList(),

                        isExpanded: true,
                        isDense: true,
                        onChanged: (BankListDataModel newSelectedBank) {
                          _onDropDownItemSelected(newSelectedBank);
                        },
                        value: _bankChoose,

                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      );
  }
}

class BankListDataModel{
  String bank_name;
  String bank_logo;
  BankListDataModel(this.bank_name,this.bank_logo);
}

抱歉图片格式问题。

如何在 Flutter 中将下拉选择项设置为 TextFormField

How to set dropdown selected item into TextFormField in Flutter

dart

flutter

dropdownbutton

textformfield