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

优质创作者: python技术领域

2024-10-27 17:05:40

一、示例代码


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 库创建一个带有动态波浪效果的圆形进度条。以下是该示例的一些特色说明：

动态波浪效果：
- 使用两个 ft.Container 组件来模拟波浪效果，分别为 large_wave 和 small_wave。
- 通过调整 offset 属性来实现波浪的移动效果，animate_offset 属性用于平滑动画。
进度条更新：
- 使用 ft.Slider 组件来控制进度条的值。
- update_wave 函数根据滑块的值动态更新波浪的位置和文本显示的百分比。
自定义样式：
- 进度条的背景颜色、边框颜色和波浪颜色均可自定义。
- 使用 ft.Border 和 ft.BorderSide 来设置进度条的边框样式。
动画效果：
- ft.Animation 用于控制波浪移动的动画效果，设置了动画的持续时间和缓动函数。
布局和对齐：
- 使用 ft.Stack 组件将波浪和文本叠加在一起，实现层叠效果。
- ft.Container 的 alignment 属性用于控制内容的对齐方式。
响应式设计：
- 通过调整 offset 和 border_radius 等属性，确保波浪在不同进度下都能正确显示在圆形进度条内。