跳到主要内容

徽章 Badge

一个 Material Design 的 "徽章"。

徽章用于展示关于其子元素的通知、计数或状态信息，通常是导航栏（NavigationBar）或导航栏目的一部分，或者是按钮的图标。

信息以徽章标签上的文本展示。如果未提供文本，徽章将显示为一个直径为小尺寸的填充圆。

如果提供了文本，标签将以高度等于大尺寸的 StadiumBorder 形状徽章展示。

示例​

在线示例

徽章装饰导航栏图标​

import flet as ft

def main(page: ft.Page):
    page.title = "导航栏图标上的徽章"
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(
                icon_content=ft.Badge(
                    content=ft.Icon(ft.icons.EXPLORE),
                    small_size=10,
                ),
                label="探索",
            ),
            ft.NavigationDestination(icon=ft.icons.COMMUTE, label="通勤"),
            ft.NavigationDestination(
                icon_content=ft.Badge(content=ft.Icon(ft.icons.PHONE), text="10")
            ),
        ]
    )
    page.add(ft.Text("正文!"))


ft.app(target=main)

属性​

alignment​

相对于徽章内容的对齐方式。

对齐方式类似于使用 alignment 对容器的内容进行定位的方式，不过徽章的对齐方式是基于标签作为 大尺寸 正方形的结果，并且会将 offset 添加到最终的结果中。

仅当提供了 text 属性时才会使用这个值。

例如：

badge.alignment = ft.alignment.top_left

bgcolor​

标签的背景颜色。

content​

徽章内包含的子控件，通常是导航栏（NavigationBar）或导航栏目的一部分。

label_visible​

如果为 False，则不显示标签。默认情况下，label_visible 为 True。可以用它来创建只在某些条件下显示的徽章。

large_size​

提供了 text 时，徽章标签的高度。

默认值为 16。如果被改写，可能需要同时重写 padding 和 alignment。

offset​

与 alignment 结合使用，确定标签相对于内容的位置。

仅当提供了 text 时才会使用这个值。

请参考控件的 offset，了解可能的值。

padding​

在徽章标签上添加的 padding。

仅当提供了 text 时才会使用这个值。默认值为左右各 4 像素。

请参考容器的 padding，了解可能的值。

small_size​

未提供 text 时，徽章标签的直径。

默认值为 6。

text​

在徽章标签上显示的文本，通常为 1 到 4 个字符。

如果未提供文本，则徽章显示为一个直径为 small_size 的填充圆。

如果提供了 text，标签将以高度等于 large_size 的 StadiumBorder 形状徽章展示。

text_color​

标签中显示文本的颜色。该颜色优先于标签的 text_style 颜色。

text_style​

用于标签文本的文本样式。有关可能值，请参阅text_style 属性。