Flutter中如何通过下拉菜单选择改变应用状态及组件可见性

你只需要在State类里新增一个控制可见性的布尔变量，然后在下拉选择的回调里根据选中值更新这个变量，最后在UI里根据变量值控制组件显示即可，具体步骤如下：

1. 在State类中添加可见性控制变量 #

在你的State子类里声明一个布尔变量，初始值设为false：

class _YourWidgetState extends State<YourWidget> {
  String? selectedFaction;
  // 新增控制组件可见性的变量
  bool _isTargetComponentVisible = false;
  // 你的factions列表（示例）
  List<String> factions = ["选项1", "number 6", "其他选项"];
  
  // ... 其他代码
}

2. 修改DropdownButton的onChanged回调 #

在设置selectedFaction的同时，判断选中的是否是"number 6"，同步更新可见性变量：

onChanged: (String? item) {
  setState(() {
    selectedFaction = item!;
    // 判断选中值，更新可见性状态
    _isTargetComponentVisible = item == "number 6";
  });
},

3. 在UI中根据变量控制组件可见性 #

有两种常用方式实现组件的显隐控制：

方式一：使用Visibility组件 #

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      // 你的下拉菜单
      DropdownButton(
        dropdownColor: kBlueGrey900,
        value: selectedFaction,
        items: factions.map<DropdownMenuItem<String>>((String item) {
          return DropdownMenuItem<String>(
            value: item,
            child: Text(
              item,
              style: TextStyle(
                color: kWhite,
                fontWeight: FontWeight.bold,
                fontSize: 20,
                fontFamily: 'SourceSansPro',
              ),
            ),
          );
        }).toList(),
        onChanged: (String? item) {
          setState(() {
            selectedFaction = item!;
            _isTargetComponentVisible = item == "number 6";
          });
        },
      ),
      // 被控制可见性的组件
      Visibility(
        visible: _isTargetComponentVisible,
        child: Container(
          width: 200,
          height: 100,
          color: Colors.red,
          child: Center(child: Text("选中number 6时显示")),
        ),
      ),
    ],
  );
}

方式二：条件判断直接渲染 #

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      // 你的下拉菜单
      DropdownButton(/* 保留原有代码 */),
      // 条件判断是否渲染目标组件
      if (_isTargetComponentVisible)
        Container(
          width: 200,
          height: 100,
          color: Colors.red,
          child: Center(child: Text("选中number 6时显示")),
        ),
    ],
  );
}

这样当用户选中"number 6"时，目标组件会自动显示；选择其他选项时，组件会隐藏。

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