dart – Flutter – 创建一个倒计时小部件

概述我正在尝试构建一个倒计时小部件.目前,我得到了结构工作.我只与倒计时本身斗争.我使用倒计时插件尝试了这种方法： class _Countdown extends State<Countdown> { int val = 3; void countdown(){ CountDown cd = new CountDown(new Duration(seconds: 4)); 我正在尝试构建一个倒计时小部件.目前,我得到了结构工作.我只与倒计时本身斗争.我使用倒计时插件尝试了这种方法：

class _Countdown extends State<Countdown> {  int val = 3;  voID countdown(){    CountDown cd = new CountDown(new Duration(seconds: 4));    cd.stream.Listen((Duration d) {      setState((){        val = d.inSeconds;      });    });  }  @overrIDe  build(BuildContext context){    countdown();    return new Scaffold(      body: new Container(        child: new Center(          child: new Text(val.toString(),style: new TextStyle(FontSize: 150.0)),),);  }}

然而,价值变化非常奇怪而且根本不光滑.它开始抽搐.任何其他方法或修复？

解决方法 听起来您正在尝试显示随时间变化的动画文本小部件.我会使用带有 StepTween的 AnimatedWidget来确保倒计时仅显示整数值.

import 'package:Flutter/material.dart';voID main() {  runApp(new MaterialApp(    home: new MyApp(),));}class Countdown extends AnimatedWidget {  Countdown({ Key key,this.animation }) : super(key: key,Listenable: animation);  Animation<int> animation;  @overrIDe  build(BuildContext context){    return new Text(      animation.value.toString(),style: new TextStyle(FontSize: 150.0),);  }}class MyApp extends StatefulWidget {  State createState() => new _MyAppState();}class _MyAppState extends State<MyApp> with TickerProvIDerStateMixin {  AnimationController _controller;  static const int kStartValue = 4;  @overrIDe  voID initState() {    super.initState();    _controller = new AnimationController(      vsync: this,duration: new Duration(seconds: kStartValue),);  }  @overrIDe  Widget build(BuildContext context) {    return new Scaffold(      floatingActionbutton: new floatingActionbutton(        child: new Icon(Icons.play_arrow),onpressed: () => _controller.forward(from: 0.0),body: new Container(        child: new Center(          child: new Countdown(            animation: new StepTween(              begin: kStartValue,end: 0,).animate(_controller),);  }}

总结

以上是内存溢出为你收集整理的dart – Flutter – 创建一个倒计时小部件全部内容，希望文章能够帮你解决dart – Flutter – 创建一个倒计时小部件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。