Flutter DropdownMenu选中失效求助：修改代码后无法选择菜单选项

问题原因 #

你把状态变量selectedCategoryFood定义在了build(BuildContext context)方法内部。每次调用setState()触发UI重建时，build方法会重新执行，这个变量会被重新初始化为空字符串''，导致用户选择的选项无法被持久保存，视觉上表现为无法选择菜单选项。

解决方案 #

1. 调整状态变量的定义位置 #

将selectedCategoryFood从build方法内部移到对应的State类的成员变量位置，确保变量的生命周期与State实例一致，不会在每次UI重建时被重置。

修改后的代码示例：

class _YourPageState extends State<YourPage> {
  // 把变量定义为State类的成员变量
  String selectedCategoryFood = '';

  @override
  Widget build(BuildContext context) {
    // 移除原build方法内的变量定义
    return // 你的页面布局代码
      child: DropdownButton<String>(
        icon: Padding(
          padding: const EdgeInsets.only(right: 10, top: 8),
          child: SvgPicture.asset(
            Assets.icons.dropdownIcon.path,
            fit: BoxFit.scaleDown,
          ),
        ),
        style: body1(color: ColorName.blackPrimary),
        items: <String>[
          'Burger',
          'Ice Cream',
        ].map((String value) {
          return DropdownMenuItem(
            value: value,
            child: Text(value),
          );
        }).toList(),
        hint: Padding(
          padding: const EdgeInsets.only(top: 8, left: 10),
          child: Text(
            style: body1(color: ColorName.grey),
            selectedCategoryFood.isEmpty
                ? 'Category Food'
                : selectedCategoryFood,
          ),
        ),
        borderRadius: BorderRadius.circular(10),
        underline: const SizedBox(),
        isExpanded: true,
        onChanged: (value) {
          if (value != null) {
            setState(() {
              selectedCategoryFood = value;
            });
          }
        },
      ),
    );
  }
}

2. （可选）添加value属性优化组件状态 #

当前代码通过hint显示选中值，建议给DropdownButton添加value属性，让组件状态更明确，交互更符合Flutter组件设计规范：

DropdownButton<String>(
  // 添加这一行，绑定选中值
  value: selectedCategoryFood.isEmpty ? null : selectedCategoryFood,
  // 其余原有代码保持不变
)

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