Flutter 如何在颤振中实现多个倒计时进度条?
如何实现instagram顶部的故事进度条。如果存在多个故事,则为多个条形图;如果只有一个故事,则为一个条形图。10秒的计时器。到目前为止,我所做的工作还不错,但当有两个或更多快照时,它就不起作用了 代码 我试着把它放到列表视图中,但它有点不起作用 更新: 我想出了一个“Row.builder”的黑客,但我如何才能动画的进展?我使用的是计时器解决方案,我可以在计时器结束时更改快照,但进度条是否正确更新才是问题所在Flutter 如何在颤振中实现多个倒计时进度条?,flutter,dart,Flutter,Dart,如何实现instagram顶部的故事进度条。如果存在多个故事,则为多个条形图;如果只有一个故事,则为一个条形图。10秒的计时器。到目前为止,我所做的工作还不错,但当有两个或更多快照时,它就不起作用了 代码 我试着把它放到列表视图中,但它有点不起作用 更新: 我想出了一个“Row.builder”的黑客,但我如何才能动画的进展?我使用的是计时器解决方案,我可以在计时器结束时更改快照,但进度条是否正确更新才是问题所在 Row( mainAxisAlignment: MainAxisAlignme
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: List.generate(widget.posts.length, (index) {
if (this._index == index) {
return Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
height: 30,
child: CustomPaint(
foregroundPainter: ProgressPainter(value: this._countDown.remainingTime.inSeconds / 10.0),
),
),
);
} else {
return Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
height: 30,
child: CustomPaint(
foregroundPainter: ProgressPainter(value: 0.0),
),
),
);
}
}).reversed.toList(),
)
注:
我有进度条工作的效果,但只有一个。我有两个帖子,但只有一个进度条有效,另一个为0。解决了这个问题
倒计时:
int _index = 0;
CountDown _countDown;
StreamSubscription _countDownSubscription;
@override
void initState() {
super.initState();
this._initTimer();
}
_initTimer() {
if (mounted)
setState(() {
this._countDown = CountDown(Duration(seconds: widget.posts[this._index].timer));
this._countDown.remainingTime = Duration(seconds: widget.posts[this._index].timer);
this._countDownSubscription = this._countDown.stream.listen(null);
});
this._countDownSubscription.onData((d) {
setState(() {}); // Updates the UI to animate the progress bar
});
this._countDownSubscription.onDone(() {
if (widget.posts.length == this._index + 1) {
Navigator.of(context).pop();
} else {
if (mounted)
setState(() {
this._index++;
this._initTimer();
});
}
});
}
进度条:
class ProgressPainter extends CustomPainter {
final double value;
ProgressPainter({this.value});
Paint backgroundPaint = Paint()
..color = Colors.white
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..strokeWidth = 10;
Paint valuePaint = Paint()
..color = Colors.deepPurple
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..strokeWidth = 10;
@override
void paint(Canvas canvas, Size size) {
Path backgroundPath = Path();
Path valuePath = Path();
backgroundPath.moveTo(0, size.height / 2);
backgroundPath.lineTo(size.width, size.height / 2);
valuePath.moveTo(0, size.height / 2);
valuePath.lineTo(size.width * this.value, size.height / 2);
canvas.drawPath(backgroundPath, backgroundPaint);
canvas.drawPath(valuePath, valuePaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
动态进度条数:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: List.generate(widget.posts.length, (index) {
if (this._index == index) { // Current active post
return Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: CustomPaint(
foregroundPainter: ProgressPainter(value: this._countDown.remainingTime.inSeconds / 10.0),
),
),
);
} else if (this._index > index) { // when it's done
return Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: CustomPaint(
foregroundPainter: ProgressPainter(value: 0.0),
),
),
);
} else { // When it's next
return Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: CustomPaint(
foregroundPainter: ProgressPainter(value: 1.0),
),
),
);
}
}).reversed.toList(),
)
如果你们有更好更简单的解决方案,我完全赞成
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: List.generate(widget.posts.length, (index) {
if (this._index == index) { // Current active post
return Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: CustomPaint(
foregroundPainter: ProgressPainter(value: this._countDown.remainingTime.inSeconds / 10.0),
),
),
);
} else if (this._index > index) { // when it's done
return Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: CustomPaint(
foregroundPainter: ProgressPainter(value: 0.0),
),
),
);
} else { // When it's next
return Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: CustomPaint(
foregroundPainter: ProgressPainter(value: 1.0),
),
),
);
}
}).reversed.toList(),
)