如何在Flutter中使用timepicker组件实现开始与结束时间的选择及单独更新

问题原因 #

你目前所有时间选择组件都共用同一个_currentTime状态变量存储选中值，所以不管点击哪个时间选择框，修改的都是同一个值，自然无法实现两个字段的独立更新。

解决方案 #

你需要拆分状态变量，同时调整方法的传参逻辑，修改后代码如下：
首先替换原来的单一时间状态变量：

// 拆分两个变量分别存储开始时间和结束时间，初始值可按需求设置
TimeOfDay _startTime = TimeOfDay.now();
TimeOfDay _endTime = TimeOfDay.now();

调整时间选择函数逻辑：

Future<Null> selectedTime(BuildContext context, bool isStartTime) async{
  TimeOfDay? _pickedTime = await showTimePicker(
    context: context,
    // 初始值根据选择的时间类型取对应变量
    initialTime: isStartTime ? _startTime : _endTime
  );
  if (_pickedTime != null){
    setState(() {
      // 根据标识更新对应时间变量
      if(isStartTime) {
        _startTime = _pickedTime;
      } else {
        _endTime = _pickedTime;
      }
      print("选中的时间为: $_pickedTime");
    });
  }
}

调整组件构建函数，新增当前展示时间的入参：

Widget _buildTimePick(String title, bool isStartTime, TimeOfDay showTime){
  return Row(
    children: [
      Container(
        width: 80,
        child: Text(
          title,
          style: AppStyles.textTitle,
        ),
      ),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
        decoration: BoxDecoration(
          border: Border.all(color: MyColors.borderColor),
          borderRadius: BorderRadius.circular(20),
        ),
        child: GestureDetector(
          child: Text(
            "${showTime.format(context)}",
            style: AppStyles.textBody,
          ),
          onTap: () {
            selectedTime(context, isStartTime);
          },
        ),
      ),
    ],
  );
}

调用示例：

// 生成开始时间选择器
_buildTimePick("开始时间", true, _startTime),
// 生成结束时间选择器
_buildTimePick("结束时间", false, _endTime)

如果需要额外校验结束时间不早于开始时间，只需要在selectedTime函数的setState逻辑前加对应判断即可。

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