亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Flutter實(shí)現(xiàn)漸變弧形進(jìn)度條的示例詳解

 更新時(shí)間:2023年12月21日 16:29:57   作者:Sinyu1012  
在Flutter開(kāi)發(fā)中,構(gòu)建一個(gè)具有視覺(jué)吸引力的、反映進(jìn)度的圓形弧形進(jìn)度條是一個(gè)常見(jiàn)需求,本文將詳細(xì)介紹如何使用Flutter和Dart語(yǔ)言實(shí)現(xiàn)這一功能,需要的可以參考下

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

首先,我們需要導(dǎo)入必要的包和庫(kù),比如dart:mathpackage:flutter/material.dart。這些庫(kù)為繪制和樣式提供基礎(chǔ)支持。

接下來(lái),創(chuàng)建一個(gè)ArcProgressPainter類,它繼承自CustomPainter。這個(gè)類的核心是paint方法,用于繪制進(jìn)度條。我們使用Canvas對(duì)象和Size對(duì)象來(lái)確定繪制區(qū)域,并利用數(shù)學(xué)運(yùn)算確定圓心、半徑等參數(shù)。

此外,文章還將展示如何使用線性漸變(LinearGradient)來(lái)美化進(jìn)度條,以及如何計(jì)算角度和繪制圓弧。這包括如何根據(jù)進(jìn)度動(dòng)態(tài)變化圓弧的顏色和位置。

最后,我們將創(chuàng)建一個(gè)ArcProgressBar組件,它包裝了CustomPaint,并使用上面定義的ArcProgressPainter來(lái)實(shí)現(xiàn)視覺(jué)效果。

整個(gè)過(guò)程不僅涉及基礎(chǔ)的Flutter繪圖技術(shù),還包含一些高級(jí)的定制化元素,如顏色計(jì)算和動(dòng)態(tài)布局調(diào)整。通過(guò)本文,讀者可以學(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)文章

最新評(píng)論