Flet 动态更新 Banner 文本方法分享

本文旨在解决 Flet 应用开发中，动态更新 Banner 组件文本显示的问题。 在 Flet 应用中，Banner 组件常用于显示警告、提示或状态信息。 静态的 Banner 组件无法满足应用中需要根据不同条件显示不同信息的场景。 本文将探讨两种解决方案，并提供相应的代码示例。

方法一：直接在条件语句中创建 Banner 对象

最初的代码尝试定义一个全局变量 status_banner，然后在不同的条件语句中修改其值，最后在 Banner 组件中使用该变量。 然而，这种方法无法正确更新 Banner 组件的文本，因为 Flet 的更新机制不会自动检测到全局变量的变化。

一个可行的解决方案是在每个需要显示不同信息的条件语句中，直接创建并显示 Banner 组件。 这样可以确保 Banner 组件显示的是最新的信息。

import flet as ft

def main(page: ft.page):

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

    def show_banner(e):
        page.banner.open = True
        page.update()

    def merge_pdfs(e: ft.FilePickerResultEvent):
        # get file name and password from the corresponding textfields
        merge_file_name = textField_name.value
        file_password = textField_password1.value

        # show warning when no filename is provided
        if not merge_file_name or merge_file_name == ' ':
            # banner for when there is error in file name or file selection
            page.banner = ft.Banner(
                bgcolor=ft.colors.RED_500,
                leading=ft.Icon(ft.icons.WARNING_AMBER_ROUNDED,
                                color=ft.colors.AMBER, size=40),
                content=ft.Text("Please check the file name entered."),
                actions=[ft.TextButton("Dismiss", on_click=close_banner)])
            show_banner(e)
            return None

        # show warning if less than 2 files selected
        if not e.files or len(e.files) < 2:
            # banner for when there is error in file name or file selection
            page.banner = ft.Banner(
                bgcolor=ft.colors.RED_500,
                leading=ft.Icon(ft.icons.WARNING_AMBER_ROUNDED,
                                color=ft.colors.AMBER, size=40),
                content=ft.Text("Please select at least 2 files."),
                actions=[ft.TextButton("Dismiss", on_click=close_banner)])
            show_banner(e)
            return None

    pick_files_dialog = ft.FilePicker(on_result=merge_pdfs)
    page.overlay.append(pick_files_dialog)

    textField_name = ft.TextField(label="File Name")
    textField_password1 = ft.TextField(label="Password")

    page.add(
        ft.ElevatedButton(
            "Pick files",
            icon=ft.icons.UPLOAD_FILE,
            on_click=lambda _: pick_files_dialog.pick_files(allow_multiple=True),
        ),
        textField_name,
        textField_password1
    )

if __name__ == "__main__":
    ft.app(target=main)

注意事项：

• 这种方法在代码中重复创建 Banner 对象，可能会导致代码冗余。
• 如果 Banner 组件的样式或行为需要修改，需要在多个地方进行修改，维护成本较高。

方法二：使用 UserControl 类封装 Banner 组件

为了解决代码冗余和维护性问题，可以使用 Flet 的 UserControl 类来封装 Banner 组件。 这样可以将 Banner 组件的创建和更新逻辑封装在一个类中，并在需要时创建该类的实例。

import flet as ft

class Banner_Warning(ft.UserControl):
    def __init__(self, text_banner: str) -> None:
        super().__init__()
        self.text_banner = text_banner

    def close_banner(self, e: ft.ControlEvent) -> None:
        self.banner.open = False
        self.update()

    def build(self) -> ft.Banner:
        self.banner = ft.Banner(
            bgcolor=ft.colors.RED_500,
            leading=ft.Icon(ft.icons.WARNING_AMBER_ROUNDED,
                            color=ft.colors.AMBER, size=40),
            content=ft.Text(self.text_banner),
            actions=[ft.TextButton("Dismiss", on_click=self.close_banner)])
        self.banner.open = True
        return self.banner

def main(page: ft.page):

    def merge_pdfs(e: ft.FilePickerResultEvent):
        # get file name and password from the corresponding textfields
        merge_file_name = textField_name.value
        file_password = textField_password1.value

        # show warning when no filename is provided
        if not merge_file_name or merge_file_name == ' ':
            # banner for when there is error in file name or file selection
            page.add(Banner_Warning("Please check the file name entered."))
            return None

        # show warning if less than 2 files selected
        if not e.files or len(e.files) < 2:
            # banner for when there is error in file name or file selection
            page.add(Banner_Warning("Please select at least 2 files."))
            return None

    pick_files_dialog = ft.FilePicker(on_result=merge_pdfs)
    page.overlay.append(pick_files_dialog)

    textField_name = ft.TextField(label="File Name")
    textField_password1 = ft.TextField(label="Password")

    page.add(
        ft.ElevatedButton(
            "Pick files",
            icon=ft.icons.UPLOAD_FILE,
            on_click=lambda _: pick_files_dialog.pick_files(allow_multiple=True),
        ),
        textField_name,
        textField_password1
    )

if __name__ == "__main__":
    ft.app(target=main)

代码解释：

• Banner_Warning 类继承自 ft.UserControl，用于封装 Banner 组件的逻辑。
• __init__ 方法接收一个 text_banner 参数，用于设置 Banner 组件的文本内容。
• close_banner 方法用于关闭 Banner 组件。
• build 方法用于创建 Banner 组件，并将其文本内容设置为 self.text_banner。
• 在 merge_pdfs 函数中，通过创建 Banner_Warning 类的实例，并将其添加到页面中来显示 Banner 组件。

优点：

• 代码复用性高，减少了代码冗余。
• 易于维护，修改 Banner 组件的样式或行为只需要修改 Banner_Warning 类即可。
• 代码结构清晰，可读性强。

总结：

本文介绍了两种在使用 Flet 构建 Python 应用时，动态更新 Banner 组件文本内容的方法。 第一种方法直接在条件语句中创建 Banner 对象，简单直接，但代码冗余。 第二种方法使用 UserControl 类封装 Banner 组件，代码复用性高，易于维护，更适合大型项目。 选择哪种方法取决于具体的应用场景和需求。