颤振 - 创建倒计时部件

Question

我正在尝试构建倒计时部件。目前，我得到了结构工作。我只为倒计时本身而奋斗。我使用倒计时插件尝试了这种方法：

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)), 
     ), 
    ), 
    ); 
    } 
} 

但是，值的变化非常奇怪，而且根本不平滑。它开始抽搐。任何其他方法或修复？

Answer 1

听起来好像您正在尝试显示随时间变化的动画文本小部件。我会使用AnimatedWidget和StepTween来确保倒数只显示整数值。

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), 
     ), 
     ), 
    ), 
    ); 
    } 
} 

Answer 2

的countdown()方法应该从State对象的initState()方法被调用。从Flutter docs的initState()

class _CountdownState extends State<CountdownWidget> { 

    int val = 3; 
    CountDown cd; 

    @override 
    void initState() { 
    super.initState(); 
    countdown(); 
    } 
... 

说明：

框架调用INITSTATE。 State的子类应该重写 initState以执行一次性初始化，这取决于 BuildContext或小部件，这些小部件在调用initState方法时分别作为上下文和 小部件属性提供。

这是一个完整的工作示例：

import 'dart:async'; 
import 'package:flutter/material.dart'; 
import 'package:countdown/countdown.dart'; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     title: 'Countdown Demo', 
     theme: new ThemeData(
     primarySwatch: Colors.blue, 
    ), 
     home: new MyHomePage(), 
    ); 
    } 
} 


class MyHomePage extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new CountdownWidget(); 
    } 
} 

class _CountdownState extends State<CountdownWidget> { 

    int val = 3; 
    CountDown cd; 

    @override 
    void initState() { 
    super.initState(); 
    countdown(); 
    } 

    void countdown(){ 
    print("countdown() called"); 
    cd = new CountDown(new Duration(seconds: 4)); 
    StreamSubscription sub = cd.stream.listen(null); 
    sub.onDone(() { 
     print("Done"); 
    }); 
    sub.onData((Duration d) { 
     if (val == d.inSeconds) return; 
     print("onData: d.inSeconds=${d.inSeconds}"); 
     setState((){ 
     val = d.inSeconds; 
     }); 
    }); 
    } 

    @override 
    build(BuildContext context){ 
    return new Scaffold(
     body: new Container(
     child: new Center(
      child: new Text(val.toString(), style: new TextStyle(fontSize: 150.0)), 
     ), 
    ), 
    ); 
    } 
} 

class CountdownWidget extends StatefulWidget { 

    @override 
    _CountdownState createState() => new _CountdownState(); 
}