flutter如何实现一个既可输入又可下拉选择的控件

在Flutter中，如何实现一个既支持手动输入文本，又能下拉选择预设选项的复合控件？类似于网页中的可输入下拉框（ComboBox）。希望了解具体的实现方式，是否需要组合TextField和DropdownButton，或者是否有现成的第三方库可以直接使用？最好能提供简单的代码示例或实现思路。

2 回复

在Flutter中，使用DropdownButtonFormField可实现既可输入又可下拉选择的控件。结合TextFormField和DropdownButton特性，支持用户输入自定义内容或从下拉列表中选择预设选项。

更多关于flutter如何实现一个既可输入又可下拉选择的控件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，要实现既可输入又可下拉选择的控件，可以使用Autocomplete组件或自定义组合TextField与DropdownButton。

方法一：使用Autocomplete（推荐）

Flutter 2.0+ 提供了Autocomplete组件，支持输入和选择：

Autocomplete<String>(
  optionsBuilder: (TextEditingValue textEditingValue) {
    return ['选项1', '选项2', '选项3']
        .where((String option) => option.contains(textEditingValue.text))
        .toList();
  },
  onSelected: (String selection) {
    print('选中了: $selection');
  },
)

方法二：自定义组合控件

结合TextField和DropdownButton：

class InputDropdown extends StatefulWidget {
  @override
  _InputDropdownState createState() => _InputDropdownState();
}

class _InputDropdownState extends State<InputDropdown> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _options = ['选项1', '选项2', '选项3'];
  String? _selectedValue;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _controller,
          decoration: InputDecoration(
            suffixIcon: DropdownButton<String>(
              value: _selectedValue,
              items: _options.map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (String? newValue) {
                setState(() {
                  _selectedValue = newValue;
                  _controller.text = newValue ?? '';
                });
              },
            ),
          ),
          onChanged: (value) {
            setState(() {
              _selectedValue = value;
            });
          },
        ),
      ],
    );
  }
}

特点比较：

  • Autocomplete：官方推荐，自带搜索过滤，UI统一
  • 自定义组合：更灵活，可完全自定义样式和交互

根据需求选择合适方案，一般推荐使用Autocomplete以获得更好的用户体验。

回到顶部