Flutter實(shí)現(xiàn)漸變弧形進(jìn)度條的示例詳解
在Flutter開發(fā)中,構(gòu)建一個(gè)具有視覺吸引力的、反映進(jìn)度的圓形弧形進(jìn)度條是一個(gè)常見需求。本文將詳細(xì)介紹如何使用Flutter和Dart語言實(shí)現(xiàn)這一功能。最終效果如圖:

首先,我們需要導(dǎo)入必要的包和庫,比如dart:math和package:flutter/material.dart。這些庫為繪制和樣式提供基礎(chǔ)支持。
接下來,創(chuàng)建一個(gè)ArcProgressPainter類,它繼承自CustomPainter。這個(gè)類的核心是paint方法,用于繪制進(jìn)度條。我們使用Canvas對(duì)象和Size對(duì)象來確定繪制區(qū)域,并利用數(shù)學(xué)運(yùn)算確定圓心、半徑等參數(shù)。
此外,文章還將展示如何使用線性漸變(LinearGradient)來美化進(jìn)度條,以及如何計(jì)算角度和繪制圓弧。這包括如何根據(jù)進(jìn)度動(dòng)態(tài)變化圓弧的顏色和位置。
最后,我們將創(chuàng)建一個(gè)ArcProgressBar組件,它包裝了CustomPaint,并使用上面定義的ArcProgressPainter來實(shí)現(xiàn)視覺效果。
整個(gè)過程不僅涉及基礎(chǔ)的Flutter繪圖技術(shù),還包含一些高級(jí)的定制化元素,如顏色計(jì)算和動(dòng)態(tài)布局調(diào)整。通過本文,讀者可以學(xué)習(xí)如何靈活運(yùn)用Flutter框架的繪圖能力,為自己的應(yīng)用程序添加獨(dú)特且富有表現(xiàn)力的UI組件。
完整代碼如下:
import 'dart:math' as math;
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:otterlife/component/theme/extension.dart';
class ArcProgressPainter extends CustomPainter {
final double progress;
final Color backgroundColor;
final double strokeWidth;
final TextStyle textStyle;
ArcProgressPainter({
required this.progress,
required this.backgroundColor,
required this.strokeWidth,
required this.textStyle,
});
@override
void paint(Canvas canvas, Size size) {
final gradientColors = [const Color(0xFFFFC75A), const Color(0xFF6DAFF9), const Color(0xFF31A7AE)];
final gradient = LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: gradientColors,
);
Offset center = Offset(size.width / 2, size.height / 2);
double radius = math.min(size.width / 2, size.height / 2);
Rect rect = Rect.fromCircle(center: center, radius: radius).inflate(-strokeWidth / 2);
double degreesToRadians(num deg) => deg * (math.pi / 180.0);
double startAngle = degreesToRadians(90 + 40);
double sweepAngle = degreesToRadians(360 - 80);
for (double i = 0; i < sweepAngle; i += 0.01) {
double angle = startAngle + i;
double colorPosition = i / sweepAngle;
Color color = _calculateGradientColor(gradientColors, colorPosition);
Paint segmentPaint = Paint()
..color = color
..strokeWidth = strokeWidth
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke;
canvas.drawArc(
rect,
angle,
0.01, // 繪制小段的角度
false,
segmentPaint,
);
}
double sliderAngle = startAngle + progress * sweepAngle;
Offset sliderPosition = Offset(
center.dx + (radius - strokeWidth / 2) * cos(sliderAngle),
center.dy + (radius - strokeWidth / 2) * sin(sliderAngle),
);
double sliderRadius = 28 / 2;
Paint sliderPaint = Paint()..color = _calculateSliderColor(progress); // Assuming you have this method
canvas.drawCircle(sliderPosition, sliderRadius, sliderPaint);
Paint whiteCenterPaint = Paint()..color = Colors.white;
canvas.drawCircle(sliderPosition, 16 / 2, whiteCenterPaint);
}
Color _calculateGradientColor(List<Color> colors, double position) {
int index = (position * (colors.length - 1)).floor();
double localPosition = (position * (colors.length - 1)) - index;
return Color.lerp(colors[index], colors[index + 1], localPosition) ?? colors.last;
}
Color _calculateSliderColor(double progress) {
final colors = [const Color(0xFFFFC75A), const Color(0xFF6DAFF9), const Color(0xFF31A7AE)];
progress = progress.clamp(0.0, 1.0);
double colorPosition = progress * (colors.length - 1);
int index = colorPosition.floor();
int nextIndex = (index + 1).clamp(0, colors.length - 1);
double t = colorPosition - index;
return Color.lerp(colors[index], colors[nextIndex], t) ?? colors.first;
}
double convertRadiusToSigma(double radius) {
return radius * 0.57735 + 0.5;
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
class ArcProgressBar extends StatelessWidget {
final double progress;
final double strokeWidth;
const ArcProgressBar({
super.key,
required this.progress,
this.strokeWidth = 16,
});
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: ArcProgressPainter(
progress: progress,
backgroundColor: Colors.red,
strokeWidth: strokeWidth,
textStyle: Colors.red,
),
);
}
}
到此這篇關(guān)于Flutter實(shí)現(xiàn)漸變弧形進(jìn)度條的示例詳解的文章就介紹到這了,更多相關(guān)Flutter漸變弧形進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android開發(fā)Launcher進(jìn)程啟動(dòng)流程
這篇文章主要為大家介紹了Android開發(fā)Launcher進(jìn)程啟動(dòng)流程示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
Android平臺(tái)基于Pull方式對(duì)XML文件解析與寫入方法詳解
這篇文章主要介紹了Android平臺(tái)基于Pull方式對(duì)XML文件解析與寫入方法,結(jié)合實(shí)例形式分析了Android基于Pull方式對(duì)xml文件解析及寫入操作的步驟、原理與操作技巧,需要的朋友可以參考下2016-10-10
Android 實(shí)現(xiàn)IOS 滾輪選擇控件的實(shí)例(源碼下載)
這篇文章主要介紹了 Android 實(shí)現(xiàn)IOS 滾輪選擇控件的實(shí)例(源碼下載)的相關(guān)資料,需要的朋友可以參考下2017-03-03
在當(dāng)前Activity之上創(chuàng)建懸浮view之WindowManager懸浮窗效果
這篇文章主要介紹了在當(dāng)前Activity之上創(chuàng)建懸浮view之WindowManager懸浮窗效果的相關(guān)資料,需要的朋友可以參考下2016-01-01
Android使用ViewPager實(shí)現(xiàn)頂部tabbar切換界面
這篇文章主要為大家詳細(xì)介紹了使用ViewPager實(shí)現(xiàn)頂部tabbar切換界面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
Android Studio 3.1.3升級(jí)至3.6.1后舊項(xiàng)目的兼容操作方法
這篇文章主要介紹了Android Studio 3.1.3升級(jí)至3.6.1后舊項(xiàng)目的兼容操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
Android 自定義view實(shí)現(xiàn)水波紋動(dòng)畫效果
這篇文章主要介紹了 Android 自定義view實(shí)現(xiàn)水波紋動(dòng)畫效果的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-01-01
flutter實(shí)現(xiàn)頁面多個(gè)webview的方案詳解
這篇文章主要為大家詳細(xì)介紹了flutter如何實(shí)現(xiàn)頁面多個(gè)webview的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解下2023-09-09

