使用Flet自主创新实现的圆形水波涌动进度条自定义模板

传奇开心果编程
Python领域优质创作者
2024-10-27 17:05:40

img

一、示例代码


import flet as ft

def main(page: ft.Page):
    page.title = "圆形波浪进度条"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    wave_color = ft.colors.LIGHT_BLUE

    large_wave = ft.Container(
        width=200,  # 调整为与容器相同的宽度
        height=200,  # 调整为与容器相同的高度
        bgcolor=wave_color,
        border_radius=100,  # 调整为与容器相同的半径
        offset=ft.Offset(-0.20, 0.95),  # 初始位置
        animate_offset=ft.Animation(500, "easeInOut"),
    )

    small_wave = ft.Container(
        width=3040,  # 保持增大的宽度
        height=3040,  # 保持增大的高度
        bgcolor=wave_color,
        border_radius=1520,  # 保持增大的半径
        offset=ft.Offset(0.30, 1.05),  # 初始位置
        animate_offset=ft.Animation(500, "easeInOut"),
    )

    text = ft.Text(
        "0%",
        size=30,
        weight=ft.FontWeight.BOLD,
        color=ft.colors.WHITE,
    )

    container = ft.Container(
        width=200,  # 保持不变
        height=200,  # 保持不变
        border_radius=100,  # 保持不变
        bgcolor=ft.colors.GREY_200,
        border=ft.Border(
            left=ft.BorderSide(5, wave_color),
            top=ft.BorderSide(5, wave_color),
            right=ft.BorderSide(5, wave_color),
            bottom=ft.BorderSide(5, wave_color),
        ),
        alignment=ft.alignment.center,
        clip_behavior=ft.ClipBehavior.HARD_EDGE,  # 限制波浪在圆圈内
        content=ft.Stack(
            [
                large_wave,
                small_wave,
                ft.Container(
                    content=text,
                    alignment=ft.alignment.center
                ),
            ]
        ),
    )

    def update_wave(value):
        # 更新波浪位置
        x_offset_adjustment = 0.2 * (value / 100)  # 100%时右移200个单位
        y_offset_adjustment = 0.050 * (value / 100)  # 100%时下移5.0个单位
        large_wave.offset = ft.Offset(-0.20 + x_offset_adjustment, 0.95 - value / 100 + y_offset_adjustment)
        small_wave.offset = ft.Offset(0.30 + x_offset_adjustment, 1.05 - value / 100 * 1.2 + y_offset_adjustment)
        text.value = f"{int(value)}%"
        page.update()

    slider = ft.Slider(
        min=0,
        max=100,
        value=0,
        on_change=lambda e: update_wave(e.control.value),
    )

    page.add(container, slider)

ft.app(target=main)

二、特色说明

该示例展示了如何使用 Flet 库创建一个带有动态波浪效果的圆形进度条。以下是该示例的一些特色说明:

  1. 动态波浪效果

    • 使用两个 ft.Container 组件来模拟波浪效果,分别为 large_wavesmall_wave
    • 通过调整 offset 属性来实现波浪的移动效果,animate_offset 属性用于平滑动画。
  2. 进度条更新

    • 使用 ft.Slider 组件来控制进度条的值。
    • update_wave 函数根据滑块的值动态更新波浪的位置和文本显示的百分比。
  3. 自定义样式

    • 进度条的背景颜色、边框颜色和波浪颜色均可自定义。
    • 使用 ft.Borderft.BorderSide 来设置进度条的边框样式。
  4. 动画效果

    • ft.Animation 用于控制波浪移动的动画效果,设置了动画的持续时间和缓动函数。
  5. 布局和对齐

    • 使用 ft.Stack 组件将波浪和文本叠加在一起,实现层叠效果。
    • ft.Containeralignment 属性用于控制内容的对齐方式。
  6. 响应式设计

    • 通过调整 offsetborder_radius 等属性,确保波浪在不同进度下都能正确显示在圆形进度条内。

这个示例展示了如何结合 Flet 的组件和动画功能,创建一个具有视觉吸引力的动态进度条。

...全文
224 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
### 应用场景介绍 该代码示例使用了 Flet 框架来创建一个带有圆形头像和自适应徽章全局字体设置的用户界面。具体应用场景可以是社交平台、即时通讯工具、用户管理系统等需要展示用户头像和状态的地方。通过这个模板,开发者可以快速实现一个美观且功能丰富的用户头像显示组件。 ### 特色说明 1. **全局字体设置**: - 使用 `ft.Theme(font_family="仿宋")` 设置了页面的全局字体为“仿宋”,确保整个页面的文字风格一致。 2. **圆形头像**: - 通过 `ft.Container` 和 `ft.Image` 组件创建了一个圆形头像。 - 设置了 `border_radius=50` 来实现圆形效果,并使用 `fit=ft.ImageFit.COVER` 确保图像完全覆盖容器。 3. **自适应徽章**: - 徽章是一个小型的矩形容器,放置在头像的右上角,用于显示用户的在线状态或其他信息。 - 使用 `ft.Stack` 将头像和徽章组合在一起,通过 `offset` 参数调整徽章的位置,使其精确地定位在头像的指定位置。 - 徽章的大小和内容可以根据实际需求进行调整,例如显示不同的状态文本(如“离线”、“忙碌”等)。 4. **居中对齐**: - 页面的垂直和水平对齐方式都设置为中心 (`page.vertical_alignment = ft.MainAxisAlignment.CENTER` 和 `page.horizontal_alignment = ft.CrossAxisAlignment.CENTER`),确保头像和徽章在页面中央显示。 5. **简洁易扩展**: - 代码结构清晰,易于扩展和修改。例如,可以轻松添加更多的样式或交互功能,如点击头像弹出用户详情等。
Flet 使用本地字体自定义模板介绍 一、自定义字体支持 支持加载和使用自定义字体文件。模板示例演示了使用本地自定义字体的方法和效果。通过本地自定义字体应用,增强应用程序的个性化和品牌一致性,提升视觉效果。 二、特色和应用场景以及带来的好处 1. 品牌一致性 通过使用自定义字体,企业可以确保所有应用程序和网站使用统一的品牌字体,从而提升品牌形象和专业度。例如,一家公司可以选择一种独特的字体,并将其应用于所有产品中,以保持一致的品牌识别度。 2. 用户体验优化 选择合适的字体可以显著提升界面的可读性和美观性。Flet 允许开发者轻松加载和使用自定义字体,从而改善用户体验。例如,在一个教育应用中,使用易读性高的字体可以提高学生的学习效率。 3. 多语言支持 某些自定义字体支持多种语言字符集,这对于国际化应用尤为重要。通过使用这些字体,开发者可以确保应用在全球范围内的一致性和可用性。例如,在一个全球性的电子商务平台上,使用支持多语言的字体可以提升用户体验。 4. 个性化应用 个人开发者和业余爱好者可以通过使用独特的字体风格来增加项目的个性化元素。这不仅可以让应用更具吸引力,还能展示开发者的独特品味。例如,在一个个人博客或小型项目中,使用一种特殊的字体可以使其脱颖而出。 5. 教育和培训工具 在教育和培训工具中,使用特定字体可以提升学习材料的可读性和吸引力。例如,在一个在线课程平台上,使用易读性高的字体可以提高学生的注意力和学习效率。

19

社区成员

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

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