使用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 的组件和动画功能,创建一个具有视觉吸引力的动态进度条。

...全文
214 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
### 应用场景介绍 **Flet实现PyDracula风格UI界面自定义模板** 是一个基于 Flet 框架的 Python 应用程序,旨在提供一个现代化、美观且功能丰富的用户界面。该模板主要适用于以下几种应用场景: - **企业级应用**:适用于企业内部管理系统、数据分析平台等,提供一致且专业的用户界面。 - **个人项目**:适合开发者和个人用户快速搭建个人网站、工具应用等。 - **教育平台**:适用于在线教育平台、学习管理系统等,提供清晰易用的界面设计。 ### 特色说明 1. **PyDracula 风格**: - **暗黑模式**:默认采用 PyDracula 的暗黑主题,提供舒适的夜间使用体验。 - **高对比度**:颜色搭配经过精心设计,确保文字和背景之间的高对比度,提高可读性和用户体验。 - **现代感**:整体设计简洁现代,符合当前流行的 UI 设计趋势。 2. **模块化设计**: - **BasePage 抽象基类**:提供了一个基础的页面结构,方便扩展和复用。 - **多个页面**:包括主页、组件页、新建页、保存页和设置页,每个页面都有独立的功能和布局。 - **灵活的主题切换**:支持暗黑模式、浅色模式和系统模式的动态切换,满足不同用户的需求。 3. **丰富的控件**: - **导航栏**:使用 `NavigationRail` 实现侧边导航栏,支持展开和收起功能,提供多种导航项。 - **卡片布局**:主页使用卡片布局展示统计数据、任务列表等信息,视觉效果良好。 - **按钮和图标**:提供多种按钮和图标控件,增强交互性和美观性。 - **进度条**:使用 `ProgressBar` 显示项目进度,直观易懂。 - **列表项**:使用 `ListTile` 显示

19

社区成员

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

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