跳到主要内容

横幅

横幅显示一条重要且简明的信息，并为用户提供操作选项以处理（或关闭）横幅。关闭横幅需要用户进行操作。

横幅显示在屏幕顶部，位于顶部应用栏下方。它们是持久的和非模态的，允许用户随时忽略或与之交互。

要展示此控件，只需调用 page.open() 辅助方法。

示例​

实时示例

带有前置图标和操作按钮的横幅​

import flet as ft


def main(page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def close_banner(e):
        page.close(banner)
        page.add(ft.Text("Action clicked: " + e.control.text))

    action_button_style = ft.ButtonStyle(color=ft.colors.BLUE)
    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(
            value="Oops, there were some errors while trying to delete the file. What would you like me to do?",
            color=ft.colors.BLACK,
        ),
        actions=[
            ft.TextButton(text="Retry", style=action_button_style, on_click=close_banner),
            ft.TextButton(text="Ignore", style=action_button_style, on_click=close_banner),
            ft.TextButton(text="Cancel", style=action_button_style, on_click=close_banner),
        ],
    )

    page.add(ft.ElevatedButton("Show Banner", on_click=lambda e: page.open(banner)))


ft.app(main)

属性​

actions​

显示在横幅底部或末尾侧的一组操作按钮。

通常这是TextButton控件的列表。

bgcolor​

横幅表面的颜色。

content​

横幅的内容。通常是一个Text控件。

content_padding​

嵌入内容的空间量。

该值是Padding类型值。

如果操作按钮在内容下方，默认值为 padding.only(left=16.0, top=24.0, right=16.0, bottom=4.0)。

如果操作按钮在内容末尾侧，默认值为 padding.only(left=16.0, top=2.0)。

content_text_style​

用于 content 中 Text 控件的样式。值为TextStyle类型的实例。

divider_color​

分隔线的颜色。

elevation​

横幅的海拔高度。

force_actions_below​

一种强制操作无论数量多少都位于内容下方的覆盖。

如果此值为“True”，操作将被置于内容下方。如果此值为“False”，如果“actions”的长度为“1”，操作将被置于内容的尾随侧；如果长度大于“1”，操作将被置于内容下方。

默认值为“False”。

leading​

横幅的（可选）前置控件。

通常是一个Icon控件。

leading_padding​

嵌入前置控件的空间量。

该值是Padding类型值。

默认为 16 虚拟像素。

margin​

横幅周围的空间量。

该值是Margin类型值。

open​

设置为 True 以显示横幅。

shadow_color​

横幅下方阴影的颜色。

surface_tint_color​

用于指示横幅海拔高度的叠加在 bgcolor 上的颜色。

事件​

on_visible​

当横幅第一次显示或可见时触发。