Flutter Vant UI

Appearance

On this page

TimePicker 时间选择 ​

代码演示 ​

基本用法 ​

dart
TimePicker(
  value: model.value,
  onChange: (value) => model.value = value,
),

选项类型 ​

dart
TimePicker(
  columnsType: const {
    TimePickerColumn.hour,
    TimePickerColumn.minute
  },
  value: model.value,
  onChange: (value) => model.value = value,
),

时间范围 ​

dart
TimePicker(
  columnsType: const {
    TimePickerColumn.hour,
    TimePickerColumn.minute
  },
  minHour: 10,
  maxHour: 20,
  minMinute: 30,
  maxMinute: 40,
  value: model.value,
  onChange: (value) => model.value = value,
),

格式化选项 ​

dart
TimePicker(
  columnsType: const {
    TimePickerColumn.hour,
    TimePickerColumn.minute
  },
  formatter: {
    TimePickerColumn.hour: (option) =>
        option..name = "${option.value}时",
    TimePickerColumn.minute: (option) =>
        option..name = "${option.value}分",
    TimePickerColumn.second: (option) =>
        option..name = "${option.value}秒",
  },
  value: model.value,
  onChange: (value) => model.value = value,
),

过滤选项 ​

dart
TimePicker(
  columnsType: const {
    TimePickerColumn.hour,
    TimePickerColumn.minute
  },
  filter: {
    TimePickerColumn.minute: (options) =>
        List.of(options.where((m) => m.value % 10 == 0)),
  },
  value: model.value,
  onChange: (value) => model.value = value,
),

API ​

Props类型描述
columnsTypeSet<hour | minute | second>时间列
valueList<int>当前值
onChangeList<int>值变化触发
minHourint最小小时
maxHourint最大小时
minMinuteint最小分钟
maxMinuteint最大分钟
minSecondint最小秒
maxSecondint最大秒
minHourMap<hour | minute | second, NamedValue Function(NamedValue option)选项格式化
filterMap<hour | minute | second, List<NamedValue> Function(List<NamedValue>)过滤选项
titleWidget | String面板标题
confirmTextString确认文本
cancelTextString取消文本
onConfirmFunction(List<int>)确认触发
onCancelFunction(List<int>)取消触发