19
社区成员




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
等属性,确保波浪在不同进度下都能正确显示在圆形进度条内。这个示例展示了如何结合 Flet 的组件和动画功能,创建一个具有视觉吸引力的动态进度条。