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

发布于 2025-01-09 01:43:56 字数 1791 浏览 4 评论 0原文

我下面有一个城市 List

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: cars.isEmpty ? null : "$cities") 设置文本，我想使用 Chips< /strong> 就像下面的代码一样，其中 TextFormField 内的芯片数量将取决于列表的长度


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

原文

I am having a List<String> of cities below

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

I am taking the cities list and just setting the text to TextFormField using TextEditingController upon a city being selected in showCityPickerDialog which updates the cities string list. Below is the code


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,
                  )

What i would like to achieve is instead of just setting the text using TextEditingController(text: cities.isEmpty ? null : "$cities") i would like to use Chips like in below code where the number of chips inside the TextFormField will depend on the length of the list


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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尬尬 2025-01-16 01:43:56

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

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

Maybe you can add chips inside your TextFormField decoration as prefix Widget like this:

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

回复收藏 0 原文

~没有更多了~