Flutter Dropdown实现列表项与选中项差异化展示方案咨询

完全可以实现这种需求，不需要定义不同的DropdownMenuItem，利用DropdownButton的selectedItemBuilder属性就能轻松区分选中后的显示内容和下拉列表里的选项内容。

实现步骤： #

1. 先定义你的数据模型类：

class MyElement {
  final String infoA;
  final String infoB;

  MyElement(this.infoA, this.infoB);
}

2. 在Dropdown组件中，通过selectedItemBuilder定制选中后的显示，同时正常设置DropdownMenuItem作为下拉选项：

class CustomDropdown extends StatefulWidget {
  @override
  _CustomDropdownState createState() => _CustomDropdownState();
}

class _CustomDropdownState extends State<CustomDropdown> {
  MyElement? _selectedItem;
  final List<MyElement> _items = [
    MyElement('选项A', '详情A'),
    MyElement('选项B', '详情B'),
    MyElement('选项C', '详情C'),
  ];

  @override
  Widget build(BuildContext context) {
    return DropdownButton<MyElement>(
      value: _selectedItem,
      hint: const Text('请选择'),
      // 自定义选中后的显示内容，仅展示infoA
      selectedItemBuilder: (BuildContext context) {
        return _items.map((item) => Text(item.infoA)).toList();
      },
      // 下拉列表中的选项，展示完整的infoA + infoB
      items: _items.map((item) {
        return DropdownMenuItem<MyElement>(
          value: item,
          child: Text('${item.infoA} - ${item.infoB}'),
        );
      }).toList(),
      onChanged: (newValue) {
        setState(() {
          _selectedItem = newValue;
        });
      },
    );
  }
}

原理说明： #

• selectedItemBuilder会返回一个Widget列表，每个对应items中的一项，当某一项被选中时，就会用这个列表中对应的Widget来显示选中状态。
• 而DropdownMenuItem则负责下拉展开时每个选项的显示内容，两者完全独立，实现了选中和下拉状态的差异化展示。

内容的提问来源于stack exchange，提问作者F.M.