如何根据下拉状态有条件地在Flutter Dropdown Button中显示附加内容？

Question

我正在开发一个 Flutter 应用程序，并使用 DropdownButton 实现了一个下拉菜单。在此下拉列表中，我想在下拉列表打开时显示美国国旗、文本“USA”和国家/地区代码“+1”，但在关闭时仅显示美国国旗。

目前，我尝试通过自定义 DropdownButton 并使用条件逻辑根据下拉状态显示附加内容来实现此目的。但是，我在这种实现中遇到了问题，一旦下拉状态打开，内容只是图像，并且仅针对关闭状态进行更新。

请看下面的代码：

// Widget block
class _CountryDropDownMenuWidgetState
    extends State<_CountryDropDownMenuWidget> {
  bool _isDropdownOpen = false;

  @override
  Widget build(BuildContext context) {
    final viewModel = Provider.of<LogInEmailViewModel>(context);

    return Container(
      padding: EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton<int>(
          // isExpanded: true,
          value: viewModel.selectedIndex,
          onChanged: (index) {
            _isDropdownOpen = false;
            viewModel.selectItem(index!);
          },
          onTap: () {
            setState(() {
              _isDropdownOpen = true;
            });
          },
          items: viewModel.dropdownItems.asMap().entries.map((entry) {
            final item = entry.value;
            return DropdownMenuItem<int>(
              value: entry.key,
              child: Row(
                children: [
                  Image.asset(item.flagPath),
                  if (_isDropdownOpen)
                    const SizedBox(width: 8),
                  if (_isDropdownOpen)
                    Text(item.text),
                  if (_isDropdownOpen)
                    Text(item.countryCode),
                ],
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

  // Viewmodel block
  int _selectedIndex = 0;

  final List<DropdownItem> dropdownItems = [
    DropdownItem(text: 'USA', flagPath: 'assets/images/logo2.png', countryCode: '+1'),
  ];

  int get selectedIndex => _selectedIndex;

  void selectItem(int index) {
    _selectedIndex = index;
    notifyListeners();
  }

  DropdownItem get selectedItem => dropdownItems[_selectedIndex];

我的期望是在下拉列表关闭时隐藏附加内容（美国文本和国家/地区代码），并仅在下拉列表打开时显示。我正在寻求有关如何纠正此行为并根据下拉状态实现所需显示的指导。

Answer 1

我对为什么你的实现无法工作的猜测是

onChanged

中没有setState。

如果这没有用，请阅读下面！

实现 UI 目标的更好方法是实现

selectedItemBuilder

的

DropdownButton

属性。

这样，

您可以为 selectedItem（在按钮关闭状态下可见）和所有选项（在按钮打开状态下可见）提供单独的小部件

因此将标志放入

selectedItemBuilder

并将标志、文本和代码行放入

items

。

旁注：这个实现更干净、更优化。

flutter 文档与可运行示例