使用Flet0.24实现的自定义圆形头像加载本地图片的自定义组件CustomCircleAvata示例源代码，IDE运行和调试通过

优质创作者: python技术领域

2024-10-15 11:47:10

一、示例源代码


import flet as ft

def main(page: ft.Page):
    def create_circle_avatar(src: str, size: int = 200) -> ft.Container:
        return ft.Container(
            content=ft.Image(src=src, width=size, height=size, fit=ft.ImageFit.COVER),
            width=size,
            height=size,
            border_radius=size/2,
            clip_behavior=ft.ClipBehavior.ANTI_ALIAS,
        )

    contact_us_content = ft.Container(
        content=ft.Column([
            create_circle_avatar("logo.jpg"),
            ft.Text("购物清单助手桌面程序1.0", size=20, weight=ft.FontWeight.BOLD),
            ft.Text("传奇开心果基于FLet创意编程", size=16),
            ft.Text("2024年10月14日于瓜州家中完成作品", size=16),
        ],
        alignment=ft.MainAxisAlignment.CENTER,
        horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        spacing=20),
        alignment=ft.alignment.center,
        width=1200,
        height=522,
        bgcolor=ft.colors.WHITE,
        padding=20,
    )

    page.add(contact_us_content)

ft.app(target=main)

二、特色说明

这个自定义圆形头像组件的特色包括：
1. 函数封装：
使用函数 create_circle_avatar 封装了创建圆形头像的逻辑，提高了代码的可重用性。
2. 参数灵活性：
src: 接受图片源路径，可以是本地文件路径或URL。
size: 默认值为200，允许用户自定义头像大小。
3. 图片容器：
使用 ft.Container 作为最外层容器，它可以控制整个头像的大小和形状。
4. 图片加载：
使用 ft.Image 组件加载实际的图片。
设置 width 和 height 与容器大小相同，确保图片填满容器。
5. 图片填充模式：
使用 fit=ft.ImageFit.COVER 确保图片完全覆盖容器区域，可能会裁剪部分图片，但保证没有空白区域。
6. 圆形效果：
通过设置 border_radius=size/2 实现圆形效果。这是因为圆的半径等于直径的一半。
7. 防锯齿处理：
使用 clip_behavior=ft.ClipBehavior.ANTI_ALIAS 确保图像边缘平滑，减少锯齿感。
8. 尺寸一致性：
容器和图片的宽度、高度都设置为相同的 size 值，保证了圆形的完美形状。
9. 类型提示：
函数签名中的类型提示（str, int, ft.Container）增加了代码的可读性和可维护性。
10. 通用性：
这个函数可以用于创建各种大小的圆形头像，适用于不同的场景（如用户头像、logo等）。
11. 无边框设计：
默认情况下没有添加边框，创造了一个简洁的外观。如果需要，可以轻松地在 Container 中添加 border 属性。
12. 响应式潜力：
虽然这里使用了固定尺寸，但可以轻松修改函数以接受百分比值或响应式尺寸。