Flutter如何在initState中填充列表供DropdownMenuItem展示

问题根因 #

• 执行PickTime填充完TimeList后未调用setState通知框架重绘UI，即使列表数据更新，界面上的DropdownButton仍使用初始化时的空列表渲染
• 初始dropdownvalue值TimeOfDay(hour: 1, minute: 1)不在你生成的9:00~20:00的时间区间内，会导致选项匹配异常
• onChanged回调写法错误，当前代码是返回一个匿名函数而非直接执行赋值逻辑，选择选项时不会触发状态更新
• PickTime方法无任何异步操作，不需要声明为Future类型，也不需要await调用，多余的Future.delayed完全没必要

修复后代码 #

class _MyHomePageState extends State<MyHomePage> {
  // 初始值改为生成列表的第一个值，保证能匹配到选项
  TimeOfDay dropdownvalue = TimeOfDay(hour: 9, minute: 0);
  List<TimeOfDay> timeList = [];

  @override
  void initState() {
    super.initState();
    // 直接调用同步方法填充列表
    pickTime(9, 20);
    // 调用setState通知UI重绘
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DropdownButton<TimeOfDay>(
              hint: const Text('选择时间'),
              value: dropdownvalue,
              items: timeList.map((TimeOfDay time) {
                return DropdownMenuItem<TimeOfDay>(
                  // 优化显示格式，不用默认的toString()
                  child: Text("${time.hour.toString().padLeft(2,'0')}:${time.minute.toString().padLeft(2,'0')}"),
                  value: time
                );
              }).toList(),
              // 修复onChanged回调，去掉多余的函数包裹
              onChanged: (TimeOfDay? value) {
                setState(() {
                  if (value != null) dropdownvalue = value;
                });
              },
            )
          ],
        ),
      ),
    );
  }

  // 改为同步方法，不需要Future
  void pickTime(int begin, int end) {
    for (int i = begin; i < end; i++) {
      timeList.add(TimeOfDay(hour: i, minute: 0));
      timeList.add(TimeOfDay(hour: i, minute: 30));
    }
  }
}

额外优化提示 #

Dart官方命名规范要求变量、方法名使用小驼峰格式，原代码中的TimeList、PickTime不符合规范，已同步修正为timeList、pickTime。

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