Flutter中如何用TimePicker逐个修改ListView内的每日时间？

1. 使用ListView生成日期是否合理？ #

完全合理。ListView.builder专为渲染重复列表项设计，对于一周7天这种固定数量的列表，它能高效构建UI，配合shrinkWrap: true还能自适应高度，非常适配当前场景。

2. 如何单独修改每一天的时间？ #

问题根源是你使用了全局的from和to变量，所有列表项都绑定这两个变量，导致修改时所有项同步变化。解决思路是给每一天单独存储时间数据，具体实现步骤如下：

步骤1：创建日期时间模型类 #

定义一个类封装每天的星期名称、开始时间和结束时间：

class WeekDaySchedule {
  final String dayName;
  TimeOfDay startTime;
  TimeOfDay endTime;

  WeekDaySchedule({
    required this.dayName,
    required this.startTime,
    required this.endTime,
  });
}

步骤2：初始化每日数据 #

替换原来的List<String> week，用模型类列表初始化每天的默认时间：

List<WeekDaySchedule> weeklySchedule = [
  WeekDaySchedule(dayName: monday, startTime: const TimeOfDay(hour:7, minute:0), endTime: const TimeOfDay(hour:23, minute:0)),
  WeekDaySchedule(dayName: tuesday, startTime: const TimeOfDay(hour:7, minute:0), endTime: const TimeOfDay(hour:23, minute:0)),
  WeekDaySchedule(dayName: wednesday, startTime: const TimeOfDay(hour:7, minute:0), endTime: const TimeOfDay(hour:23, minute:0)),
  WeekDaySchedule(dayName: thursday, startTime: const TimeOfDay(hour:7, minute:0), endTime: const TimeOfDay(hour:23, minute:0)),
  WeekDaySchedule(dayName: friday, startTime: const TimeOfDay(hour:7, minute:0), endTime: const TimeOfDay(hour:23, minute:0)),
  WeekDaySchedule(dayName: saturday, startTime: const TimeOfDay(hour:7, minute:0), endTime: const TimeOfDay(hour:23, minute:0)),
  WeekDaySchedule(dayName: sunday, startTime: const TimeOfDay(hour:7, minute:0), endTime: const TimeOfDay(hour:23, minute:0)),
];

步骤3：修改列表项构建逻辑 #

在buildSelectHour中接收对应的WeekDaySchedule对象和索引，绑定该日期自己的时间：

Widget buildWeek() => ListView.builder(
  itemCount: weeklySchedule.length,
  itemBuilder: (_, i) => buildSelectHour(weeklySchedule[i], i),
  shrinkWrap: true,
  physics: const BouncingScrollPhysics(),
);

Widget buildSelectHour(WeekDaySchedule schedule, int index) => Row(
  children: [
    Text(
      schedule.dayName,
      style: const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
      ),
    ),
    Expanded(
      flex: 3,
      child: buildDropDownField(
        text: Utils.displayCorrectTimeOfDay(schedule.startTime.hour, schedule.startTime.minute),
        onClicked: () => pickFromTime(index),
      ),
    ),
    Expanded(
      flex: 3,
      child: buildDropDownField(
        text: Utils.displayCorrectTimeOfDay(schedule.endTime.hour, schedule.endTime.minute),
        onClicked: () => pickToTime(index),
      ),
    ),
    Expanded(
      flex: 1,
      child: IconButton(
          onPressed: () { print( "Done clicked for ${schedule.dayName}"); },
          icon: const Icon(
            Icons.check_circle,
            color: phoneButtonColor,
          ),
      ),
    ),
    Expanded(
      flex: 1,
      child: IconButton(
        onPressed: () { print( "Cancel clicked for ${schedule.dayName}"); },
        icon: const Icon(
          Icons.cancel,
          color: red,
        ),
      ),
    ),
  ],
);

步骤4：修改时间选择方法 #

根据传入的索引修改对应日期的时间：

Future pickFromTime(int index) async {
  TimeOfDay? timePicked = await showTimePicker(
    context: context,
    initialTime: weeklySchedule[index].startTime,
  );

  if(timePicked == null) return;

  setState(() {
    weeklySchedule[index].startTime = timePicked;
  });
}

Future pickToTime(int index) async {
  TimeOfDay? timePicked = await showTimePicker(
    context: context,
    initialTime: weeklySchedule[index].endTime,
  );

  if(timePicked == null) return;

  setState(() {
    weeklySchedule[index].endTime = timePicked;
  });
}

步骤5：移除全局变量 #

删除原来的全局from和to变量，所有日期的时间数据都存储在weeklySchedule列表中。

修改完成后，每个列表项绑定独立的时间数据，修改某一天的时间只会影响对应的项，不会同步到其他日期。

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