我想为Flutter中的进度栏设置动画。到目前为止,我已经可以使用CustomPainter类绘制进度条了:)
我的目标是制作第一个栏(custompainter),就像第二个栏一样:
我发现有很多例子可以使进度条具有重复性,但是只使用了一个CustomPainter。我(认为)我需要更多单独的custompainters来绘制孔线,如下所示:
但是现在我要开始对卡住的第一个圆点进行动画处理,我应该如何以及如何将其作为值传递给第一个圆的动画? 接下来,我必须对线条进行动画处理。
到目前为止,这是我的代码(GitHub要点): https://gist.github.com/LiveLikeCounter/a1dffbe8953d39aa4af32c8f4dfc6553
非常感谢您!
答案 0 :(得分:1)
您可以将“行”小部件与Container
和LinearProgressIndicator
组合使用
由于我不知道该应用程序的其余部分,因此我将提供一个示例小部件树供您参考。
小部件树:
Row(
children: <Widget>[
Container([...]),
LinearProgressIndicator([...]),
Container([...]),
LinearProgressIndicator([...]),
Container([...]),
]
)
要与Container
过渡一起进行循环color
,
AnimatedContainer(
duration: Duration(seconds:2),
width: x,
height: x,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(x/2),
// color: (progressvalue>200)? Colors.yellow : Colors.grey
)
)
示例逻辑:
Container1 - progressValue > 0
LinearProgressIndicator - (progressValue-10) to 110
Container2 - progressValue > 110
LinearProgressIndicator - (progressValue-120) to 220
Container2 - progressValue > 220
可以根据您的方便修改上述逻辑。
LinearProgressIndicator
的工作示例,
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
MyAppState createState() => new MyAppState();
}
class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Slider Demo'),
),
body: new Container(
color: Colors.blueAccent,
padding: new EdgeInsets.all(32.0),
child: new ProgressIndicatorDemo(),
),
);
}
}
class ProgressIndicatorDemo extends StatefulWidget {
@override
_ProgressIndicatorDemoState createState() =>
new _ProgressIndicatorDemoState();
}
class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo>
with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
animation = Tween(begin: 0.0, end: 1.0).animate(controller)
..addListener(() {
setState(() {
// the state that has changed here is the animation object’s value
});
});
controller.repeat();
}
@override
void dispose() {
controller.stop();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new Center(
child: new Container(
child: LinearProgressIndicator( value: animation.value,),
)
);
}
}