跳到主要内容

徽章

一个材料设计的“徽章”。

徽章用于显示通知、计数或其子控件的状态信息，通常是导航栏或导航轨道目的地的一部分图标或按钮的图标。

这些信息以文本的形式显示在徽章的标签上。如果没有提供文本，则徽章显示为一个填充的圆形，直径为small_size。

如果提供了文本，标签将是一个StadiumBorder形状的徽章，高度等于large_size。

示例​

在线示例

装饰导航栏图标的徽章​

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.Alignment类的一个实例。

对齐方式类似于容器的内容使用其alignment定位，只是徽章对齐方式解析为标签是一个large_size的正方形，并添加offset到结果中。

此值仅在提供文本属性时使用。

例如：

badge.alignment = ft.alignment.top_left

bgcolor​

标签的背景颜色。

content​

徽章包含的子控件，通常是导航栏或导航轨道目的地的一部分图标。

label_visible​

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

large_size​

如果提供文本，则为徽章标签的高度。

默认值为16。如果覆盖默认值，则可能需要同时覆盖padding和alignment。

offset​

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

此值仅在提供文本时使用。

参见控件offset了解可能的值。

padding​

添加到徽章标签的内边距。

此值仅在提供文本时使用。默认左右各为4像素。

内边距值是padding.Padding类的一个实例。

small_size​

如果没有提供文本，则为徽章标签的直径。

默认值为6。

text​

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

如果没有提供文本，徽章将显示为一个填充的圆形，直径为small_size。

如果提供了文本，标签将是一个StadiumBorder形状的徽章，高度等于large_size。

text_color​

标签中显示的文本的颜色。此颜色覆盖标签的text_style颜色。

text_style​

标签中文本使用的文本样式。该值是TextStyle类的一个实例。