Flutter中initState参数设置问题：_selectedTime不更新

问题分析 #

你遇到的情况是：initState里通过路由参数更新_selectedTime后，控制台打印值正确，但TimePickerSpinner始终显示初始化时的DateTime.now()值，而_selectedDate在日历组件中显示正常。核心原因大概率是TimePickerSpinner组件没有正确响应setState触发的参数更新，或者组件内部对time参数的处理存在缓存逻辑。

可行解决方案 #

方案1：给组件添加唯一Key强制重建 #

给TimePickerSpinner绑定一个基于_selectedTime的Key，确保每次时间变化时组件能完全重建，避免复用旧状态：

TimePickerSpinner(
  key: ValueKey(_selectedTime), // 新增此行
  time: _selectedTime,
  is24HourMode: true,
  normalTextStyle: GoogleFonts.inter(
    fontSize: 21,
    color: Colors.white,
  ),
  highlightedTextStyle: GoogleFonts.inter(
    fontSize: 21,
    color: Colors.white,
  ),
  spacing: 10,
  itemHeight: 40,
  isForce2Digits: true,
  alignment: Alignment.center,
  onTimeChange: (time) {
    setState(() {
      _selectedTime = time;
    });
  },
),

方案2：用ValueNotifier监听时间变化 #

如果添加Key无效，改用ValueNotifier管理时间状态，通过ValueListenableBuilder确保组件实时响应参数变化：

首先修改变量声明：

late DateTime _selectedDate;
final ValueNotifier<DateTime> _selectedTimeNotifier = ValueNotifier(DateTime.now());
late DateTime _currentMonth;
Duration _duration = const Duration(hours: 1);

然后在initState中更新值：

@override
void initState() {
  super.initState();

  _selectedDate = DateTime.now();
  _currentMonth = DateTime(_selectedDate.year, _selectedDate.month);

  WidgetsBinding.instance.addPostFrameCallback((_) {
    final Map<String, dynamic> arguments =
        ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>;
    if (arguments.containsKey('reservation')) {
      final Reservation reservation =
          Reservation.fromJson(arguments['reservation']);
      _selectedDate = reservation.dateFrom;
      _currentMonth = DateTime(_selectedDate.year, _selectedDate.month);
      // 更新ValueNotifier的值，无需setState也能触发组件更新
      _selectedTimeNotifier.value = reservation.dateFrom;

      print(_selectedTimeNotifier.value);
      final difference =
          reservation.dateTo.difference(reservation.dateFrom);
      final minutes = difference.inMinutes;
      _duration = Duration(minutes: minutes.toInt());
      setState(() {}); // 触发其他变量的UI更新
    }
  });
}

最后用ValueListenableBuilder包裹TimePickerSpinner：

ValueListenableBuilder<DateTime>(
  valueListenable: _selectedTimeNotifier,
  builder: (context, selectedTime, child) {
    return TimePickerSpinner(
      time: selectedTime,
      is24HourMode: true,
      normalTextStyle: GoogleFonts.inter(
        fontSize: 21,
        color: Colors.white,
      ),
      highlightedTextStyle: GoogleFonts.inter(
        fontSize: 21,
        color: Colors.white,
      ),
      spacing: 10,
      itemHeight: 40,
      isForce2Digits: true,
      alignment: Alignment.center,
      onTimeChange: (time) {
        _selectedTimeNotifier.value = time;
      },
    );
  },
),

方案3：处理UTC与本地时间转换 #

如果reservation.dateFrom是UTC时间（比如打印的2024-08-12 14:45:44.000Z带Z标识），而DateTime.now()是本地时间，组件可能因时区差异显示异常，尝试转换后再赋值：

_selectedTime = reservation.dateFrom.toLocal();

额外排查点 #

• 检查TimePickerSpinner的版本，升级到最新版，旧版本可能存在参数更新不响应的bug。
• 在build方法中打印_selectedTime，确认setState是否真的触发了组件重建。

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