Flutter的dropdown_search组件如何将选中值重置回初始提示标签

解决方案 #

你可以通过两种方式实现重置效果：

方案1：动态绑定selectedItem属性（推荐）

1. 首先将当前页面改为StatefulWidget，声明一个可空的状态变量存储选中值：

String? _selectedCountry = "Brazil";

2. 修改DropdownSearch组件的selectedItem属性绑定该变量：

DropdownSearch<String>(
    mode: Mode.MENU,
    showSelectedItem: true,
    items: ["Brazil", "Italia (Disabled)", "Tunisia", 'Canada'],
    label: "Please Select",
    hint: "country in menu mode",
    popupItemDisabled: (String s) => s.startsWith('I'),
    onChanged: (val) {
      setState(() {
        _selectedCountry = val;
      });
    },
    selectedItem: _selectedCountry
),

3. 需要重置的时候，执行以下代码刷新状态即可：

setState(() {
  _selectedCountry = null;
});

当selectedItem为null时，组件会自动恢复显示初始的label提示内容。

方案2：通过GlobalKey调用组件内置重置方法

1. 声明对应类型的GlobalKey：

final _dropdownKey = GlobalKey<DropdownSearchState<String>>();

2. 给DropdownSearch组件绑定key：

DropdownSearch<String>(
    key: _dropdownKey,
    // 其余原有属性保持不变
    mode: Mode.MENU,
    showSelectedItem: true,
    items: ["Brazil", "Italia (Disabled)", "Tunisia", 'Canada'],
    label: "Please Select",
    hint: "country in menu mode",
    popupItemDisabled: (String s) => s.startsWith('I'),
    onChanged: print,
    selectedItem: "Brazil"
),

3. 需要重置时调用内置reset方法：

_dropdownKey.currentState?.reset();

内容的提问来源于stack exchange，提问作者David