我試圖讓用戶選擇他們一周的作業時間，因為我已經完成了List一周中的幾天并使用 aListView.builder來顯示所有天，如下所示。
現在我想允許用戶更改每天的開始時間和結束時間。為此，我呼叫了一次TimePicker點擊，但是當我更改開始時間時，所有開始時間都會更改。
我的問題是，使用 aListView生成日期是一個好主意，如果是的話，如何每天修改小時數而不同時修改其他小時數。
這是代碼：
實用程式
static String displayCorrectTimeOfDay(int hour, int minute) {
final hours = hour.toString().padLeft(2, '0');
final minutes = minute.toString().padLeft(2, '0');
return "${hours}h$minutes";
}
文本
const String monday = "Mon.";
const String tuesday = "Tue.";
const String wednesday = "Wed";
const String thursday = "Thu.";
const String friday = "Fri.";
const String saturday = "Sat.";
const String sunday = "Sun.";
每周計劃螢屏
class WeeklyScheduleScreen extends StatefulWidget {
const WeeklyScheduleScreen({Key? key}) : super(key: key);
@override
State<WeeklyScheduleScreen> createState() => _WeeklyScheduleScreenState();
}
class _WeeklyScheduleScreenState extends State<WeeklyScheduleScreen> {
TimeOfDay from = const TimeOfDay(hour: 7, minute: 00);
TimeOfDay to = const TimeOfDay(hour: 23, minute: 00);
List<String> week = [monday, tuesday, wednesday, thursday, friday, saturday, sunday];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: const CloseButton(
color: white,
),
title: const Text(
myWeek,
style: TextStyle(
color: white,
),
),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 15,),
buildSubTitle(),
const SizedBox(height: 25,),
buildWeek(),
//buildFrom(),
],
),
),
);
}
Widget buildSubTitle() => const Text(
myWeekSubTitle,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
);
Widget buildWeek() => ListView.builder(
itemCount: week.length,
itemBuilder: (_, i) => buildSelectHour(week[i]),
shrinkWrap: true,
physics: const BouncingScrollPhysics(),
);
Widget buildSelectHour(String day) => Row(
children: [
Text(
day,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Expanded(
flex: 3,
child: buildDropDownField(
text: Utils.displayCorrectTimeOfDay(from.hour, from.minute),
onClicked: () => pickFromTime(),
),
),
Expanded(
flex: 3,
child: buildDropDownField(
text: Utils.displayCorrectTimeOfDay(to.hour, to.minute),
onClicked: () => pickToTime(),
),
),
Expanded(
flex: 1,
child: IconButton(
onPressed: () { print( "Done clicked"); },
icon: const Icon(
Icons.check_circle,
color: phoneButtonColor,
),
),
),
Expanded(
flex: 1,
child: IconButton(
onPressed: () { print( "Cancel clicked"); },
icon: const Icon(
Icons.cancel,
color: red,
),
),
),
],
);
Widget buildDropDownField({required String text, required VoidCallback onClicked}) =>
ListTile(
title: Text(text),
trailing: const Icon(Icons.arrow_drop_down),
onTap: onClicked,
);
Future pickFromTime() async {
TimeOfDay? timePicked = await showTimePicker(
context: context,
initialTime: from,
);
if(timePicked == null) return;
setState(() => from = timePicked);
}
Future pickToTime() async {
TimeOfDay? timePicked = await showTimePicker(
context: context,
initialTime: to,
);
if(timePicked == null) return;
setState(() => to = timePicked);
}
}
提前致謝
uj5u.com熱心網友回復：
您剛剛創建了一個適用于所有專案的 TimeOfDay。
只需創建一個包含所有 TimeOfDay 的串列，以便您可以通過構建器索引輕松訪問它們，例如：
...
List<TimeOfDay> froms = [const TimeOfDay(hour: 7, minute: 00),...];
<TimeOfDay> tos = [const TimeOfDay(hour: 23, minute: 00),...];
...
Widget buildSelectHour(String day, int index) => Row(
children: [
Text(
day,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Expanded(
flex: 3,
child: buildDropDownField(
text: Utils.displayCorrectTimeOfDay(froms[index].hour, froms[index].minute),
onClicked: () => pickFromTime(),
),
),
Expanded(
flex: 3,
child: buildDropDownField(
text: Utils.displayCorrectTimeOfDay(tos[index].hour, tos[index].minute),
onClicked: () => pickToTime(),
),
),
Expanded(
flex: 1,
child: IconButton(
onPressed: () { print( "Done clicked"); },
icon: const Icon(
Icons.check_circle,
color: phoneButtonColor,
),
),
),
Expanded(
flex: 1,
child: IconButton(
onPressed: () { print( "Cancel clicked"); },
icon: const Icon(
Icons.cancel,
color: red,
),
),
),
],
);
Future pickFromTime(int index) async {
TimeOfDay? timePicked = await showTimePicker(
context: context,
initialTime: from,
);
if(timePicked == null) return;
setState(() => froms[index] = timePicked);
}
Future pickToTime(int index) async {
TimeOfDay? timePicked = await showTimePicker(
context: context,
initialTime: to,
);
if(timePicked == null) return;
setState(() => tos[index] = timePicked);
}
uj5u.com熱心網友回復：
嘗試制作 WeekDays 模型類
void main() {
List<WeekDays> week = [
WeekDays(days: "Mon."),
WeekDays(days: "Tue."),
WeekDays(days: "Wed."),
WeekDays(days: "Thu."),
WeekDays(days: "Fri."),
WeekDays(days: "Sat."),
WeekDays(days: "Sun."),
];
week.forEach((day) {
print("${day.days} ${day.startHour} ${day.endHour}");
});
}
class WeekDays {
final String days;
double startHour;
double endHour;
WeekDays({
required this.days,
this.startHour = 7.0,
this.endHour = 24.0,
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/506365.html