跳到主要内容

CircleAvatar

一个代表用户的圆形头像。

通常用于显示用户的头像图片，如果没有这样的图片，则显示用户的首字母。每个用户的首字母应始终与相同的背景颜色配对，以确保一致性。

如果 foreground_image_url 加载失败，则使用 background_image_url。如果 background_image_url 也加载失败，则使用 bgcolor。

示例​

在线示例

import flet as ft

def main(page):
    # 一个正常的带背景图像的头像
    a1 = ft.CircleAvatar(
        foreground_image_url="https://avatars.githubusercontent.com/u/5041459?s=88&v=4",
        content=ft.Text("FF"),
    )
    # 前景图像加载失败并回退到文本的头像
    a2 = ft.CircleAvatar(
        foreground_image_url="https://avatars.githubusercontent.com/u/_5041459?s=88&v=4",
        content=ft.Text("FF"),
    )
    # 带图标的头像，即反背景的图标
    a3 = ft.CircleAvatar(
        content=ft.Icon(ft.icons.ABC),
    )
    # 带图标和自定义颜色的头像
    a4 = ft.CircleAvatar(
        content=ft.Icon(ft.icons.WARNING_ROUNDED),
        color=ft.colors.YELLOW_200,
        bgcolor=ft.colors.AMBER_700,
    )
    # 带在线状态的头像
    a5 = ft.Stack(
        [
            ft.CircleAvatar(
                foreground_image_url="https://avatars.githubusercontent.com/u/5041459?s=88&v=4"
            ),
            ft.Container(
                content=ft.CircleAvatar(bgcolor=ft.colors.GREEN, radius=5),
                alignment=ft.alignment.bottom_left,
            ),
        ],
        width=40,
        height=40,
    )
    page.add(a1, a2, a3, a4, a5)


ft.app(target=main)

属性​

background_image_src​

圆形背景图像的源（本地资产文件或 URL）。更改背景图像将导致头像动画切换到新图像。通常用作 foreground_image_src 的备用图像。如果 CircleAvatar 显示用户的首字母，请使用 content。

background_image_url​

圆形背景图像的源（本地资产文件或 URL）。更改背景图像将导致头像动画切换到新图像。通常用作 foreground_image_url 的备用图像。如果 CircleAvatar 显示用户的首字母，请使用 content。

自版本 0.22.0 起已弃用（重命名），将在版本 1.0 中移除。请改用 background_image_src。

bgcolor​

用于填充圆形的颜色。更改背景颜色将导致头像动画切换到新颜色。

color​

圆形内文本的默认颜色。如果未指定 bgcolor，则默认为主文本主题颜色。

content​

通常是一个 Text 控件。如果 CircleAvatar 显示图像，请使用 background_image_url。

foreground_image_src​

圆形前景图像的源（本地资产文件或 URL）。通常用作头像图像。备用图像使用 background_image_src。

foreground_image_url​

圆形前景图像的源（本地资产文件或 URL）。通常用作头像图像。备用图像使用 background_image_url。

自版本 0.22.0 起已弃用（重命名），将在版本 1.0 中移除。请改用 foreground_image_src。

max_radius​

头像的最大尺寸，以半径（直径的一半）表示。如果指定了 maxRadius，则不得同时指定 radius。默认为“无限”。

min_radius​

头像的最小尺寸，以半径（直径的一半）表示。如果指定了 minRadius，则不得同时指定 radius。默认为零。

radius​

头像的尺寸，以半径（直径的一半）表示。如果指定了 radius，则不得同时指定 minRadius 和 maxRadius。

tooltip​

当鼠标悬停在按钮上时显示的文本。

事件​

on_image_error​

加载 background_image_url 或 foreground_image_url 时发生错误时触发。事件数据 (e.data) 是一个字符串，其值为 "background" 或 "foreground"，指示错误的来源。