flutter - (颤振)循环倒数计时器(进度弧)的动画无法正常工作
问题描述
我尝试为我在现有缺陷中发现的一些缺陷构建一个循环倒数计时器。
但是,除非我按下某个按钮,否则弧线无法动画化,因此它会以某种方式跛脚移动。
我附上了我的完整代码(由两个类组成),希望它足够清楚。请让我知道我做错了什么......
非常感谢和最好的问候奥马尔
//Class 1=Circular_Timer
import 'package:flutter/material.dart';
import 'dart:ui';
import 'dart:math';
class Circular_Timer extends CustomPainter {
double controller_value;
Circular_Timer({this.controller_value});
@override
void paint(Canvas canvas, Size size) {
// Define a paint object
final paint = Paint()
..style = PaintingStyle.stroke
..strokeWidth = 4.0
..color = Colors.indigo;
Paint outerCircle = Paint()
..strokeWidth = 10
..color = Colors.black
..style = PaintingStyle.stroke;
Offset center = Offset(size.width/2, size.height/2);
double radius = min(size.width/2,size.height/2) - 10;
canvas.drawCircle(center, radius, outerCircle);
Paint completeArc = Paint()
..strokeWidth = 10
..color = Colors.redAccent
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round;
canvas.drawArc(Rect.fromCircle(center: center,radius: radius), -pi/2, controller_value, false, completeArc);
}
@override
bool shouldRepaint(Circular_Timer oldDelegate) => false;
}
//class2=Animated_Circular_Timer
import 'package:circular_countdown_timer/circular_countdown_timer.dart';
import 'package:ex11/Circular_Timer.dart';
import 'package:flutter/material.dart';
import 'dart:math';
class Animated_Circular_Timer extends StatefulWidget {
@override
_Animated_Circular_TimerState createState() => _Animated_Circular_TimerState();
}
class _Animated_Circular_TimerState extends State<Animated_Circular_Timer> with TickerProviderStateMixin {
AnimationController controller;
Animation animation;
double x=((15/(2*pi)));
@override
void initState() {
// TODO: implement initState
super.initState();
controller = AnimationController(
duration: Duration(seconds: 15),
vsync: this,
);
animation = Tween(begin: 0.0,end: 2*pi).animate(controller);
controller.forward();
animation.addListener(() {
setState(() {
print(animation.value);
});
});
}
@override
Widget build(BuildContext context) {
return Container(
child: Align(
child: AspectRatio(
aspectRatio: 1,
child: Stack(
children: [
Positioned.fill(
child: CustomPaint(
painter: Circular_Timer(controller_value: animation.value)),
),
],
),
),
),
);
}
}
解决方案
推荐阅读
- javascript - 在 div 网页抓取中获取属性
- php - 使用 mysqli 和 PHP 在 mySQL 中搜索特殊的 unicode 字符
- javascript - 识别哪个切换被切换 - Office UI Fabric - React
- firebase - 错误:端口 5000 未打开,无法启动功能模拟器
- php - Laravel 中的(不存在的)whereHour 命令需要等效项
- dialogflow-es - 导出 Dialogflow 历史记录?
- java - 从小部件中的按钮触发事件
- database - Azure Cosmos DB 中的数据库视图
- python - 如何从输入元素中检索文本?
- openshift - 使用 CloudForms 进行 PHP(或类似的)Web 开发