ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Flet DatePickerEntryMode 完全指南:掌握日期选择器的四种输入模式

Flet DatePickerEntryMode 完全指南:掌握日期选择器的四种输入模式 Flet DatePickerEntryMode 完全指南掌握日期选择器的四种输入模式【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址: https://gitcode.com/gh_mirrors/fl/fletDatePickerEntryMode是 Flet 中定义日期选择器DatePicker/DateRangePicker日期录入方式的枚举类型它决定了用户在对话框中选择日期时看到的是日历网格Calendar还是可输入文本的输入框Input。通过本指南你将完整掌握该枚举的四个取值及其适用场景、如何在DatePicker与DateRangePicker中配置entry_mode、如何在运行时动态切换模式、如何通过on_entry_mode_change事件感知用户的操作以及模式切换图标的定制方法。认识 DatePickerEntryModeDatePickerEntryMode定义于 date_picker.py 中是标准 Python 的Enum类型被DatePicker与DateRangePicker两个控件共同引用。它的文档注释docstring明确说明其职责决定日期选择器对话框的日期录入方式Mode of date entry method for the date picker dialog。该枚举共包含四个取值枚举值底层字符串值行为说明CALENDARcalendar用户从日历网格中选日期可通过对话框中的模式按钮切换到INPUTINPUTinput用户通过向文本框输入文本的方式录入日期可通过对话框中的模式按钮切换到CALENDARCALENDAR_ONLYcalendarOnly用户只能从日历网格中选日期对话框不提供切换到其他模式的界面INPUT_ONLYinputOnly用户只能通过输入文本录入日期对话框不提供切换到其他模式的界面从源码结构看前两个值CALENDAR、INPUT是可互相切换的“软”模式后两个值CALENDAR_ONLY、INPUT_ONLY是锁定单一录入方式的“硬”模式。这一设计与 Flutter Material 的DatePickerEntryMode一一对应Flet 通过 Dart 侧的解析函数将其映射到 Flutter 原生实现。四种模式的适用场景CALENDAR默认最通用的模式适合大多数触屏与桌面场景用户通过直观的点选完成日期选择同时保留输入框入口方便习惯键盘输入的用户。INPUT适合日期格式对用户来说非常明确的场景例如输入出生日期减少日历翻页操作也适合移动端需要快速调出系统键盘录入的场景。CALENDAR_ONLY当业务规则强制要求用户“看着日历选”不希望出现自由文本输入导致格式错误或歧义时使用例如订票系统的出发日期选择。INPUT_ONLY当希望最大化录入效率、且日期格式有严格校验兜底时使用例如表单中的到期日字段。在代码中配置 entry_modeentry_mode是DatePicker的一个公开属性默认值为DatePickerEntryMode.CALENDAR见 date_picker.py。直接在构造时指定即可import datetime import flet as ft def main(page: ft.Page): picker ft.DatePicker( entry_modeft.DatePickerEntryMode.INPUT, # 以输入框模式打开 first_datedatetime.datetime(year2024, month1, day1), last_datedatetime.datetime(year2025, month12, day31), ) page.add( ft.Button( Pick date, iconft.Icons.CALENDAR_MONTH, on_clicklambda _: page.show_dialog(picker), ) ) ft.run(main)DateRangePicker同样接收entry_mode属性默认值同样是CALENDAR见 date_range_picker.py因此上述设置方式对范围日期选择器同样生效。运行时动态切换模式entry_mode是一个可写属性可以在对话框打开前动态修改。官方示例 showcase/main.py 展示了这一典型用法为每一种模式生成一张卡片点击按钮后先设置entry_mode再通过page.show_dialog(picker)打开选择器。import datetime import flet as ft def main(page: ft.Page): page.horizontal_alignment ft.CrossAxisAlignment.CENTER today datetime.datetime.now() picker ft.DatePicker( first_datedatetime.datetime(yeartoday.year - 1, month1, day1), last_datedatetime.datetime(yeartoday.year 1, month12, day31), ) def open_picker(entry_mode: ft.DatePickerEntryMode): picker.entry_mode entry_mode # 动态指定录入模式 picker.date_picker_mode ft.DatePickerMode.DAY page.show_dialog(picker) def showcase_card(entry_mode: ft.DatePickerEntryMode) - ft.Container: return ft.Container( width320, padding12, borderft.Border.all(1, ft.Colors.RED), border_radius10, bgcolorft.Colors.SURFACE_CONTAINER_LOW, contentft.Column( spacing8, controls[ ft.Text(entry_mode.name, weightft.FontWeight.BOLD), ft.Button( Open DatePicker, iconft.Icons.CALENDAR_MONTH, on_clicklambda _, mentry_mode: open_picker(m), ), ], ), ) page.add( ft.SafeArea( expandTrue, contentft.Column( controls[ ft.Row( wrapTrue, spacing12, expandTrue, scrollft.ScrollMode.AUTO, alignmentft.MainAxisAlignment.CENTER, controls[showcase_card(m) for m in ft.DatePickerEntryMode], ), ], ), ) ) if __name__ __main__: ft.run(main)这段代码有两个值得注意的细节通过for m in ft.DatePickerEntryMode直接遍历枚举自动生成四张展示卡片卡片标题即枚举成员名entry_mode.name便于直观对比四种模式的交互差异使用lambda _, mentry_mode: open_picker(m)以默认参数绑定当前枚举值避免闭包捕获循环变量的经典陷阱。监听模式切换事件当用户通过对话框内部的模式按钮在CALENDAR与INPUT之间手动切换时Flet 会触发on_entry_mode_change事件。该事件携带DatePickerEntryModeChangeEvent事件对象其entry_mode字段保存切换后的新模式见 date_picker.py 与 date_picker.py。import flet as ft def on_entry_mode_change(e: ft.DatePickerEntryModeChangeEvent): print(Entry mode changed to:, e.entry_mode) # 例如 DatePickerEntryMode.INPUT picker ft.DatePicker( entry_modeft.DatePickerEntryMode.CALENDAR, on_entry_mode_changeon_entry_mode_change, )在 Dart 侧事件回调实现于 date_picker.dart当 Flutter 的DatePickerDialog.onDatePickerModeChange被触发时Flet 先将新的模式名回写为控件属性updateProperties({entry_mode: mode.name})再通过triggerEvent(entry_mode_change, ...)通知 Python 端。这意味着事件发生后Python 侧picker.entry_mode的值也会同步更新你可以据此在事件处理器中读取最新模式而无需手动回写。模式切换图标定制在可切换的模式CALENDAR↔INPUT下对话框角落会出现一个模式切换图标这两个图标均可通过属性定制见 date_picker.pyswitch_to_calendar_icon当entry_mode为INPUT时显示点击后将模式切换为CALENDAR。默认值为Icons.CALENDAR_TODAY。switch_to_input_icon当entry_mode为CALENDAR时显示点击后将模式切换为INPUT。默认值为Icons.EDIT_OUTLINED。import flet as ft picker ft.DatePicker( entry_modeft.DatePickerEntryMode.CALENDAR, switch_to_calendar_iconft.Icons.CALENDAR_MONTH, # 自定义“切到日历”图标 switch_to_input_iconft.Icons.KEYBOARD_OUTLINED, # 自定义“切到输入”图标 )在 date_picker.dart 中这两个图标通过control.getIconData(...)读取随后包装为Icon传给 Flutter 的DatePickerDialog。需要说明的是当entry_mode为CALENDAR_ONLY或INPUT_ONLY时这两种模式“没有用户界面可切换到另一种模式”因此对话框不会渲染上述切换图标。与 entry_mode 联动的其他属性在实际使用时INPUT相关模式通常会与以下属性配合以获得更好的录入体验完整属性清单见 date_picker.py属性默认值作用keyboard_typeKeyboardType.DATETIME输入文本时使用的键盘类型默认针对日期时间格式优化field_hint_textNone默认显示日期格式字符串如 en_US 下的mm/dd/yyyy输入框内的提示文本field_label_textNone默认显示格式含义文本如Month, Day, Year输入框的标签文本error_format_textInvalid format输入日期格式错误时显示的错误信息error_invalid_textOut of range输入日期超出first_date/last_date范围时显示的错误信息help_textSelect date对话框头部说明文本例如为INPUT模式定制中文提示与校验文案import datetime import flet as ft picker ft.DatePicker( entry_modeft.DatePickerEntryMode.INPUT_ONLY, first_datedatetime.datetime(2024, 1, 1), last_datedatetime.datetime(2025, 12, 31), keyboard_typeft.KeyboardType.NUMBER, field_hint_textYYYY-MM-DD, field_label_text请选择日期, error_format_text日期格式不正确, error_invalid_text日期超出可选范围, )底层实现解析从 Python 属性到 Flutter 对话框DatePickerEntryMode的完整调用链清晰地展现了 Flet 的属性传递机制Python 端DatePicker.entry_mode属性接收DatePickerEntryMode枚举序列化时以其字符串值如inputOnly通过control(DatePicker)装饰器生成控件协议Dart 端解析time.dart 中的parseDatePickerEntryMode使用parseEnum将字符串解析为 Flutter 的DatePickerEntryMode供 date_picker.dart 构造DatePickerDialog时作为initialEntryMode传入双向同步用户在对话框中切换模式后Dart 端通过updateProperties把新模式回写到控件属性并触发entry_mode_change事件返回 Python 端见 date_picker.dart。小结DatePickerEntryMode是 Flet 日期选择体系中的一个轻量但关键的枚举四个取值分别对应“日历可切换”“输入可切换”“仅日历”“仅输入”四种交互策略默认CALENDAR兼顾了绝大多数场景。搭配entry_mode动态赋值、on_entry_mode_change事件、切换图标定制以及field_*/error_*系列文案属性可以在DatePicker与DateRangePicker中构建出符合业务要求的完整日期录入体验。如需动手验证可直接运行官方示例 showcase/main.py对比四种模式的交互差异。【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址: https://gitcode.com/gh_mirrors/fl/flet创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表