尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

Flet 的 CupertinoDatePickerDateOrder 枚举:定制 iOS 风格日期选择器的列顺序

发布时间:2026/9/24 3:51:12

资讯中心
01
ARTICLE

Flet 的 CupertinoDatePickerDateOrder 枚举:定制 iOS 风格日期选择器的列顺序

Flet 的 CupertinoDatePickerDateOrder 枚举:定制 iOS 风格日期选择器的列顺序
前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载导读CupertinoDatePickerDateOrder是 Flet 框架中用于控制 iOS 风格日期选择器CupertinoDatePicker内部列排列顺序的枚举类型。本文以官方文档页 cupertinodatepickerdateorder.md 为骨架结合 cupertino_date_picker.py 的源码实现与官方 showcase 示例完整讲解该枚举的四个取值、在日期选择器中的配置方法、与date_picker_mode的相互作用以及 Python 层到 Flutter 原生层的传递机制。读完本文你将能在自己的 Flet 应用中自由定制日期选择器的列顺序如日-月-年或年-月-日并对底层实现有清晰的认知。一、什么是 CupertinoDatePickerDateOrder在 iOS 系统中日期选择器由多个滚动列spinner column组成。不同国家和地区习惯的日期书写顺序不同——美式习惯月/日/年欧式习惯日/月/年东亚则常用年/月/日。Flet 的CupertinoDatePicker是 iOS 风格日期选择器的移植控件为了让开发者能够显式控制这些列的左右排列顺序框架提供了CupertinoDatePickerDateOrder枚举。从源码定义看它是一个标准的 PythonEnum声明于 cupertino_date_picker.py并通过__init__.py中的__all__对外导出见 sdk/python/packages/flet/src/flet/init.py因此可以直接通过ft.CupertinoDatePickerDateOrder访问import flet as ft ft.CupertinoDatePickerDateOrder.DAY_MONTH_YEAR二、枚举的四个取值与完整对照表CupertinoDatePickerDateOrder一共定义四个枚举成员对应四种列排列方式每种取值的序列化字符串分别是dmy、mdy、ymd、ydm与 Flutter 原生CupertinoDatePickerDateOrder的取值一一对应枚举成员底层字符串从左到右的列顺序示例显示效果DAY_MONTH_YEARdmy日、月、年12 \| March \| 1996MONTH_DAY_YEARmdy月、日、年March \| 12 \| 1996YEAR_MONTH_DAYymd年、月、日1996 \| March \| 12YEAR_DAY_MONTHydm年、日、月1996 \| 12 \| March以上取值与示例均出自 cupertino_date_picker.py 中每个枚举成员的 docstring是官方文档定义的权威说明。需要注意的是这里的月列在显示时总是以完整英文月份名称呈现例如March这一点与CupertinoDatePicker的 DATE 模式保持一致。三、在 CupertinoDatePicker 中配置 date_order该枚举是CupertinoDatePicker控件date_order属性的取值类型。在 cupertino_date_picker.py 中该属性定义如下date_order: Optional[CupertinoDatePickerDateOrder] None The order in which the columns inside this picker are displayed. Note: The final order in which the columns are displayed is also influenced by the date_picker_mode. For example, if date_picker_mode is flet.CupertinoDatePickerMode.MONTH_YEAR both flet.CupertinoDatePickerDateOrder.DAY_MONTH_YEAR and flet.CupertinoDatePickerDateOrder.MONTH_DAY_YEAR will result in the month|year order. 关键信息默认值为None此时不显式指定顺序列顺序由日期选择器自身的本地化locale / 国际化逻辑决定仅对 DATE 模式有意义正如源码 docstring 所说该枚举determines the order of the columns insideCupertinoDatePickerin date mode决定 DATE 模式下列的排列顺序枚举值只需按最自然的方式书写例如想要日-月-年就传ft.CupertinoDatePickerDateOrder.DAY_MONTH_YEAR。最小使用示例import flet as ft from datetime import datetime def main(page: ft.Page): picker ft.CupertinoDatePicker( date_picker_modeft.CupertinoDatePickerMode.DATE, date_orderft.CupertinoDatePickerDateOrder.DAY_MONTH_YEAR, valuedatetime(2024, 3, 12, 10, 0), ) page.show_dialog( ft.CupertinoBottomSheet( contentpicker, height216, paddingft.Padding.only(top6), ) ) ft.run(main)四、官方展示示例一次预览四种排列仓库的示例目录 cupertino_date_picker_date_order/showcase/main.py 提供了一个完整的、可独立运行的 showcase它遍历枚举的所有成员为每一种列顺序生成一张卡片点击卡片上的 Open picker 按钮即可在CupertinoBottomSheet中弹出对应顺序的日期选择器。该示例的核心是函数式遍历枚举的写法值得在实际开发中复用import flet as ft from datetime import datetime def showcase_card(date_order: ft.CupertinoDatePickerDateOrder) - ft.Container: def open_picker(_): picker ft.CupertinoDatePicker( date_picker_modeft.CupertinoDatePickerMode.DATE, date_orderdate_order, valuedatetime(2024, 3, 12, 10, 0), ) page.show_dialog( ft.CupertinoBottomSheet( contentpicker, height216, paddingft.Padding.only(top6), ) ) 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(date_order.name, weightft.FontWeight.BOLD), ft.Button( Open picker, iconft.CupertinoIcons.CALENDAR, on_clickopen_picker, ), ], ), ) page.add( ft.SafeArea( expandTrue, contentft.Column( controls[ ft.Text(Open each variant in CupertinoBottomSheet.), ft.Row( wrapTrue, spacing12, expandTrue, scrollft.ScrollMode.AUTO, alignmentft.MainAxisAlignment.CENTER, controls[ showcase_card(date_order) for date_order in ft.CupertinoDatePickerDateOrder ], ), ], ), ) )几个值得注意的细节遍历枚举for date_order in ft.CupertinoDatePickerDateOrder直接遍历枚举类即可获得全部四个成员date_order.name输出成员名如DAY_MONTH_YEAR作为卡片标题正确的承载容器示例使用page.show_dialogCupertinoBottomSheet弹出选择器并设置height216配合item_extent默认值32.0即每列条目高度为 32 逻辑像素这正是 iOS 日期选择器典型的交互形式初始值valuedatetime(2024, 3, 12, 10, 0)明确指定了初始日期便于观察不同列顺序下的展示差异。运行该示例的方式与普通 Flet 应用一致python main.py五、date_order 与 date_picker_mode 的相互作用date_order并非在所有模式下都生效最终呈现的列顺序同时受date_picker_mode影响。CupertinoDatePickerMode同样定义在同文件 cupertino_date_picker.py 中共有四种模式模式底层字符串显示的列示例TIMEtime时、分、可选AM/PM4 \| 14 \| PMDATEdate月、日、年July \| 13 \| 2012DATE_AND_TIMEdateAndTime星期、月、日 时、分、可选AM/PMFri Jul 13 \| 4 \| 14 \| PMMONTH_YEARmonthYear月、年July \| 2012源码 docstring 中明确给出了一个交互规则示例cupertino_date_picker.py当date_picker_mode为MONTH_YEAR时无论传入DAY_MONTH_YEAR还是MONTH_DAY_YEAR最终都会呈现month | year顺序——因为该模式下本来就只显示月和年两列日期顺序无从谈起。同理在TIME与DATE_AND_TIME模式下时间部分的列顺序subject to internationalization受国际化影响date_order主要作用于日期部分的列。实践建议只有当你需要明确控制 DATE 模式下列的左右顺序例如为了贴合特定地区用户的阅读习惯时才需要设置date_order其余场景保持默认None让系统根据 locale 自动决定通常更稳妥。若需要整页级本地化可以配合CupertinoDatePicker的locale属性使用源码见 cupertino_date_picker.py但该 locale 必须受 Flutter 全局本地化委托支持否则会被忽略。六、从 Python 到 Flutterdate_order 的底层传递Flet 的 Python 控件最终会渲染为 Flutter 原生控件。在 Dart 侧的 cupertino_date_picker.dart 中CupertinoDatePicker的构建逻辑通过以下调用读取 Python 侧传入的date_order属性dateOrder: widget.control.getDatePickerDateOrder(date_order),也就是说Python 层的枚举成员在序列化时会转换为对应的底层字符串dmy/mdy/ymd/ydmDart 侧的getDatePickerDateOrder再将其解析为 Flutter 原生的CupertinoDatePickerDateOrder枚举并交给CupertinoDatePicker渲染。整个调用链可以概括为Python 枚举成员如 DAY_MONTH_YEAR → 序列化为字符串 dmy经协议通道下发 → Dart 端 getDatePickerDateOrder(date_order) 解析 → Flutter CupertinoDatePicker.dateOrder 渲染列顺序从源码结构看getDatePickerDateOrder是 Flet 控制协议中负责字符串 ↔ Dart 枚举映射的解析器方法其输入就是控件 JSON 属性中的date_order字段。理解这一链路有助于排查跨语言属性不生效的问题——例如传入一个枚举类之外的字符串值就可能在 Dart 端解析失败并回退到默认行为。七、小结CupertinoDatePickerDateOrder虽然只是一个仅有四个成员的轻量枚举却是定制 iOS 风格日期选择器体验的关键一环。本文要点回顾四个成员DAY_MONTH_YEAR、MONTH_DAY_YEAR、YEAR_MONTH_DAY、YEAR_DAY_MONTH分别对应dmy、mdy、ymd、ydm四种列顺序通过CupertinoDatePicker.date_order属性传入默认None时交由国际化逻辑决定最终呈现顺序受date_picker_mode约束MONTH_YEAR等模式下date_order的实际效果会收窄官方 showcase 示例 展示了遍历枚举、批量预览全部变体的标准写法可直接复制运行。若想深入了解日期选择器的其他能力如first_date、last_date、minute_interval、show_day_of_week等参数及其校验规则可继续阅读 cupertino_date_picker.py 的完整源码以及 Flet 文档中 CupertinoDatePicker 控件说明。赞分享前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载相关推荐Flet 中 CupertinoTimerPickerMode 枚举全解析iOS 风格倒计时选择器的三种显示模式Flet 中 CupertinoTimerPickerMode 枚举全解析iOS 风格倒计时选择器的三种显示模式 flet.CupertinoTimerPic前端跨平台桌面应用移动开发Flet CupertinoDatePicker 控件完全指南iOS 风格日期与时间选择器Flet CupertinoDatePicker 控件完全指南iOS 风格日期与时间选择器 CupertinoDatePicker 是 Flet 中复刻 iO前端跨平台桌面应用移动开发Flet CupertinoPicker 完全指南用 Python 构建 iOS 风格滚轮选择器Flet CupertinoPicker 完全指南用 Python 构建 iOS 风格滚轮选择器 CupertinoPicker 是 Flet 提供的一款 i前端跨平台桌面应用移动开发创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。