Flutter實現(xiàn)漸變弧形進度條的示例詳解
在Flutter開發(fā)中,構(gòu)建一個具有視覺吸引力的、反映進度的圓形弧形進度條是一個常見需求。本文將詳細介紹如何使用Flutter和Dart語言實現(xiàn)這一功能。最終效果如圖:
首先,我們需要導入必要的包和庫,比如dart:math
和package:flutter/material.dart
。這些庫為繪制和樣式提供基礎支持。
接下來,創(chuàng)建一個ArcProgressPainter
類,它繼承自CustomPainter
。這個類的核心是paint
方法,用于繪制進度條。我們使用Canvas
對象和Size
對象來確定繪制區(qū)域,并利用數(shù)學運算確定圓心、半徑等參數(shù)。
此外,文章還將展示如何使用線性漸變(LinearGradient)來美化進度條,以及如何計算角度和繪制圓弧。這包括如何根據(jù)進度動態(tài)變化圓弧的顏色和位置。
最后,我們將創(chuàng)建一個ArcProgressBar
組件,它包裝了CustomPaint
,并使用上面定義的ArcProgressPainter
來實現(xiàn)視覺效果。
整個過程不僅涉及基礎的Flutter繪圖技術,還包含一些高級的定制化元素,如顏色計算和動態(tài)布局調(diào)整。通過本文,讀者可以學習如何靈活運用Flutter框架的繪圖能力,為自己的應用程序添加獨特且富有表現(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, ), ); } }
到此這篇關于Flutter實現(xiàn)漸變弧形進度條的示例詳解的文章就介紹到這了,更多相關Flutter漸變弧形進度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Android平臺基于Pull方式對XML文件解析與寫入方法詳解
這篇文章主要介紹了Android平臺基于Pull方式對XML文件解析與寫入方法,結(jié)合實例形式分析了Android基于Pull方式對xml文件解析及寫入操作的步驟、原理與操作技巧,需要的朋友可以參考下2016-10-10Android 實現(xiàn)IOS 滾輪選擇控件的實例(源碼下載)
這篇文章主要介紹了 Android 實現(xiàn)IOS 滾輪選擇控件的實例(源碼下載)的相關資料,需要的朋友可以參考下2017-03-03在當前Activity之上創(chuàng)建懸浮view之WindowManager懸浮窗效果
這篇文章主要介紹了在當前Activity之上創(chuàng)建懸浮view之WindowManager懸浮窗效果的相關資料,需要的朋友可以參考下2016-01-01Android使用ViewPager實現(xiàn)頂部tabbar切換界面
這篇文章主要為大家詳細介紹了使用ViewPager實現(xiàn)頂部tabbar切換界面,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08Android Studio 3.1.3升級至3.6.1后舊項目的兼容操作方法
這篇文章主要介紹了Android Studio 3.1.3升級至3.6.1后舊項目的兼容操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03Android 自定義view實現(xiàn)水波紋動畫效果
這篇文章主要介紹了 Android 自定義view實現(xiàn)水波紋動畫效果的實例代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-01-01flutter實現(xiàn)頁面多個webview的方案詳解
這篇文章主要為大家詳細介紹了flutter如何實現(xiàn)頁面多個webview的效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起了解下2023-09-09