如何重置Flutter time_range组件的初始选中值？

1. 定义状态变量存储日期与时间范围的映射 #

在你的State类中添加两个核心变量：

• 用Map存储每个日期对应的已选时间范围
• 用可空的TimeRangeResult控制当前时间选择器的初始状态

Map<DateTime, TimeRangeResult> _dateTimeRanges = {};
TimeRangeResult? _currentRange;

2. 切换日期时同步更新时间选择器状态 #

在日期切换的回调逻辑中（比如日期选择器的确认事件），更新当前显示的时间范围：

• 如果切换的日期已有保存的时间，直接加载该记录
• 无保存记录时，将状态设为null，即回到无选中的初始状态

// 示例：日期切换回调函数
void _onDateSelected(DateTime newSelectedDate) {
  setState(() {
    selectedDate = newSelectedDate;
    // 加载对应日期的时间范围，无记录则设为null
    _currentRange = _dateTimeRanges[selectedDate];
  });
}

3. 修改TimeRange组件的初始值参数 #

将原来固定的initialRangeOpeningHours替换为状态变量_currentRange：

TimeRange(
  initialRange: _currentRange, // 绑定状态变量实现动态更新
  fromTitle: Text(
    'Start Time',
    style: TextStyle(fontSize: 13, color: Colors.grey),
  ),
  toTitle: Text(
    'End Time',
    style: TextStyle(fontSize: 13, color: Colors.grey),
  ),
  titlePadding: 20,
  textStyle: TextStyle(fontWeight: FontWeight.normal, color: Colors.black87),
  activeTextStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
  borderColor: Colors.black,
  backgroundColor: Color(0xFFF5F5F5),
  activeBackgroundColor: forIos
      ? BaseAppTheme.of(context).gray200
      : BaseAppTheme.of(context).stepsBackground,
  firstTime: TimeOfDay(hour: 0, minute: 00),
  lastTime: TimeOfDay(hour: 23, minute: 59),
  timeStep: 60,
  timeBlock: 60,
  onFirstTimeSelected: (hour) {
    setState(() {
      forIos = false;
    });
  },
  onRangeCompleted: (range) {
    if (range != null) {
      setState(() {
        forIos = false;
        // 保存当前日期对应的时间范围
        _dateTimeRanges[selectedDate] = range;
        timingAddedForSelectedDates.add(selectedDate);
      });
    }
  },
)

4. 主动重置当前日期的时间选择状态 #

如果需要添加重置按钮，直接移除对应日期的记录并更新状态：

void _resetCurrentTimeRange() {
  setState(() {
    _dateTimeRanges.remove(selectedDate);
    _currentRange = null;
  });
}

这样修改后，切换日期时时间选择器会自动匹配对应日期的已选时间或回到初始无选中状态，不同日期的时间设置完全独立，不会互相干扰。

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