19
社区成员




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. 响应式潜力:
虽然这里使用了固定尺寸,但可以轻松修改函数以接受百分比值或响应式尺寸。
总结
这个自定义圆形头像的实现展示了如何在 Flet 中创建复杂的自定义组件。它不仅解决了创建圆形图像的问题,还提供了一个灵活、可重用的解决方案,可以在整个应用程序中使用。这种方法特别适合需要在多处使用统一样式圆形头像的应用程序。