网站首页 > 博客文章正文

Flet 的 13 种对话框，满足开发需求，炫酷App(两次分享完，第1次)

baijin 2025-01-26 21:01:04 博客文章 26 ℃ 0 评论

对话框是一个应用App必不可少的功能，用他填写简单数据、让用户确认操作等等。Flet 提供了13中对话框，足够在实际项目中的使用，我们分2次性分享完。

一、基础对话框和模态对话框 ft.AlertDialog

一个材料设计的警告对话框。警告对话框会通知用户需要确认的情况。警告对话框有一个可选的标题和一个可选的动作列表。标题显示在内容上方，动作显示在内容下方。

关键点：on_dismiss ：关闭时的触发事件；modal=True 表示为模态模态对话框（强制在应用最顶层，操作后才可继续）。从代码中看技术点：

import flet as ft

def main(page:ft.Page):

    page.title = "01 基础对话框和模态对话框"
    page.window_width =  500
    page.window_height = 300

    dlg = ft.AlertDialog(
        title=ft.Text("哈喽，你好"), on_dismiss=lambda e: print("对话框已关闭！")
    )

    def close_dlg(e):
        dlg_modal.open = False
        e.control.page.update()

    dlg_modal = ft.AlertDialog(
        modal=True,
        title=ft.Text("请确认m"),
        content=ft.Text("您真的要删除所有这些文件吗？"),
        actions=[
            ft.TextButton("Yes", on_click=close_dlg),
            ft.TextButton("No", on_click=close_dlg),
        ],
        actions_alignment=ft.MainAxisAlignment.END,
        on_dismiss=lambda e: print("模态对话框已关闭！"),
    )

    def open_dlg(e):
        e.control.page.overlay.append(dlg)
        dlg.open = True
        e.control.page.update()

    def open_dlg_modal(e):
        e.control.page.overlay.append(dlg_modal)
        dlg_modal.open = True
        e.control.page.update()

    page.add(ft.Column(
            [
                ft.ElevatedButton("打开（普通）对话框", on_click=open_dlg),
                ft.ElevatedButton("打开【模态】对话框", on_click=open_dlg_modal),
            ]
        )
    )

ft.app(target=main)

二、横幅显示 ft.Banner

ft.Banner 横幅显示一条重要且简洁的消息，并为用户提供处理（或关闭）横幅的操作。需要用户操作才能将其关闭。横幅显示在屏幕顶部，位于顶部应用栏下方。它们是持久的和非模态的，允许用户随时忽略它们或与它们交互。

关键点：ft.Banner 在 actions 数组中定义按钮，绑定按钮的 on_click 事件进行不同的操作。代码如下：

import flet as ft

def example():

    def close_banner(e):
        banner.open = False
        e.control.page.update()

    banner = ft.Banner(
        bgcolor=ft.colors.AMBER_100,
        leading=ft.Icon(ft.icons.WARNING_AMBER_ROUNDED, color=ft.colors.AMBER, size=40),
        content=ft.Text(
            "哎呀，在尝试删除文件时遇到了一些错误。您希望我怎么做？"
        ),
        actions=[
            ft.TextButton("重试", on_click=close_banner),
            ft.TextButton("忽略", on_click=close_banner),
            ft.TextButton("取消", on_click=close_banner),
        ],
    )

    def show_banner_click(e):
        e.control.page.overlay.append(banner)
        banner.open = True
        e.control.page.update()

    return ft.ElevatedButton("显示横幅", on_click=show_banner_click)

def main(page:ft.Page):
    # 应用名称
    page.title = "02 横幅显示 Banner"
    # 窗口宽度
    page.window_width =  500
    # 窗口高度
    page.window_height = 300
    # 窗口启动居中
    page.window_center()
    
    # 调用示例函数
    page.add(
        example()
    )
# 其中程序
ft.app(target=main)

三、底部抽屉弹窗 ft.BottomSheet

ft.BottomSheet 底部抽屉弹窗（Bottom Sheet）显示一个模态 Material Design 底部抽屉弹窗。模态底部抽屉弹窗是菜单或对话框的替代方案，阻止用户与应用程序的其他部分进行交互。

关键点：类 ft.BottomSheet，事件 on_dismiss 在关闭时，did_mount 当示例被添加到页面时发生，will_unmount 当示例从页面中移除时发生。代码如下：

import flet as ft

def example():
    class Example(ft.ElevatedButton):
        def __init__(self):
            super().__init__()
            self.text = "显示底部抽屉"
            self.on_click = self.show_bs
            self.bs = ft.BottomSheet(
                ft.Container(
                    ft.Column(
                        [
                            ft.Text("这是抽屉的内容！"),
                            ft.ElevatedButton(
                                "关闭底部抽屉", on_click=self.close_bs
                            ),
                        ],
                        tight=True,
                    ),
                    padding=10,
                ),
                open=False,
                on_dismiss=self.bs_dismissed,
            )

        def bs_dismissed(self, e):
            print("已关闭!")

        def show_bs(self, e):
            self.bs.open = True
            self.bs.update()

        def close_bs(self, e):
            self.bs.open = False
            self.bs.update()

        # 当示例被添加到页面时发生（即用户从网格中选择 BottomSheet 控件时）
        def did_mount(self):
            self.page.overlay.append(self.bs)
            self.page.update()

        # 当示例从页面中移除时发生（即用户在导航栏中选择不同的控件组时）
        def will_unmount(self):
            self.page.overlay.remove(self.bs)
            self.page.update()

    bs_example = Example()

    return bs_example

def main(page:ft.Page):
    # 应用名称
    page.title = "03 底部抽屉弹窗"
    # 窗口宽度
    page.window_width =  500
    # 窗口高度
    page.window_height = 300
    # 窗口启动居中
    page.window_center()
    
    # 调用示例函数
    page.add(
        example()
    )
# 其中程序
ft.app(target=main)

四、iOS 风格的行动表单 ft.CupertinoActionSheet

关键点：类 ft.CupertinoActionSheet， page.overlay.append 添加非立即可见的控件，可见控件用 page.add()。

cancel=ft.CupertinoActionSheetAction 是单一值，表示取消的按钮并绑定 on_click 事件。actions=[ ft.CupertinoActionSheetAction(),...] 是数组，表示多个其他惭怍，分别绑定需要指定的动作 on_click 事件。代码如下：

import flet as ft

def example():

    def show_cupertino_action_sheet(e):
        e.control.page.overlay.append(cupertino_action_sheet)
        cupertino_action_sheet.open = True
        e.control.page.update()

    def close_cupertino_action_sheet(e):
        cupertino_action_sheet.open = False
        e.control.page.update()

    action_sheet = ft.CupertinoActionSheet(
        title=ft.Text("这里是标题"),
        message=ft.Text("这里是信息提示"),
        cancel=ft.CupertinoActionSheetAction(
            content=ft.Text("取消"),
            on_click=close_cupertino_action_sheet,
        ),
        actions=[
            ft.CupertinoActionSheetAction(
                content=ft.Text("默认操作"),
                is_default_action=True,
                on_click=lambda e: print("默认点击"),
            ),
            ft.CupertinoActionSheetAction(
                content=ft.Text("普通操作"),
                on_click=lambda e: print("普通操作已点击"),
            ),
            ft.CupertinoActionSheetAction(
                content=ft.Text("破坏性操作"),
                is_destructive_action=True,
                on_click=lambda e: print("破坏性操作已点击"),
            ),
        ],
    )

    cupertino_action_sheet = ft.CupertinoBottomSheet(action_sheet)

    return ft.OutlinedButton(
        "打开带有 CupertinoActionSheet 的 Cupertino 底部抽屉",
        on_click=show_cupertino_action_sheet,
    )

def main(page:ft.Page):
    # 应用名称
    page.title = "04 iOS风格的行动表单"
    # 窗口宽度
    page.window_width =  500
    # 窗口高度
    page.window_height = 300
    # 窗口启动居中
    page.window_center()
    
    # 调用示例函数
    page.add(
        example()
    )
# 其中程序
ft.app(target=main)

五、Cupertino 警告对话框 ft.CupertinoAlertDialog

一种 iOS 风格的警告对话框（类似于第一）。

关键点：类 ft.CupertinoAlertDialog 。它的动作按钮是数组 actions=[ ft.CupertinoDialogAction(), ... ]。

在 ft.CupertinoDialogAction 中设置 is_destructive_action=True 表示该操作是一个破坏性操作（Destructive Action）。这个属性用于标识按钮代表的操作可能会导致不可逆的结果，例如删除数据、取消订阅等。在 iOS 设计规范中，破坏性操作的按钮通常会以红色显示，以引起用户的注意，并提醒用户该操作可能带来的后果。这有助于用户在执行这些操作时更加谨慎。

import flet as ft

def example():
    def dismiss_dialog(e):
        cupertino_alert_dialog.open = False
        e.control.page.update()

    cupertino_alert_dialog = ft.CupertinoAlertDialog(
        title=ft.Text("Cupertino 警告对话框"),
        content=ft.Text("您想要删除这个文件吗？"),
        actions=[
            ft.CupertinoDialogAction(
                "是的", is_destructive_action=True, on_click=dismiss_dialog
            ),
            ft.CupertinoDialogAction(text="取消", on_click=dismiss_dialog),
        ],
    )

    def open_dlg(e):
        e.control.page.overlay.append(cupertino_alert_dialog)
        cupertino_alert_dialog.open = True
        e.control.page.update()

    return ft.ElevatedButton("打开 iOS 风格的警告对话框", on_click=open_dlg)

def main(page:ft.Page):
    # 应用名称
    page.title = "05 Cupertino 警告对话框（iOS风格）"
    # 窗口宽度
    page.window_width =  500
    # 窗口高度
    page.window_height = 300
    # 窗口启动居中
    page.window_center()
    
    # 调用示例函数
    page.add(
        example()
    )
# 其中程序
ft.app(target=main)

六、iOS 风格的底部抽屉

iOS 风格的底部抽屉和操作表示例

这个在前面（第四）讲过了，示例代码如下：

import flet as ft

def example():

    def show_cupertino_action_sheet(e):
        e.control.page.open(cupertino_bottom_sheet)

    def close_cupertino_action_sheet(e):
        e.control.page.close(cupertino_bottom_sheet)

    action_sheet = ft.CupertinoActionSheet(
        title=ft.Text("这里是标题"),
        message=ft.Text("这里是信息提示"),
        cancel=ft.CupertinoActionSheetAction(
            content=ft.Text("取消"),
            on_click=close_cupertino_action_sheet,
        ),
        actions=[
            ft.CupertinoActionSheetAction(
                content=ft.Text("默认操作"),
                is_default_action=True,
                on_click=lambda e: print("“默认已点击"),
            ),
            ft.CupertinoActionSheetAction(
                content=ft.Text("常规操作"),
                on_click=lambda e: print("常规操作已点击"),
            ),
            ft.CupertinoActionSheetAction(
                content=ft.Text("破坏性操作"),
                is_destructive_action=True,
                on_click=lambda e: print("破坏性操作已点击"),
            ),
        ],
    )

    cupertino_bottom_sheet = ft.CupertinoBottomSheet(action_sheet)

    return ft.OutlinedButton(
        "打开包含 CupertinoActionSheet 的 CupertinoBottomSheet",
        on_click=show_cupertino_action_sheet,
    )

def main(page:ft.Page):
    # 应用名称
    page.title = "06-1 iOS 风格的底部抽屉和操作表示例"
    # 窗口宽度
    page.window_width =  500
    # 窗口高度
    page.window_height = 400
    # 窗口启动居中
    page.window_center()
    
    # 调用示例函数
    page.add(
        example()
    )
# 其中程序
ft.app(target=main)

包含 Cupertino 日期选择器的 Cupertino 底部面板示例

关键点：

返回一个 OutlinedButton 组件。OutlinedButton 是一种带有边框的按钮，文本为“显示 Cupertino 日期选择器”。当用户点击这个按钮时，会触发 on_click 事件处理程序。
ft.CupertinoBottomSheet(）创建并传递一个 CupertinoBottomSheet 组件给 open() 方法。CupertinoBottomSheet 是一个从屏幕底部滑出的面板，通常用于显示额外的信息或操作选项，在 iOS 风格的应用中非常常见。
ft.CupertinoDatePicker CupertinoDatePicker 是一个用于选择日期和时间的控件，具有典型的 iOS 外观。

示例代码如下：

import flet as ft

def example():

    return ft.OutlinedButton(
        "显示 Cupertino 日期选择器",
        on_click=lambda e: e.control.page.open(
            ft.CupertinoBottomSheet(
                ft.CupertinoDatePicker(
                    on_change=lambda e: print(e.data),
                    date_picker_mode=ft.CupertinoDatePickerMode.DATE_AND_TIME,
                ),
                height=216,
                bgcolor=ft.cupertino_colors.SYSTEM_BACKGROUND,
                padding=ft.padding.only(top=6),
            )
        ),
    )

def main(page:ft.Page):
    # 应用名称
    page.title = "06-2 包含 Cupertino 日期选择器的底部面板示例"
    # 窗口宽度
    page.window_width =  500
    # 窗口高度
    page.window_height = 400
    # 窗口启动居中
    page.window_center()
    
    # 调用示例函数
    page.add(
        example()
    )
# 其中程序
ft.app(target=main)

带有 Cupertino 选择器的 Cupertino 底部面板示例

关键点：

selected_fruit_ref = ft.Ref[ft.Text]() ， ft.Ref 是 Flet 库中用于创建控件引用的对象。通过 ft.Ref，你可以在代码的其他部分引用和操作特定的控件，而不需要直接传递控件对象。这对于需要在不同的函数或事件处理程序之间共享控件状态或更新控件属性非常有用。你需要创建一个 Ref 对象，并将其赋值给控件的一个 ref 属性。这使得你可以稍后通过这个引用访问该控件。一旦控件被添加到页面上，你可以通过 page.get_control(ref.current.id) 或者直接通过 ref.current 来访问该控件，并对其进行操作，如更新其属性或调用其方法。
创建了一个 CupertinoPicker 组件 picker，用于显示和选择水果。selected_index=3：初始选择的索引为 3，即默认选中 "Orange"。magnification=1.22：设置放大倍率，使得选中的项看起来更大。squeeze=1.2：设置挤压系数，调整未选中项的缩放比例。use_magnifier=True：启用放大镜效果，使得选中的项更加突出。on_change=handle_picker_change：设置当用户选择不同项时触发的事件处理函数。controls=[ft.Text(f) for f in fruits]：为选择器添加控件，每个控件是一个 Text，显示 fruits 列表中的水果名称。

示例代码如下：

import flet as ft

def example():

    selected_fruit_ref = ft.Ref[ft.Text]()

    fruits = [
        "Apple",
        "Mango",
        "Banana",
        "Orange",
        "Pineapple",
        "Strawberry",
    ]

    def handle_picker_change(e):
        selected_fruit_ref.current.value = fruits[int(e.data)]
        e.control.page.update()

    picker = ft.CupertinoPicker(
        selected_index=3, 
        magnification=1.22, 
        squeeze=1.2,
        use_magnifier=True, 
        on_change=handle_picker_change,
        controls=[ft.Text(f) for f in fruits],
    )

    return ft.Row(
        tight=True,
        controls=[
            ft.Text("Selected Fruit:", size=23),
            ft.TextButton(
                content=ft.Text(fruits[3], size=23, ref=selected_fruit_ref),
                style=ft.ButtonStyle(color=ft.colors.BLUE),
                on_click=lambda e: e.control.page.open(
                    ft.CupertinoBottomSheet(
                        picker,
                        height=216,
                        bgcolor=ft.cupertino_colors.SYSTEM_BACKGROUND,
                        padding=ft.padding.only(top=6),
                    )
                ),
            ),
        ],
    )

def main(page:ft.Page):
    # 应用名称
    page.title = "06-3 带有 Cupertino 选择器的 底部面板示例"
    # 窗口宽度
    page.window_width =  500
    # 窗口高度
    page.window_height = 400
    # 窗口启动居中
    page.window_center()
    
    # 调用示例函数
    page.add(
        example()
    )
# 其中程序
ft.app(target=main)

带有 Cupertino 定时器选择器的 Cupertino 底部面板示例

关键点：

timer_picker_value_ref = ft.Ref[ft.Text]()，创建了一个 Ref 对象 timer_picker_value_ref，用于引用一个 Text 控件。这个引用将在后续代码中用于更新定时器选择器的值显示。
定义了一个事件处理函数 handle_timer_picker_change，当用户在 CupertinoTimerPicker 中选择不同的时间时会触发此函数。
创建了一个 CupertinoTimerPicker 组件 timer_picker，用于选择时间。value=3600：初始设置时间为 3600 秒（即 1 小时）。second_interval=10：秒的选择间隔为 10 秒。minute_interval=1：分钟的选择间隔为 1 分钟。mode=ft.CupertinoTimerPickerMode.HOUR_MINUTE_SECONDS：设置选择器模式为小时、分钟和秒的选择。on_change=handle_timer_picker_change：设置当用户选择不同时间时触发的事件处理函数。

示例代码如下：

import flet as ft
import time

def example():

    timer_picker_value_ref = ft.Ref[ft.Text]()

    def handle_timer_picker_change(e):
        val = int(e.data)
        timer_picker_value_ref.current.value = time.strftime(
            "%H:%M:%S", time.gmtime(val)
        )
        e.control.page.update()

    timer_picker = ft.CupertinoTimerPicker(
        value=3600,
        second_interval=10,
        minute_interval=1,
        mode=ft.CupertinoTimerPickerMode.HOUR_MINUTE_SECONDS,
        on_change=handle_timer_picker_change,
    )

    return ft.Row(
        tight=True,
        controls=[
            ft.Text("TimerPicker Value:", size=23),
            ft.TextButton(
                content=ft.Text("00:01:10", size=23, ref=timer_picker_value_ref),
                style=ft.ButtonStyle(color=ft.colors.RED),
                on_click=lambda e: e.control.page.open(
                    ft.CupertinoBottomSheet(
                        timer_picker,
                        height=216,
                        bgcolor=ft.cupertino_colors.SYSTEM_BACKGROUND,
                        padding=ft.padding.only(top=6),
                    )
                ),
            ),
        ],
    )

def main(page:ft.Page):
    # 应用名称
    page.title = "06-4 带有 Cupertino 定时器选择器的 底部面板示例"
    # 窗口宽度
    page.window_width =  500
    # 窗口高度
    page.window_height = 400
    # 窗口启动居中
    page.window_center()
    
    # 调用示例函数
    page.add(
        example()
    )
# 其中程序
ft.app(target=main)

今天先分享6个，明天在分享剩余6个，几乎能涵盖安卓、苹果、web 界面设计需要了。

#python# #flet# #编程# #ios# #android#

上一篇： Android 开发常用框架（android常用的框架）
下一篇： Flet 布局控件:ft.Pagelet(弹出菜单页)

网站首页 > 博客文章正文

Flet 的 13 种对话框，满足开发需求，炫酷App(两次分享完，第1次)

iOS 风格的底部抽屉和操作表示例

包含 Cupertino 日期选择器的 Cupertino 底部面板示例

带有 Cupertino 选择器的 Cupertino 底部面板示例

带有 Cupertino 定时器选择器的 Cupertino 底部面板示例

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 博客文章 正文

Flet 的 13 种 对话框，满足开发需求，炫酷App(两次分享完，第1次)

iOS 风格的底部抽屉和操作表示例

包含 Cupertino 日期选择器的 Cupertino 底部面板示例

带有 Cupertino 选择器的 Cupertino 底部面板示例

带有 Cupertino 定时器选择器的 Cupertino 底部面板示例

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 博客文章正文

Flet 的 13 种对话框，满足开发需求，炫酷App(两次分享完，第1次)

取消回复欢迎你发表评论: