syncfusion_flutter_datepicker的使用

5 阅读2分钟

**view: DateRangePickerView**控制初始显示的视图层级

SfDateRangePicker(
  view: DateRangePickerView.month, // 默认:月视图
  // 可选值:
  // - DateRangePickerView.month    (显示月份)
  // - DateRangePickerView.year     (显示年份)
  // - DateRangePickerView.decade   (显示十年)
  // - DateRangePickerView.century  (显示世纪)
)

**enableMultiView: bool**是否显示双月视图(并排显示两个月)

SfDateRangePicker(
  enableMultiView: true, // 显示两个月份
  viewSpacing: 20, // 两个视图之间的间距
)仅当 `view` 为 `month` 时生效

**viewSpacing: double**双月视图之间的间距(像素)

SfDateRangePicker(
  initialDisplayDate: DateTime(2024, 6, 15), // 默认显示2024年6月
  // 注意:这不会影响选择,只影响显示位置
)

**initialDisplayDate: DateTime**设置组件初始显示的日期。

SfDateRangePicker(
  initialDisplayDate: DateTime(2024, 6, 15), // 默认显示2024年6月
  // 注意:这不会影响选择,只影响显示位置
)

**showNavigationArrow: bool**是否显示月份导航箭头。

SfDateRangePicker(
  showNavigationArrow: true, // 显示 < 和 > 按钮
  // 如果设置为false,用户只能通过点击月份标题来切换视图
)

**allowViewNavigation: bool**是否允许视图导航。

SfDateRangePicker(
  allowViewNavigation: true, // 允许点击月份标题切换到年视图
  // 如果设置为false,用户无法切换视图层级
)

minDate: DateTime 和 **maxDate: DateTime**设置可选日期范围

SfDateRangePicker(
  minDate: DateTime(2024, 1, 1), // 最早可选2024-01-01
  maxDate: DateTime(2024, 12, 31), // 最晚可选2024-12-31
  // 超出范围的日期会被禁用
)

**enablePastDates: bool**是否允许选择过去的日期。

SfDateRangePicker(
  enablePastDates: false, // 禁用所有今天之前的日期
  // 相当于 minDate: DateTime.now()
)

**selectionMode: DateRangePickerSelectionMode**设置选择模式

SfDateRangePicker(
  selectionMode: DateRangePickerSelectionMode.single,
  // 可选值:
  // - single:    单选一个日期
  // - multiple:  多选多个日期
  // - range:     选择一个日期范围
  // - extended:  扩展范围选择(工作日选择等)
)
// 1. 单选模式
selectionMode: DateRangePickerSelectionMode.single,
initialSelectedDate: DateTime(2024, 5, 15),

// 2. 多选模式
selectionMode: DateRangePickerSelectionMode.multiple,
initialSelectedDates: [
  DateTime(2024, 5, 15),
  DateTime(2024, 5, 20),
  DateTime(2024, 5, 25),
],

// 3. 范围选择模式
selectionMode: DateRangePickerSelectionMode.range,
initialSelectedRange: PickerDateRange(
  DateTime(2024, 5, 10),
  DateTime(2024, 5, 20),
),

**showActionButtons: bool**是否显示底部的操作按钮(确定/取消)

SfDateRangePicker(
  enableSwipingSelection: true,
  // 当 selectionMode 为 range 时,可以通过滑动选择范围
)

**toggleDaySelection: bool**点击已选中的日期时是否取消选择(仅对 single 和 multiple 模式有效)

SfDateRangePicker( toggleDaySelection: true, // 如果为true,点击已选中的日期会取消选择 // 如果为false,点击已选中的日期不会有反应 )

**selectionController: DateRangePickerController**通过控制器编程控制选择

class _MyDatePickerState extends State { final DateRangePickerController _controller = DateRangePickerController();

void _selectNextMonth() { _controller.forward!(); // 切换到下个月 }

void _selectDate(DateTime date) { _controller.selectedDate = date; // 编程选择日期 }

@override Widget build(BuildContext context) { return Column( children: [ SfDateRangePicker( controller: _controller, ), ElevatedButton( onPressed: _selectNextMonth, child: Text('下个月'), ), ], ); } }

_controller.forward!()```
下个月
`_controller.backward!(),```
上个``