Flutter中DropdownBox值无法更新问题求助

问题描述 #

我需要实现一个基于下拉框的文件导航系统：第一个下拉框包含“random”和“choose”两个选项，选中任一选项后，根据选中值生成对应下一级下拉框，以此类推。目前代码已更新下拉框的选中值（打印日志可验证），但界面上的下拉框选中状态未同步更新，且尚未推进到添加新下拉框的逻辑。

原代码 #

class TrainingScreenRoute extends StatefulWidget {

  ... // <--- other variables
  TrainingScreenRoute(this.user, this.currRelativePathLeft, this.currRelativePathMain){}

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return TrainingScreenRouteState(user, this.currRelativePathLeft, this.currRelativePathMain);
  }

}

class TrainingScreenRouteState extends State<TrainingScreenRoute> {

  ... // <--- other variables

  List<String?> leftDropDownBoxOptions = [null];

  List<Widget> leftDropDownBoxes = [];

  TrainingScreenRouteState(this.user, this.currRelPathLeft, this.currRelPathMain);

  @override
  Widget build(BuildContext context) {

  ... // <--- other variables

    return MaterialApp(
      home: Scaffold(
        body: leftTrainPanel(context, currRelPathLeft),
      ),
    );
  }

  Widget leftTrainPanel(BuildContext context, String currRelPathLeft) {

    int curr_index = leftDropDownBoxes.length;


    print("------------------>got to here");
    print(leftDropDownBoxOptions);
    if (curr_index == 0) { 
      Widget firstOptBox = createDropDownBox(context, ["random", "choose"], add, 0);
      print("here 5");

      setState(() {
        print("------------->box added");

        leftDropDownBoxes.add(firstOptBox);
      });

    }

  Widget createDropDownBox(BuildContext context, List<String> options, Function operation, int boxIndex) {

    double screen_h = MediaQuery.of(context).size.height;
    List<DropdownMenuItem<String>> menuItems = [];

    for (String option in options) {
      menuItems.add(DropdownMenuItem(child: Text(option, style: TextStyle(fontSize: screen_h/20)),value: option));
    }

    print("yolsssssssss");

    return DropdownButton(
      value: leftDropDownBoxOptions[0],
      hint: Text('Select'),
      items: menuItems,
      onChanged: (String? value) {
        setState(() {
          leftDropDownBoxOptions[0] = value!;
          //val = value;
          print("yolo");
          print(leftDropDownBoxOptions);
          print(leftDropDownBoxes);
          operation();
        });
      },
    );
  }
}

问题根源 #

1. 静态Widget列表导致无法更新：你将创建好的DropdownButton存入leftDropDownBoxes列表，后续即使leftDropDownBoxOptions变化，已存入的Widget不会重新渲染，因为它是状态创建时的快照，不会响应状态变化。
2. 选中值绑定错误：所有下拉框的value都绑定了leftDropDownBoxOptions[0]，而非对应索引的选中值，后续添加多级下拉框时会出现混乱。
3. 动态生成逻辑缺失：当前仅在初始状态添加第一个下拉框，没有根据选中值动态添加下一级下拉框的逻辑。

解决方案 #

关键改动点 #

• 不再存储Widget列表，而是存储每个下拉框的可选选项列表和选中值列表，在build时动态生成下拉框，确保状态变化时UI同步更新。
• 每个下拉框绑定对应索引的选中值，而非固定的第一个元素。
• 实现add方法，根据当前选中值添加下一级下拉框的选项和默认选中值。

修改后的完整代码示例 #

class TrainingScreenRoute extends StatefulWidget {
  // 保留原有变量，示例省略
  final User user;
  final String currRelativePathLeft;
  final String currRelativePathMain;

  TrainingScreenRoute(this.user, this.currRelativePathLeft, this.currRelativePathMain);

  @override
  State<TrainingScreenRoute> createState() => TrainingScreenRouteState(user, currRelativePathLeft, currRelativePathMain);
}

class TrainingScreenRouteState extends State<TrainingScreenRoute> {
  // 保留原有变量，示例省略
  final User user;
  final String currRelPathLeft;
  final String currRelPathMain;

  // 存储每个下拉框的选中值
  List<String?> leftDropDownBoxOptions = [null];
  // 存储每个下拉框的可选选项列表
  List<List<String>> leftDropDownOptionsList = [["random", "choose"]];

  TrainingScreenRouteState(this.user, this.currRelPathLeft, this.currRelPathMain);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: leftTrainPanel(context),
      ),
    );
  }

  Widget leftTrainPanel(BuildContext context) {
    return Column(
      children: [
        // 动态生成所有下拉框
        for (int i = 0; i < leftDropDownOptionsList.length; i++)
          createDropDownBox(context, leftDropDownOptionsList[i], () => addNextDropDown(i), i),
      ],
    );
  }

  // 根据当前选中值添加下一级下拉框
  void addNextDropDown(int index) {
    String? selectedValue = leftDropDownBoxOptions[index];
    if (selectedValue == null) return;

    // 模拟根据选中值生成下一级选项，可替换为实际文件导航逻辑
    List<String> nextOptions;
    if (selectedValue == "random") {
      nextOptions = ["file1.txt", "file2.jpg", "folderA"];
    } else {
      nextOptions = ["folderX", "folderY", "document.pdf"];
    }

    setState(() {
      leftDropDownOptionsList.add(nextOptions);
      leftDropDownBoxOptions.add(null);
    });
  }

  Widget createDropDownBox(BuildContext context, List<String> options, Function operation, int boxIndex) {
    double screen_h = MediaQuery.of(context).size.height;
    List<DropdownMenuItem<String>> menuItems = options.map((option) {
      return DropdownMenuItem(
        child: Text(option, style: TextStyle(fontSize: screen_h/20)),
        value: option,
      );
    }).toList();

    return DropdownButton<String>(
      value: leftDropDownBoxOptions[boxIndex],
      hint: const Text('Select'),
      items: menuItems,
      onChanged: (String? value) {
        setState(() {
          leftDropDownBoxOptions[boxIndex] = value;
          print("选中值更新: $leftDropDownBoxOptions");
          // 执行添加下一级下拉框的操作
          operation();
        });
      },
    );
  }
}

改动说明 #

1. 动态生成下拉框：使用for循环遍历leftDropDownOptionsList，每次build时重新生成所有下拉框，确保状态变化时UI同步更新。
2. 正确绑定选中值：每个下拉框的value绑定leftDropDownBoxOptions[boxIndex]，对应自身索引的选中值。
3. 实现多级下拉逻辑：addNextDropDown方法根据当前选中值生成下一级选项，并通过setState更新列表，触发UI重建添加新下拉框。
4. 优化代码结构：简化leftTrainPanel逻辑，移除静态Widget列表，改用状态驱动UI。

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