ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

Flet DismissibleDismissEvent 详解:滑动删除事件的载荷结构与确认/完成回调实战

Flet DismissibleDismissEvent 详解:滑动删除事件的载荷结构与确认/完成回调实战 前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载本篇技术指南围绕 FletPython 全栈 UI 框架中Dismissible控件的事件类型DismissibleDismissEvent展开说明该事件载荷在on_confirm_dismiss与on_dismiss两个回调中的真实结构与用法并结合仓库源码与官方示例给出可复制的滑动删除列表、二次确认删除等实战方案。读完本文你将掌握 Dismissible 事件体系DismissEvent / UpdateEvent的字段含义、DismissDirection的七个枚举取值以及confirm_dismiss()确认/否决机制的完整调用链。一、事件类型定位它是谁、由谁使用DismissibleDismissEvent是 Flet 中Dismissible控件的事件载荷event payload在官方文档站点中由website/docs/types/dismissibledismissevent.md通过ClassAll nameflet.DismissibleDismissEvent /组件动态渲染生成。它的源码定义位于 sdk/python/packages/flet/src/flet/controls/core/dismissible.py#L23-L35dataclass class DismissibleDismissEvent(Event[Dismissible]): Event payload for dismissal confirmation and completion callbacks. Used by :attr:flet.Dismissible.on_confirm_dismiss and :attr:flet.Dismissible.on_dismiss. direction: DismissDirection Direction in which the control is being (or was) dismissed. 从源码结构可以提炼出三个关键事实它是dataclass以数据类的形式承载事件载荷并继承Event[Dismissible]泛型参数表明该事件与Dismissible控件实例绑定处理器中可通过e.control拿到触发事件的Dismissible对象。它服务于两个回调Dismissible.on_confirm_dismiss待确认的滑出动作允许应用确认或否决与Dismissible.on_dismiss控件被最终移除后触发。两处处理器类型均为EventHandler[DismissibleDismissEvent]见 dismissible.py#L165-L178。它只有一个字段direction用来告知应用“控件正在/已经朝哪个方向被滑出”这是区分“左滑删除”还是“右滑操作”的唯一依据。二、唯一字段 direction值与语义direction的类型是DismissDirection枚举定义于 sdk/python/packages/flet/src/flet/controls/material/snack_bar.py#L47-L98共 7 个取值枚举值底层字符串语义DismissDirection.NONEnone禁用滑动移除手势DismissDirection.VERTICALvertical允许垂直方向滑动向上或向下均可DismissDirection.HORIZONTALhorizontal允许水平方向滑动向左或向右均可DismissDirection.END_TO_STARTendToStart沿阅读方向的“末尾 → 开头”滑动LTR 语言环境中即右滑右 → 左DismissDirection.START_TO_ENDstartToEnd沿阅读方向的“开头 → 末尾”滑动LTR 语言环境中即左滑左 → 右DismissDirection.UPup仅允许向上滑动DismissDirection.DOWNdown仅允许向下滑动注意END_TO_START/START_TO_END是**方向无关direction-agnostic**的语义化取值它们跟随阅读方向locale自动映射而UP/DOWN/HORIZONTAL/VERTICAL是物理方向取值。在事件处理器中读取e.direction时建议优先使用END_TO_START/START_TO_END这类语义化取值做分支判断以自动适配 RTL从右到左语言环境。该枚举与SnackBar的滑动关闭共用同一实现说明DismissDirection是 Flet 中“滑动方向”的通用类型。三、事件从哪来Dismissible 控件的滑动移除机制要正确使用该事件需要先了解承载它的Dismissible控件定义于 dismissible.py#L66-L77控件可以在指定的dismiss_direction方向上被拖拽或甩动其content会平滑滑出视野若设置了resize_duration滑出后还会沿垂直方向垂直于滑动方向将高度收缩至零最终触发on_dismiss。与本次事件直接相关的控件配置项dismiss_direction: DismissDirection DismissDirection.HORIZONTAL允许滑动的方向默认水平。dismiss_thresholds: dict[DismissDirection, Optional[Number]]判定“已滑出”的阈值字典键为DismissDirection值为0.0~1.0之间的小数相对控件宽度的比例示例见 dismissible.py#L114-L133ft.Dismissible( # ... dismiss_thresholds{ ft.DismissDirection.VERTICAL: 0.1, ft.DismissDirection.START_TO_END: 0.7 } )on_dismiss: Optional[EventHandler[DismissibleDismissEvent]]控件完成滑出动画与收缩后触发是移除数据的最终时机。on_confirm_dismiss: Optional[EventHandler[DismissibleDismissEvent]]控件滑出但在正式移除前触发给应用“确认或否决”的机会在该回调未通过confirm_dismiss()解决之前控件无法再次被拖动。on_update: Optional[EventHandler[DismissibleUpdateEvent]]拖拽过程中的实时回调见下文第五节。四、完整实战滑动删除列表项仓库官方示例 sdk/python/examples/controls/core/dismissible/dismissible_list_tiles/main.py 演示了DismissibleDismissEvent最典型的三种用法右滑直接删除、左滑弹出确认对话框、拖拽过程中打印更新事件import flet as ft def main(page: ft.Page): async def handle_dialog_action_click(e: ft.Event[ft.TextButton]): page.pop_dialog() await dialog.data.confirm_dismiss(e.control.data) dialog ft.AlertDialog( modalTrue, titleft.Text(Please confirm), contentft.Text(Do you really want to delete this item?), actions[ ft.TextButton(Yes, dataTrue, on_clickhandle_dialog_action_click), ft.TextButton(No, dataFalse, on_clickhandle_dialog_action_click), ], actions_alignmentft.MainAxisAlignment.CENTER, ) async def handle_confirm_dismiss(e: ft.DismissibleDismissEvent): if e.direction ft.DismissDirection.END_TO_START: dialog.data e.control page.show_dialog(dialog) else: await e.control.confirm_dismiss(True) def handle_dismiss(e: ft.Event[ft.Dismissible]): e.control.parent.controls.remove(e.control) e.control.parent.update() def handle_update(e: ft.DismissibleUpdateEvent): print(e) page.add( ft.SafeArea( contentft.ListView( expandTrue, controls[ ft.Dismissible( dismiss_directionft.DismissDirection.HORIZONTAL, backgroundft.Container(bgcolorft.Colors.GREEN), secondary_backgroundft.Container(bgcolorft.Colors.RED), on_dismisshandle_dismiss, on_updatehandle_update, on_confirm_dismisshandle_confirm_dismiss, dismiss_thresholds{ ft.DismissDirection.END_TO_START: 0.2, ft.DismissDirection.START_TO_END: 0.2, }, contentft.ListTile(titleft.Text(fItem {i})), ) for i in range(10) ], ), ) ) if __name__ __main__: ft.run(main)该示例完整展示了事件载荷的三个消费路径读取e.direction做分支handle_confirm_dismiss中通过if e.direction ft.DismissDirection.END_TO_START判断“左滑”LTR 下为右 → 左走弹窗确认流程其余方向直接放行。通过e.control访问控件实例handle_confirm_dismiss将e.control暂存到对话框的data字段等待用户点击“Yes/No”后再调用其confirm_dismiss()方法handle_dismiss中则通过e.control.parent定位父级列表把已删除的控件从列表数据中移除并刷新。on_dismiss完成数据清理控件在 Flutter 端完成动画后Flet 端回调handle_dismiss此时才真正从数据源ListView.controls中删除该项并update()同步 UI。confirm_dismiss确认/否决的核心方法confirm_dismiss(dismiss: bool)是Dismissible的异步方法dismissible.py#L197-L209必须由on_confirm_dismiss回调引发的确认流程来调用传入True继续滑出动画并最终移除控件随后触发on_dismiss。传入False取消滑出控件回到原始位置on_dismiss不会被触发。示例中“Yes”按钮携带dataTrue点击后执行await dialog.data.confirm_dismiss(True)“No”按钮携带dataFalse执行confirm_dismiss(False)控件回弹。data属性e.control.data在此充当事件与对话框之间的临时数据通道是 Flet 中常见的跨回调传值模式。五、与 DismissibleUpdateEvent 的区分完成事件 vs 过程事件同一个控件还有配套的过程事件DismissibleUpdateEventdismissible.py#L38-L62二者极易混淆源码字段对比一目了然事件类型触发时机字段DismissibleDismissEvent滑出完成on_dismiss或待确认on_confirm_dismissdirectionDismissibleUpdateEvent拖拽过程中实时触发on_updatedirection、progress0.0~1.0、reached、previous_reachedDismissibleUpdateEvent的progress表示相对滑动阈值的拖拽进度reached表示当前是否达到阈值previous_reached表示上一次更新事件时是否已达阈值——这三个字段适合实现“滑过阈值变红”等反馈效果。而DismissibleDismissEvent只关心最终结果字段更精简。两者已通过 sdk/python/packages/flet/src/flet/init.py 导出为flet.DismissibleDismissEvent与flet.DismissibleUpdateEvent可直接从import flet as ft命名空间引用。六、常见陷阱声明式 UI 中移除 Dismissible 必须指定 keyDismissible控件文档website/docs/controls/dismissible.md专门提醒在 Flet 组件声明式 UI内部使用Dismissible时必须为每个实例指定唯一的key。原因是用户滑出某项后该 widget 在 Flutter 端已被标记为 “dismissed” 并从 UI 移除但 Python 端重新计算 UI diff 时如果没有key作为身份标识diff 算法会按列表顺序猜测“只是元素发生了位移”从而生成“更新 0…N-1 项、删除最后一项”的更新指令。此时 Flutter 端中间那个已被移除的Dismissible无法再接收更新导致运行时错误。因此应始终基于条目 ID 或索引为每个Dismissible分配稳定且唯一的key。总结DismissibleDismissEvent是 FletDismissible控件“滑动移除”生命周期中完成/确认两个关键时刻的标准事件载荷direction字段结合DismissDirection枚举让你区分滑动方向e.control让你拿到控件实例配合confirm_dismiss(True/False)可实现“右滑直接删、左滑需确认”的交互闭环。在声明式 UI 中滑动删除条目时请务必为每个Dismissible设置稳定的key并遵循“on_confirm_dismiss做判断、on_dismiss做数据清理”的分层职责即可构建健壮且体验流畅的滑动操作界面。赞分享前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载相关推荐Flet DragTargetLeaveEvent 详解拖放目标离开事件的载荷结构与实战用法Flet DragTargetLeaveEvent 详解拖放目标离开事件的载荷结构与实战用法 flet.DragTargetLeaveEvent 是 Flet前端跨平台桌面应用移动开发Flet 拖拽结束事件 DragEndEventPython 侧完整回调载荷与源码实现剖析Flet 拖拽结束事件 DragEndEventPython 侧完整回调载荷与源码实现剖析 拖拽手势Drag/Pan是 Flutter 移动与桌面应用中最前端跨平台桌面应用移动开发Flet 多视图事件详解MultiViewRemoveEvent 事件载荷与视图移除通知机制Flet 多视图事件详解MultiViewRemoveEvent 事件载荷与视图移除通知机制 MultiViewRemoveEvent 是 Flet 多视图前端跨平台桌面应用移动开发创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进