Flutter 自定义view-Toy模板网

这篇具有很好参考价值的文章主要介绍了Flutter 自定义view。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

带进度动画的圆环。没gif，效果大家自行脑补。

继承CustomPainter，paint()方法中拿到canvas，绘制API和android差不多。

Flutter 自定义view,flutter 文章来源地址https://www.toymoban.com/news/detail-631987.html

import 'package:flutter/material.dart';

class ProgressRingPainter extends CustomPainter {
  double strokeWidth = 20;
  Color _colorBg = Colors.white10;
  final double progress;

  ProgressRingPainter({this.progress});

  @override
  void paint(Canvas canvas, Size size) {
    var xCenter = size.width / 2;
    var yCenter = size.height / 2;

    Rect rect = Rect.fromCenter(
        center: Offset(xCenter, yCenter),
        width: size.width,
        height: size.height);

    var paintBg = Paint()
      ..style = PaintingStyle.stroke
      ..isAntiAlias = true
      ..strokeWidth = strokeWidth
      ..color = _colorBg;

    List<Color> colors = List();
    colors.add(Colors.white70);
    colors.add(Colors.white);
    colors.add(Colors.white70);

    var paint = Paint()
      ..style = PaintingStyle.stroke
      ..isAntiAlias = true
      ..strokeWidth = strokeWidth
      ..shader = LinearGradient(colors: colors).createShader(rect);

    canvas.drawArc(rect, 0, 36, false, paintBg);
    canvas.drawArc(rect, 4.5, -progress, false, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_app_demo/widget/progress_ring_paint.dart';

AnimationController animationController;

class ProgressRing extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ProgressRingState();
  }

  static void startAnimation() {
    animationController.forward(from: 0);
  }
}

class ProgressRingState extends State<ProgressRing>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(seconds: 5), vsync: this);
    animation = CurvedAnimation(parent: controller, curve: Curves.linear);
    animation = new Tween(begin: 0.0, end: 36.0).animate(animation);
    controller.forward(from: 0);
    animationController = controller;
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedProgressRing(animation: animation);
  }
}

class AnimatedProgressRing extends AnimatedWidget {
  AnimatedProgressRing({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return CustomPaint(
      size: Size(200, 200),
      painter: ProgressRingPainter(progress: animation.value),
    );
  }
}

到了这里，关于Flutter 自定义view的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！