跳到主要内容

底部应用栏 BottomAppBar

BottomAppBar 是一个 Material Design 风格的底部应用栏。

示例​

实时示例

BottomAppBar​

import flet as ft


def main(page: ft.Page):
    page.horizontal_alignment = page.vertical_alignment = "center"

    page.floating_action_button = ft.FloatingActionButton(icon=ft.icons.ADD)
    page.floating_action_button_location = ft.FloatingActionButtonLocation.CENTER_DOCKED

    page.appbar = ft.AppBar(
        title=ft.Text("Bottom AppBar Demo"),
        center_title=True,
        bgcolor=ft.colors.GREEN_300,
        automatically_imply_leading=False,
    )
    page.bottom_appbar = ft.BottomAppBar(
        bgcolor=ft.colors.BLUE,
        shape=ft.NotchShape.CIRCULAR,
        content=ft.Row(
            controls=[
                ft.IconButton(icon=ft.icons.MENU, icon_color=ft.colors.WHITE),
                ft.Container(expand=True),
                ft.IconButton(icon=ft.icons.SEARCH, icon_color=ft.colors.WHITE),
                ft.IconButton(icon=ft.icons.FAVORITE, icon_color=ft.colors.WHITE),
            ]
        ),
    )

    page.add(ft.Text("Body!"))


ft.app(target=main)

属性​

bgcolor​

BottomAppBar 的填充颜色。默认颜色由当前主题定义。

clip_behavior​

根据此选项，内容是否裁剪。

属性值是 ClipBehavior 枚举，支持以下值：

  • NONE
  • ANTI_ALIAS
  • ANTI_ALIAS_WITH_SAVE_LAYER
  • HARD_EDGE

默认值为 NONE。

content​

BottomAppBar 包含的子控件。

elevation​

此属性控制 BottomAppBar 下方阴影的大小。默认值为 4。

height​

BottomAppBar 的高度。在 Material 3 中，默认值为 80.0。

notch_margin​

FloatingActionButton 和 BottomAppBar 缺口之间的间距。

如果 shape 不是 None，则不会显示。

padding​

用于容器装饰（背景、边框）的空白空间。有关更多信息和可能的值，请参阅 Container.padding 属性。

默认值为 padding.symmetric(vertical=12.0, horizontal=16.0)。

shadow_color​

BottomAppBar 下方阴影的颜色。

shape​

用于浮动操作按钮的缺口形状。值为 NotchShape 枚举：

  • CIRCULAR
  • AUTO

surface_tint_color​

作为 bgcolor 之上的叠加层的颜色，用于指示高度。

如果为 None，则不会应用叠加层。否则，此颜色将与 bgcolor 组合，根据 elevation 的透明度涂抹 BottomAppBar 的背景。

默认值为 None。