跳到主要内容

Badge 徽章

一种符合材料设计（Material Design）的“徽章”。

徽章用于显示与其控件相关的通知、计数或状态信息，通常是作为导航栏（NavigationBar）或导航轨道（NavigationRail）目的地的一部分的图标，或者是按钮的图标。

信息以徽章标签上的文本形式显示。如果未提供文本，则徽章显示为直径为小尺寸的实心圆。

如果提供了文本，则标签是一个形状为 StadiumBorder 的徽章，高度等于大尺寸。

示例​

实时示例

在导航栏上装饰图标的徽章​

import flet as ft


def main(page: ft.Page):
    page.title = "徽章示例"

    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon_content=ft.Icon(
                    ft.Icons.EXPLORE,
                    badge=ft.Badge(small_size=10),
                ),
                label="探索",
            ),
            ft.NavigationBarDestination(
                icon=ft.Icons.COMMUTE,
                label="通勤",
            ),
            ft.NavigationBarDestination(
                icon_content=ft.Icon(
                    ft.Icons.PHONE,
                    badge="10",
                )
            ),
        ]
    )
    page.add(ft.Text("主体内容！"))


ft.app(main)

属性​

alignment​

相对于徽章内容对齐标签。

该对齐方式类似于使用容器的alignment来定位容器内容的方式来定位标签，不同之处在于徽章的对齐方式是将标签视为大尺寸的正方形来解决的，并将偏移量添加到结果中。

只有在提供了文本属性时才会使用此值。

例如：

badge.alignment = ft.alignment.top_left

值的类型为Alignment。

bgcolor​

标签的背景颜色。

label_visible​

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

值的类型为bool。

large_size​

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

如果覆盖了默认值，那么可能也需要覆盖padding和alignment。

值的类型为OptionalNumber，默认值为16。

offset​

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

只有在也提供了文本时才会产生效果。

值的类型为OffsetValue。

padding​

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

只有在提供了文本时才会使用此值。默认在左右两侧添加 4 像素的内边距。

值的类型为PaddingValue。

small_size​

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

值的类型为OptionalNumber，默认值为6。

text​

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

如果未提供文本，徽章将显示为直径为小尺寸的实心圆。

如果提供了文本，则标签是一个形状为 StadiumBorder 的徽章，高度等于大尺寸。

值的类型为str。

text_color​

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

text_style​

用于标签中文本的文本样式。

值的类型为TextStyle。