zoukankan      html  css  js  c++  java
  • Flutter-使用Custompaint绘制一个圆圈进度条

    今天正好需求做完了没啥事,学习了一下CustomPaint,做了一个圆圈式的进度条,代码如下:

    import 'dart:async';
    import 'dart:math';
    
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            // This is the theme of your application.
            //
            // Try running your application with "flutter run". You'll see the
            // application has a blue toolbar. Then, without quitting the app, try
            // changing the primarySwatch below to Colors.green and then invoke
            // "hot reload" (press "r" in the console where you ran "flutter run",
            // or simply save your changes to "hot reload" in a Flutter IDE).
            // Notice that the counter didn't reset back to zero; the application
            // is not restarted.
            primarySwatch: Colors.blue,
          ),
          home: CustomPaintTestPage(),
        );
      }
    }
    
    class CustomPaintTestPage extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return CustomPaintTestState();
      }
    }
    
    class CustomPaintTestState extends State<CustomPaintTestPage> with TickerProviderStateMixin{
    
      AnimationController anim;
      Animation animation;
    
      @override
      void initState() {
        anim = AnimationController(duration: Duration(seconds: 2), vsync: this);
        animation = CurvedAnimation(parent: anim, curve: Curves.easeInOut, );
        animation = Tween<double>(begin: 0, end: 360).animate(animation)
          ..addListener( () {
              if (mounted) setState(() {});
            }
          )
          ..addStatusListener((status) {
              switch (status) {
                case AnimationStatus.completed:
                  anim.reverse();
                  break;
                case AnimationStatus.dismissed:
                  anim.forward();
                  break;
                default:
                  break;
              }
          });
        super.initState();
        anim.forward();
      }
    
      @override
      Widget build(BuildContext context) {
        print(anim.value);
        return Material(
          child: Center(
            child: CustomPaint(
              painter: MyPainter(animation),
            ),
          ),
        );
      }
    
      @override
      void dispose() {
        anim.dispose();
        super.dispose();
      }
    
    }
    
    class MyPainter extends CustomPainter {
    
      Animation animation;
    
      MyPainter (this.animation);
    
      @override
      void paint(Canvas canvas, Size size) {
        var paint = Paint()
            ..color = Colors.grey
            ..style = PaintingStyle.stroke
            ..strokeWidth = 5;
        canvas.drawCircle(Offset.zero, 30, paint);
    
        paint
            ..color = Colors.blueAccent
            ..strokeWidth = 5
            ..style = PaintingStyle.stroke;
        canvas.drawArc(Rect.fromCenter(center: Offset.zero,  60, height: 60), 0, animation.value * pi / 180, false, paint);
    
      }
    
      @override
      bool shouldRepaint(CustomPainter oldDelegate) {
        return true;
      }
    }

    效果如下:

  • 相关阅读:
    浏览器事件大全!
    IE 的 Session 处理
    多个Cache的异同。
    flexSDK 添加 swc资源
    flashBuilder 严格类型检查
    自定义事件
    as3类的链接问题
    FLEX SDK嵌入资源
    从.NET中委托写法的演变谈开去(中):Lambda表达式及其优势
    PowerDesigner创建Oracle数据库序列实现自动增长
  • 原文地址:https://www.cnblogs.com/FdWzy/p/13804419.html
Copyright © 2011-2022 走看看