flutter---进度条（1）

flutter---进度条（1）

发布时间：2026/10/11 4:47:01
flutter---进度条（1） 效果图标准蓝色进度条进度条的禁用形态只供观赏不能点击环形进度条和仪表盘进度条动画进度条这个蓝色的光圈会一直变化渐变环形进度条标准蓝色进度条的实现步骤1.设置变量double _sliderValue1 0.3;//进度条默认滑动的距离的比例2.设置进度条的通用子项// 标准蓝色进度条 Widget _buildSliderCard({ required String title, //进度条标题 required double value, //当前的进度值 0.0~1.0 required ValueChangeddouble onChanged, //值改变时的回调函数 required Color color, //进度条激活时的颜色 bool showValue false, //是否显示百分比 }) { return Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: const Color(0xFF1E293B), borderRadius: BorderRadius.circular(12), border: Border.all(color: Colors.white.withOpacity(0.1)), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ //标题 Text( title, style: const TextStyle( color: Colors.white, fontSize: 14, fontWeight: FontWeight.w500, ), ), //进度条滑动的值 if (showValue) Text( ${(value * 100).toInt()}%,//value*100转化为百分比.toInt是取证的方法 style: const TextStyle( color: Color(0xFF94A3B8), fontSize: 12, ), ), ], ), const SizedBox(height: 12), //进度条核心部分 SliderTheme( data: SliderThemeData( trackHeight: 8, //进度条轨道高度 thumbShape: const RoundSliderThumbShape( enabledThumbRadius: 10, //滑块半径 pressedElevation: 18, //按下时阴影高度 ), overlayShape: const RoundSliderOverlayShape(overlayRadius: 16), //点击涟漪效果半径 activeTrackColor: color, //激活的颜色 inactiveTrackColor: Colors.white.withOpacity(0.1),//未激活的颜色 thumbColor: Colors.white, //滑块颜色 overlayColor: color.withOpacity(0.2), //点击涟漪效果 ), child: Slider(//自动检测和计算滑动的大小和方向 value: value, //绑定当前值 onChanged: onChanged, //绑定回调函数当用户滑动时被调用 ), ), ], ), ); }3.使用这个子项_buildSliderCard( title: 标准蓝色进度条, //标题 value: _sliderValue1, //进度条当前进度值 onChanged: (newValueFromSlider) setState(() _sliderValue1 newValueFromSlider), color: const Color(0xFF2178E3), //进度条激活颜色 showValue: true, //是否显示百分比 ),完整代码执行逻辑1. 初始构建 _sliderValue1 0.3 Slider.value 0.3 显示百分比: 30% 2. 用户滑动到35%位置 Slider检测到滑动 → 调用 onChanged(0.35)newValueFromSlider 0.35 3. 执行回调 setState(() _sliderValue1 0.35) _sliderValue1 更新为 0.35 4. 触发重新构建 build() 方法再次执行 5. 传递新值给组件 _buildSliderCard(value: 0.35, ...) 6. 组件内部 - Slider.value 0.35 - 滑块移动到35%位置 - 文字更新: 35% 7. UI更新完成进度条的禁用形态SliderTheme( data: SliderThemeData( trackHeight: 8, //进度条轨道高度 thumbShape: const RoundSliderThumbShape( enabledThumbRadius: 0, //滑块半径 ), overlayShape: const RoundSliderOverlayShape(overlayRadius: 0), //去掉涟漪预留,才能让进度条占满宽度 activeTrackColor: Color(0xFF185FFF), //激活的颜色 inactiveTrackColor: Color(0xFFD8D8D8),//未激活的颜色 thumbColor: Colors.transparent, //滑块颜色 // 关键禁用态颜色 disabledActiveTrackColor: const Color(0xFF185FFF), disabledInactiveTrackColor: const Color(0xFFD8D8D8), disabledThumbColor: Colors.transparent, ), child: Slider(//自动检测和计算滑动的大小和方向 value: _sliderValue, //绑定当前值 onChanged: null, //绑定回调函数当用户滑动时被调用 ), ),环形进度条和仪表盘进度条的实现步骤1.设置变量初始进度条值double _sliderValue2 0.3;2.设置环形进度条的UI框架的通用子项Widget _buildCircularProgressCard({ required String title, //标题 required double value, //当前进度值 required ValueChangeddouble onChanged, //值变化的回调 }) { return Container( width: 150, padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: const Color(0xFF1E293B), borderRadius: BorderRadius.circular(12), border: Border.all(color: Colors.white.withOpacity(0.1)), ), child: Column( children: [ //标题 Text( title, style: const TextStyle( color: Colors.white, fontSize: 14, fontWeight: FontWeight.w500, ), ), const SizedBox(height: 12), SizedBox( height: 100, child: Stack( alignment: Alignment.center, //所有子项居中对齐所以背景圆环和进度圆环能自定对齐圆心 children: [ // 背景圆环 Container( width: 88, height: 88, decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all( color: Colors.white.withOpacity(0.1), width: 8, //边框宽度这个边框宽度做了圆形进度条的背景 ), ), ), // 进度圆环 SizedBox( width: 80, height: 80, child: CircularProgressIndicator( //绘制环形进度条 value: value, //传入值 strokeWidth: 8, //传入圆环的粗细 backgroundColor: Colors.transparent, valueColor: AlwaysStoppedAnimation( //传入进度条激活的颜色 Color(0xFF3B82F6).withOpacity(0.7), ), ), ), // 中心文本 Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( ${(value * 100).toInt()}%, style: const TextStyle( color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold, ), ), Text( 进度, style: TextStyle( color: Colors.white.withOpacity(0.6), fontSize: 10, ), ), ], ), ], ), ), const SizedBox(height: 8), //控制滑块 SizedBox( height: 20, //滑块区域高度 child: Slider( value: value, onChanged: onChanged, //值变化时回调 activeColor: const Color(0xFF3B82F6), //激活颜色 inactiveColor: Colors.white.withOpacity(0.1), //未激活颜色 ), ), ], ), ); }3.设置仪表盘进度条的UI框架Widget _buildGaugeProgressCard({ required String title, //标题 required double value, //当前进度值 required ValueChangeddouble onChanged, //值变化回调 }) { return Container( width: 150, padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: const Color(0xFF1E293B), borderRadius: BorderRadius.circular(12), border: Border.all(color: Colors.white.withOpacity(0.1)), ), child: Column( children: [ //标题 Text( title, style: const TextStyle( color: Colors.white, fontSize: 14, fontWeight: FontWeight.w500, ), ), const SizedBox(height: 12), //仪表盘绘制区域 SizedBox( height: 60, child: CustomPaint( size: const Size(100, 60), //绘制区域 painter: _GaugePainter(value: value),//自定义绘制器 ), ), const SizedBox(height: 48), //控制滑块 SizedBox( height: 20, child: Slider( value: value, onChanged: onChanged, activeColor: const Color(0xFF1D4ED8), inactiveColor: Colors.white.withOpacity(0.1), ), ), ], ), ); }4.绘制仪表盘进度条class _GaugePainter extends CustomPainter { final double value; //进度值0.0~1.0 _GaugePainter({required this.value}); //构造函数接收进度值 override void paint(Canvas canvas, Size size) { const startAngle -pi * 1.3; //起始角度 const sweepAngle pi * 1.6; //总角度范围 final center Offset(size.width / 2, size.height * 0.8); //圆心位置 const radius 40.0; //圆弧半径 // 绘制背景圆弧 final backgroundPaint Paint() //创建画笔 ..color Colors.white.withOpacity(0.1) //背景颜色 ..style PaintingStyle.stroke //描边模式 ..strokeWidth 8 //线条宽度 ..strokeCap StrokeCap.round; //线条端点圆角 canvas.drawArc( Rect.fromCircle(center: center, radius: radius), //圆弧所在矩形 startAngle, //使用起始角度 sweepAngle, //使用角度范围 false, //不填充中心只是描边 backgroundPaint, //使用画笔 ); // 绘制进度圆弧 final progressPaint Paint() //绘制画笔 ..color const Color(0xFF1D4ED8) //背景颜色 ..style PaintingStyle.stroke //描边模式 ..strokeWidth 8 //线宽 ..strokeCap StrokeCap.round; //线条端点圆角 canvas.drawArc( Rect.fromCircle(center: center, radius: radius), startAngle, sweepAngle * value, false, progressPaint, ); //绘制指针 //指针角度 起始角度 总角度 * 进度值 final pointerAngle startAngle sweepAngle * value; final pointerPaint Paint() ..color Colors.white ..style PaintingStyle.fill; //填充模式 //绘制指针圆点 canvas.drawCircle( center, //圆心位置 6, //半径 pointerPaint, ); // 绘制指针线 final pointerLinePaint Paint() ..color Colors.white ..style PaintingStyle.stroke ..strokeWidth 2; //计算指针终点位置 final pointerEnd Offset( //计算 center.dx cos(pointerAngle) * radius * 0.8, //X坐标 center.dy sin(pointerAngle) * radius * 0.8, //Y坐标 ); //绘制从圆心到终点的线条 canvas.drawLine(center, pointerEnd, pointerLinePaint); // 绘制刻度值 final textPainter TextPainter( text: TextSpan( text: ${(value * 100).toInt()}, //计算百分比 style: const TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, ), ), textDirection: TextDirection.ltr, //从左到右文本方向 ); textPainter.layout(); //布局计算文本尺寸 textPainter.paint( canvas, Offset( //位置 center.dx - textPainter.width / 2, //水平居中 center.dy - 40 //圆心上方的位置 ), ); // 绘制百分号单位 final unitPainter TextPainter( text: const TextSpan( text: %, style: TextStyle( color: Colors.white70, fontSize: 12, ), ), textDirection: TextDirection.ltr, ); unitPainter.layout(); unitPainter.paint( canvas, Offset(center.dx - unitPainter.width / 2, center.dy - 15), //位置 ); } override bool shouldRepaint(covariant CustomPainter oldDelegate) true; }5.使用这两个进度条// 环形和仪表盘进度条 Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ //环形进度条 _buildCircularProgressCard( title: 环形进度条, value: _sliderValue2, onChanged: (value) setState(() _sliderValue2 value), ), //仪表盘进度条 _buildGaugeProgressCard( title: 仪表盘进度条, value: _sliderValue2, onChanged: (value) setState(() _sliderValue2 value), ), ], ),动画进度条的实现步骤1.定义变量// 进度条值 double _sliderValue3 0.9; // 动画控制器 late AnimationController _animationController; double _animatedValue 0.0; //动画当前值2.初始化加载动画override void initState() { super.initState(); //加载动画 _animationController AnimationController( vsync: this, duration: const Duration(seconds: 2), //2秒周期往复运动 )..repeat(reverse: true); //设置动画监听器 _animationController.addListener(() { setState(() { _animatedValue _animationController.value; //更新动画值 }); }); }3.注销监听器override void dispose() { _animationController.dispose(); super.dispose(); }4.构建环形进度条和设置动画Widget _buildAnimatedCircularProgress() { return Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: const Color(0xFF1E293B), borderRadius: BorderRadius.circular(12), border: Border.all(color: Colors.white.withOpacity(0.1)), ), child: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ //标题 const Text( 呼吸灯效果, style: TextStyle( color: Colors.white, fontSize: 14, fontWeight: FontWeight.w500, ), ), //暂停/播放按钮控制动画的播放和暂停 IconButton( icon: Icon( _animationController.isAnimating ? Icons.pause : Icons.play_arrow, //判断动画是否在运行 color: const Color(0xFF3B82F6), ), onPressed: () { if (_animationController.isAnimating) { _animationController.stop(); //停止动画 } else { _animationController.repeat(reverse: true); //开始往复动画 } setState(() {}); }, ), ], ), const SizedBox(height: 12), SizedBox( height: 120, child: Stack( alignment: Alignment.center, //中心对齐 children: [ // 进度圆环 SizedBox( width: 80, height: 80, child: CircularProgressIndicator( value: _sliderValue3, //进度值 strokeWidth: 10, //圆环粗细 backgroundColor: Colors.transparent, valueColor: AlwaysStoppedAnimation( Color.lerp( //颜色插值动画 Color(0xFF1E40AF), //起始颜色 Color(0xFF60A5FA), //结束颜色 _animatedValue, //插值因子 )!, ), ), ), // 外圈动画光环 Container( width: 100 * (0.8 _animatedValue * 0.2), //动态宽度 height: 100 * (0.8 _animatedValue * 0.2), //动态高度 decoration: BoxDecoration( shape: BoxShape.circle, gradient: RadialGradient( colors: [ Color(0xFF3B82F6).withOpacity(0.1), Color(0xFF3B82F6).withOpacity(0.05), Colors.transparent, ], ), ), ), // 中心文本 Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( ${(_sliderValue3 * 100).toInt()}%, style: const TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, ), ), Text( 动态进度, style: TextStyle( color: Colors.white.withOpacity(0.6), fontSize: 12, ), ), ], ), ], ), ), //控制滑块 const SizedBox(height: 12), SliderTheme( data: SliderThemeData( trackHeight: 6, //轨道高度 thumbShape: const RoundSliderThumbShape( enabledThumbRadius: 8, //滑块半径 ), activeTrackColor: const Color(0xFF60A5FA), //激活颜色 inactiveTrackColor: Colors.white.withOpacity(0.1), //未激活颜色 ), child: Slider( value: _sliderValue3, onChanged: (value) setState(() _sliderValue3 value), ), ), ], ), ); }5.使用这个动画环形进度条_buildAnimatedCircularProgress(),渐变环形进度条实现步骤1.设置变量// 进度条值 double _sliderValue4 0.88;2.构建多色环形进度条Widget _buildMultiColorCircularProgress() { return Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: const Color(0xFF1E293B), borderRadius: BorderRadius.circular(12), border: Border.all(color: Colors.white.withOpacity(0.1)), ), child: Column( children: [ //标题 const Text( 渐变环形进度条, style: TextStyle( color: Colors.white, fontSize: 14, fontWeight: FontWeight.w500, ), ), const SizedBox(height: 12), //环形进度条 SizedBox( height: 150, child: Stack( alignment: Alignment.center, //居中对齐 children: [ // 外圈装饰 Container( width: 120, height: 120, decoration: const BoxDecoration( shape: BoxShape.circle, gradient: RadialGradient( colors: [ Color(0xFF1E293B), Color(0xFF0F172A), ], ), ), ), // 自定义绘制渐变圆环 CustomPaint( size: const Size(100, 100), painter: _GradientCircularPainter(value: _sliderValue4), ), // 中心文本 Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( ${(_sliderValue4 * 100).toInt()}%, style: const TextStyle( color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold, ), ), const SizedBox(height: 4), Text( 完成度, style: TextStyle( color: Colors.white.withOpacity(0.6), fontSize: 12, ), ), ], ), ], ), ), //滑动条 const SizedBox(height: 12), SliderTheme( data: SliderThemeData( trackHeight: 8, thumbShape: const RoundSliderThumbShape( enabledThumbRadius: 10, ), activeTrackColor:const Color(0xFF3B82F6), inactiveTrackColor: Colors.white.withOpacity(0.1), ), child: Slider( value: _sliderValue4, onChanged: (value) setState(() _sliderValue4 value), ), ), ], ), ); } }3.自定义多色环形进度条绘制class _GradientCircularPainter extends CustomPainter { final double value; //进度值 _GradientCircularPainter({required this.value}); //构造函数 override void paint(Canvas canvas, Size size) { //计算圆心位置 final center Offset(size.width / 2, size.height / 2); //计算半径 final radius size.width / 2 - 5; // 绘制背景圆环 final backgroundPaint Paint() ..color Colors.white.withOpacity(0.1) //背景颜色 ..style PaintingStyle.stroke //描边模式不填充圆心 ..strokeWidth 10; //线宽 canvas.drawCircle(center, radius, backgroundPaint); // 绘制渐变进度圆环 final progressRect Rect.fromCircle(center: center, radius: radius); //准备绘制区域 final progressPaint Paint() ..style PaintingStyle.stroke //描边模式 ..strokeWidth 10 //线宽 ..strokeCap StrokeCap.round //线条端点圆角 ..shader SweepGradient( //扫掠渐变 colors: const [ Color(0xFF1E40AF), Color(0xFF3B82F6), Color(0xFF60A5FA), Color(0xFF93C5FD), Color(0xFF1E40AF), ], stops: const [0.0, 0.3, 0.6, 0.9, 1.0], //颜色分布位置 ).createShader(progressRect); //创建渐变着色器 const startAngle -pi / 2; //起始角度 final sweepAngle 2 * pi * value; //扫过的角度 canvas.drawArc( progressRect, //绘制区域 startAngle, //起始角度 sweepAngle, //扫过的角度 false, //不填充中心 progressPaint, //渐变画笔 ); // 绘制进度端点圆点 final endAngle startAngle sweepAngle; //计算端点角度终点角度 final dotX center.dx radius * cos(endAngle); //X坐标 final dotY center.dy radius * sin(endAngle); //Y坐标 final dotPaint Paint() //绘制圆点 ..color Colors.white ..style PaintingStyle.fill; canvas.drawCircle(Offset(dotX, dotY), 6, dotPaint); } override bool shouldRepaint(covariant CustomPainter oldDelegate) true; }