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

传奇开心果编程
Python领域优质创作者
2024-10-15 11:47:10

img

一、示例源代码


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 中创建复杂的自定义组件。它不仅解决了创建圆形图像的问题,还提供了一个灵活、可重用的解决方案,可以在整个应用程序中使用。这种方法特别适合需要在多处使用统一样式圆形头像的应用程序。

...全文
95 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
这个购物清单助手桌面程序有以下几个特色:界面设计美观:使用了绿色主题,搭配白色背景,视觉效果清新。采用了无边框设计(frameless),给人现代感。顶部有应用标题和功能图标,布局合理。标签式导航:使用了六个主要功能标签,每个标签都有图标和文字说明。标签点击后会改变颜色,提供视觉反馈。数据持久化:使用 SQLite 数据库存储购物清单项目,确保数据可以长期保存。功能丰富:可以添加、删除、标记已购买的商品。提供列表视图和表格视图两种方式展示购物清单。支持批量删除已购买的商品。响应式设计:窗口大小固定,但内部布局能够适应不同内容。使用 ListView 实现长列表的滚动效果。自定义组件:创建了自定义的标签组件,包含图标和文字。商品列表项使用自定义的容器设计,包括复选框和居中文本。模块化结构:代码组织清晰,使用类的方式封装了应用的各个功能。将不同页面的内容分别定义,便于管理和扩展。 交互设计:提供了添加、保存、删除等快捷操作按钮。标签切换时有明显的视觉反馈。关于页面:包含了一个圆形的 logo 图像和应用信息,体现了个性化设计。错误处理:虽然代码中没有明确的错误处理机制,但基本的输入验证
特色包括:自定义组件:通过定义 CustomTab 类,创建了可重复使用的选项卡组件,方便管理与展示不同的功能,使得代码结构更加清晰和模块化。用户界面设计:应用程序的界面设计考虑了布局的美观性和实用性,使用了图标和文本,增强了用户体验。顶部区域有明显的标题和功能图标,易于识别。互动性:选项卡的点击事件处理增强了应用的互动性,用户点击不同的选项卡后,可以动态更换页面内容,使得操作更加流畅和直观。还添加了点击选项卡产生墨水效果功能,自定义选项卡视觉效果更加酷炫了。颜色风格:使用丰富的颜色来区分不同的选项和内容,如 GREEN_500 和 GREEN_200,不仅美观,还能有效引导用户注意力。灵活性与可扩展性:通过使用字典 tab_contents 来存储各选项卡的内容,使得后期扩展更为简单,能够轻松添加新的功能或页面。窗体属性设置:通过设置窗口的大小、边框以及可调整性,增强了应用的适应性,提供了更加专注的用户体验(如无边框设计)。响应式布局:整体布局使用了 Flet 提供的响应式控件(如 Row 和 Column),使得元素能够在不同分辨率的窗口中合理排列。UI界面酷炫漂亮。

19

社区成员

发帖
与我相关
我的任务
社区描述
近期,感兴趣Ant Design Mobile of React、Vant of Vue 、MUI of h5App、WeUI 原生微信小程序和beeware移动应用开发,发布原创博文创建专栏发布动态
androidios微信小程序 个人社区 甘肃省·酒泉市
社区管理员
  • 传奇开心果编程
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧