简介
操作图形的界面
基本用法
- canvas + Animation 实现一个 loading 效果
实例演示
import 'dart:ui';
import 'package:flutter/material.dart';
class CustomViewPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => CustomViewPageState();
}
class CustomViewPageState extends State<CustomViewPage>
with SingleTickerProviderStateMixin {
Animation<double> _doubleAnimation;
AnimationController _controller;
CurvedAnimation curvedAnimation;
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 2));
curvedAnimation =
CurvedAnimation(parent: _controller, curve: Curves.decelerate);
_doubleAnimation = Tween(begin: 0.0, end: 360.0).animate(_controller);
_controller.addListener(() {
if(mounted){
this.setState(() {});
}
});
onAnimationStart();
}
@override
Widget build(BuildContext context) {
return Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(8.0),
child: CustomPaint(
child: Center(
child: Text((_doubleAnimation.value / 3.6).round().toString())),
painter: CircleProgressBarPainter(_doubleAnimation.value)
),
);
}
void onAnimationStart() {
_controller.forward(from: 0.0);
}
@override
void reassemble() {
super.reassemble();
onAnimationStart();
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}
class CircleProgressBarPainter extends CustomPainter {
Paint _paintBackground;
Paint _paintFore;
final double pi = 3.1415926;
var jindu;
CircleProgressBarPainter(this.jindu) {
_paintBackground = Paint()
..color = Colors.grey
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = 10.0
..isAntiAlias = true;
_paintFore = Paint()
..color = Colors.red
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = 10.0
..isAntiAlias = true;
}
@override
void paint(Canvas canvas, Size size) {
canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2,_paintBackground);
Rect rect = Rect.fromCircle(
center: Offset(size.width / 2, size.height / 2),
radius: size.width / 2,
);
canvas.drawArc(rect, 0.0, jindu * 3.14 / 180, false, _paintFore);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}