list - 从列表中插入输入芯片在按钮单击时进入 TextFormField Flutter

Question

我有List<String>以下城市

List<String> cities = ["Nairobi", "Tokyo", "Moscow", "Bogota",
 "Helsinki", "Denver", "Stockholm", "Oslo"];

我正在获取城市列表，并在选择更新城市字符串列表的城市时使用TextEditingController将文本设置为TextFormField 。下面是代码showCityPickerDialog

TextFormField(
                    cursorHeight: 20,
                    enableInteractiveSelection: false,
                    readOnly: true,
                    focusNode: FocusNode(),
                    controller: TextEditingController(
                        text:
                            cities.isEmpty ? null : "$cities"),
                    onTap: () {
                      showCityPickerDialog();
                    },
                    decoration: InputDecoration(
                      isDense: true,
                      labelText: "Select Cities",
                      border: const OutlineInputBorder(),
                      suffixIcon: IconButton(
                          onPressed: () {
                            showCityPickerDialog();
                          },
                          icon: const Icon(Icons.location_city)),
                    ),
                    validator: (phoneNo) {},
                    keyboardType: TextInputType.multiline,
                    maxLines: null,
                  )

我想要实现的不仅仅是使用TextEditingController(text: cities.isEmpty ? null : "$cities")我想使用芯片设置文本，如下面的代码，其中TextFormField内的芯片数量将取决于列表的长度

Chip(
  avatar: CircleAvatar(
    backgroundColor: Colors.grey.shade800,
    child: Text('City Initial'),
  ),
  label: Text('City'),
)

Answer 1

也许您可以在 TextFormField 装饰中添加芯片作为前缀小部件，如下所示：

          prefix: Row(
                    children: cities
                        .map(
                          (e) => Chip(
                            avatar: CircleAvatar(
                              backgroundColor: Colors.grey.shade800,
                              child: Text('City Initial'),
                            ),
                            label: Text(e),
                          ),
                        )
                        .toList(),
                  )