在我的应用程序中,用户需要手动为任务选择时间,但我不知道在flutter应用程序中使用时间选择器并由用户手动选择时间(一天)的正确方法是什么。
9njqaruj1#
首先在类级别声明这个变量,
TimeOfDay selectedTime = TimeOfDay.now();
然后调用这个方法
Future<void> _selectTime(BuildContext context) async { final TimeOfDay picked_s = await showTimePicker( context: context, initialTime: selectedTime, builder: (BuildContext context, Widget child) { return MediaQuery( data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false), child: child, );}); if (picked_s != null && picked_s != selectedTime ) setState(() { selectedTime = picked_s; }); }
xjreopfe2#
这段代码将显示一个包含材料设计时选取器的对话框。注意,showTimePicker表示Future,因此,您需要使用await来获取时间。
showTimePicker
await
TimeOfDay initialTime = TimeOfDay.now(); TimeOfDay pickedTime = await showTimePicker( context: context, initialTime: initialTime, );
您还可以使用showTimePicker中的builder属性自定义时间选择器
builder
TimeOfDay initialTime = TimeOfDay.now(); TimeOfDay pickedTime = await showTimePicker( context: context, initialTime: initialTime, builder: (BuildContext context, Widget child) { return Directionality( textDirection: TextDirection.rtl, child: child, ); }, );
您可以在官方文档here中了解更多信息
efzxgjgh3#
您可以从flutter_datetime_picker插件使用:
FlatButton( onPressed: () { DatePicker.showDatePicker(context, showTitleActions: true, minTime: DateTime(2018, 3, 5), maxTime: DateTime(2019, 6, 7), onChanged: (date) { print('change $date'); }, onConfirm: (date) { print('confirm $date'); }, currentTime: DateTime.now(), locale: LocaleType.zh); }, child: Text( 'show date time picker (Chinese)', style: TextStyle(color: Colors.blue), )); class CustomPicker extends CommonPickerModel { String digits(int value, int length) { return '$value'.padLeft(length, "0"); } CustomPicker({DateTime currentTime, LocaleType locale}) : super(locale: locale) { this.currentTime = currentTime ?? DateTime.now(); this.setLeftIndex(this.currentTime.hour); this.setMiddleIndex(this.currentTime.minute); this.setRightIndex(this.currentTime.second); } @override String leftStringAtIndex(int index) { if (index >= 0 && index < 24) { return this.digits(index, 2); } else { return null; } } @override String middleStringAtIndex(int index) { if (index >= 0 && index < 60) { return this.digits(index, 2); } else { return null; } } @override String rightStringAtIndex(int index) { if (index >= 0 && index < 60) { return this.digits(index, 2); } else { return null; } } @override String leftDivider() { return "|"; } @override String rightDivider() { return "|"; } @override List<int> layoutProportions() { return [1, 2, 1]; } @override DateTime finalTime() { return currentTime.isUtc ? DateTime.utc(currentTime.year, currentTime.month, currentTime.day, this.currentLeftIndex(), this.currentMiddleIndex(), this.currentRightIndex()) : DateTime(currentTime.year, currentTime.month, currentTime.day, this.currentLeftIndex(), this.currentMiddleIndex(), this.currentRightIndex()); } }
vd8tlhqk4#
你可以在Flutter中使用这个时间选择器
Future<void> _selectTime(BuildContext context) async { TimeOfDay? picked = await showTimePicker( context: context, initialTime: TimeOfDay.now(), builder: (BuildContext context, Widget child) { return MediaQuery( data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false), child: child, );}); if (picked != null && picked != TimeOfDay.now() ) }
4条答案
按热度按时间9njqaruj1#
首先在类级别声明这个变量,
然后调用这个方法
xjreopfe2#
这段代码将显示一个包含材料设计时选取器的对话框。
注意,
showTimePicker
表示Future,因此,您需要使用await
来获取时间。您还可以使用
showTimePicker
中的builder
属性自定义时间选择器您可以在官方文档here中了解更多信息
efzxgjgh3#
您可以从flutter_datetime_picker插件使用:
vd8tlhqk4#
你可以在Flutter中使用这个时间选择器