flutter - 如何使用下拉按钮创建 TextformField 以在颤动中显示图标和文本列表

Question

我是 Flutter 的新手，我想在 Flutter 的 TextformField 中创建图标和文本的下拉列表。就像银行图标和它的名字一样。请查看屏幕截图并建议我任何代码。先感谢您。请帮忙。

Answer 1

大概使用 DropdownButton 类，https: //api.flutter.dev/flutter/material/DropdownButton-class.html

在文档页面上，您可以看到一个不包含图标的示例代码。

您可以通过更改 items 参数以使 Row 包装 Icon 和 Text 小部件，将图标添加到下拉项。

见：https ://dartpad.dev/b742bde3465a616f8787c434415c9e3e?null_safety=true

 items: <String>['One', 'Two', 'Free', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Row(
            children: [
              Icon(Icons.close),
              Text(value),
            ],
          ),
        );
      }).toList(),

Answer 2

...
//custom object
class Item{
  String name; //set the item name
  Icon icon; //set corresponding icon
}
Item selectedItem;
List<Item> itemList = []; //create a list of the items, you need to add items into it first

DropdownButton<Item>(
                isExpanded: true,
                hint: new Text("Select Item"),
                value: selectedItem ,
                icon: Icon(Icons.arrow_drop_down_circle),
                iconSize: 24,
                elevation: 16,
                style: TextStyle(color: Colors.blueAccent),
                underline: Container(
                  height: 2,
                  color: Colors.blue,
                ),
                onChanged: (Item newValue) {
                  setState(() {
                    selectedItem = newValue;
                  });
                },
                items: itemList.map<DropdownMenuItem<Item>>((Item value) {
                  return DropdownMenuItem<Item>(
                    value: value,
                    child: Row(
                      //set alignment here
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Icon(value.icon), //in here you can display the icon
                        Text(value.name), //name of the item
                      ],
                  );
                }).toList(),
              )