跳到主要内容

BottomAppBar

一种材料设计的底部应用栏。

示例​

在线示例

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。

content​

由 BottomAppBar 包含的子控件。

elevation​

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

height​

BottomAppBar 的高度。在材质设计3中默认为 80.0。

notch_margin​

FloatingActionButton 和 BottomAppBar 缺口之间的边距。

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

padding​

用于在容器装饰（背景、边框）内部刻画的空白区域。Padding 是 padding.Padding 类的一个实例。

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

shadow_color​

BottomAppBar 下方阴影的颜色。

shape​

为浮动操作按钮制作的缺口。值是 NotchShape 枚举：

  • CIRCULAR
  • AUTO

surface_tint_color​

用于作为覆盖层的颜色，以指示海拔。

如果为 None，则不会应用覆盖层。否则，此颜色将以与 elevation 相关的不透明度叠加在 bgcolor 上，并用于绘制 BottomAppBar 的背景。

默认值是 None。