Python Slint 实现圆形进度条源码分享一、效果展示二、源码分享1、工程结构2、main.py3、main.slint三、实现原理三、实现原理1、圆弧绘制原理2、进度与角度的映射3、满圆与边界处理4、动画与自动播放5、双向绑定与交互6、总结一、效果展示二、源码分享1、工程结构2、main.py# -*- coding: utf-8 -*-importslint uislint.load_file(main.slint)windowui.MainWindow()window.run()3、main.slint//圆形进度条-使用 Path 绘制圆弧import{Slider,Button,CheckBox}fromstd-widgets.slint;export component MainWindow inherits Window{title:圆形进度条;preferred-width:400px;preferred-height:500px;background:#1a1a2e;propertyfloatprogress:0.35;propertyboolauto-play:false;animate progress{duration:200ms;easing:ease-in-out;}Timer{interval:30ms;running:auto-play;triggered{root.progress(sin((root.progress*360.03.0)*1deg)1.0)*0.5;}}VerticalLayout{padding:20px;spacing:16px;//标题 Text{text:Circular Progress;color:#94a3b8;font-size:15px;horizontal-alignment:center;height:28px;}//── 圆形进度条区域 ── Rectangle{vertical-stretch:1;//计算圆的尺寸长度类型propertylengthdiameter:self.widthself.height ? self.width*0.75:self.height*0.75;propertylengthring-x:(self.width-self.diameter)*0.5;propertylengthring-y:(self.height-self.diameter)*0.5;//── 背景轨道圆环 ── Path{x:parent.ring-x;y:parent.ring-y;width:parent.diameter;height:parent.diameter;//viewbox 用浮点数坐标系统 viewbox-width:200;viewbox-height:200;stroke-width:12px;stroke:#2a2a4a;fill:transparent;//完整的圆两段半圆弧坐标是浮点数 MoveTo{x:100;y:0;}ArcTo{x:100;y:200;radius-x:100;radius-y:100;large-arc:false;sweep:true;}ArcTo{x:100;y:0;radius-x:100;radius-y:100;large-arc:false;sweep:true;}}//── 进度圆弧 ── Path{x:parent.ring-x;y:parent.ring-y;width:parent.diameter;height:parent.diameter;viewbox-width:200;viewbox-height:200;stroke-width:12px;stroke:#06b6d4;fill:transparent;//进度为1时特殊处理用完整圆弧代替 visible:progress0.005progress0.995;//起点正上方(100,0)MoveTo{x:100;y:0;}//终点根据进度计算//angleprogress*360-90(从顶部开始)ArcTo{x:100100*cos((progress*360.0-90.0)*1deg);y:100100*sin((progress*360.0-90.0)*1deg);radius-x:100;radius-y:100;large-arc:progress0.5;sweep:true;}}//── 满圆覆盖 ── Path{x:parent.ring-x;y:parent.ring-y;width:parent.diameter;height:parent.diameter;viewbox-width:200;viewbox-height:200;stroke-width:12px;stroke:#06b6d4;fill:transparent;visible:progress0.995;MoveTo{x:100;y:0;}ArcTo{x:100;y:200;radius-x:100;radius-y:100;large-arc:false;sweep:true;}ArcTo{x:100;y:0;radius-x:100;radius-y:100;large-arc:false;sweep:true;}}//── 中心百分比文字 ── Text{x:parent.ring-x;y:parent.ring-y;width:parent.diameter;height:parent.diameter;text:round(progress*100)%;font-size:parent.diameter*0.2;color:#e2e8f0;horizontal-alignment:center;vertical-alignment:center;}}//── 控制区域 ── VerticalLayout{height:130px;spacing:10px;//滑块 HorizontalLayout{spacing:10px;Text{text:进度;color:#64748b;font-size:12px;vertical-alignment:center;preferred-width:36px;}Slider{minimum:0.0;maximum:100.0;valueslider-val;}propertyfloatslider-val:root.progress*100.0;Text{text:round(root.progress*100)%;color:#06b6d4;font-size:15px;font-weight:700;vertical-alignment:center;preferred-width:48px;horizontal-alignment:right;}}//按钮行 HorizontalLayout{spacing:8px;alignment:center;Button{text:0%;clicked{root.progress0.0;}}Button{text:25%;clicked{root.progress0.25;}}Button{text:50%;clicked{root.progress0.50;}}Button{text:75%;clicked{root.progress0.75;}}Button{text:100%;clicked{root.progress1.0;}}}//自动播放 HorizontalLayout{alignment:center;CheckBox{text:自动演示;checkedroot.auto-play;}}}}}三、实现原理三、实现原理本项目的核心是使用 Slint 的Path元素绘制圆弧并结合ArcTo命令实现圆形进度条。整体原理可以拆解为以下几个关键点1、圆弧绘制原理在 Slint 中Path元素支持通过MoveTo、LineTo、ArcTo等命令绘制矢量图形。本项目的进度条正是利用ArcTo命令绘制圆弧来实现的。ArcTo命令的核心参数如下x/y圆弧的终点坐标radius-x/radius-y圆弧在 x、y 方向上的半径large-arc是否绘制大弧大于 180° 的弧sweep绘制方向顺时针或逆时针。以本项目的进度圆弧为例起点固定在正上方(100, 0)终点坐标根据进度值动态计算ArcTo { x: 100 100 * cos((progress * 360.0 - 90.0) * 1deg); y: 100 100 * sin((progress * 360.0 - 90.0) * 1deg); radius-x: 100; radius-y: 100; large-arc: progress 0.5; sweep: true; }这里的关键在于角度换算进度值progress的取值范围是0.0 ~ 1.0乘以360.0后得到对应的角度再减去90.0是因为起点在正上方12 点钟方向需要将角度偏移到以顶部为起点的坐标系中。最终通过三角函数cos/sin计算出终点坐标。2、进度与角度的映射进度值progress与圆弧角度之间是线性映射关系progress 0.0时角度为-90°终点与起点重合圆弧长度为 0progress 0.5时角度为90°绘制半圆progress 1.0时角度为270°绘制完整圆。large-arc参数用于判断是否绘制大于 180° 的弧当progress 0.5时圆弧超过半圆需要设置large-arc: true否则 Slint 会绘制较短的那段弧。3、满圆与边界处理由于ArcTo在终点与起点重合时无法绘制完整圆圆弧长度为 0因此代码中做了特殊处理当progress在0.005 ~ 0.995之间时使用动态计算的进度圆弧当progress 0.995时隐藏进度圆弧改用两段半圆弧拼接的完整圆环与背景轨道相同的绘制方式当progress 0.005时进度圆弧不可见只显示背景轨道。// 进度为 1 时特殊处理用完整圆弧代替 visible: progress 0.005 progress 0.995;4、动画与自动播放进度条的动画通过 Slint 的animate关键字实现animate progress { duration: 200ms; easing: ease-in-out; }当progress属性发生变化时Slint 会在 200ms 内以缓动曲线平滑过渡而不是瞬间跳变。自动播放功能则借助Timer组件实现每 30ms 触发一次通过正弦函数生成平滑波动的进度值Timer { interval: 30ms; running: auto-play; triggered { root.progress (sin((root.progress * 360.0 3.0) * 1deg) 1.0) * 0.5; } }这里利用sin函数将进度值映射到0.0 ~ 1.0之间实现来回摆动的动画效果。5、双向绑定与交互控制区域的滑块与进度值通过双向绑定关联property float slider-val: root.progress * 100.0; Slider { minimum: 0.0; maximum: 100.0; value slider-val; }滑块的值0 ~ 100与进度百分比0% ~ 100%一一对应拖动滑块即可实时改变进度条的圆弧长度。按钮则直接设置progress的固定值实现快捷跳转。6、总结整个实现的核心可以概括为用PathArcTo绘制圆弧通过三角函数计算终点坐标用large-arc区分半圆前后的绘制逻辑用visible属性处理满圆边界情况用animate实现平滑过渡用Timer实现自动播放用双向绑定实现滑块与进度条的联动交互。这种基于矢量路径的绘制方式相比逐帧贴图或 Canvas 绘制代码更简洁、性能更高且天然支持缩放不失真。