Flutter-创建倒数计时小部件 [英] Flutter - Create a countdown widget

问题描述

我正在尝试构建倒计时小部件。目前，我可以使用该结构。我只为倒数计时而挣扎。我使用倒数计时插件尝试了这种方法：

  class _Countdown扩展了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（）; 
返回新的Scaffold（
主体：new Container（
子代：new Center（
子代：new Text（val.toString（）），样式：new TextStyle（fontSize：150.0） ），
），
），
）； 
} 
} 
  

但是，该值变化非常怪异，在所有。它开始抽搐。还有其他方法或修复方法吗？

解决方案

听起来您正在尝试显示随时间变化的动画文本小部件。我会使用

  import'package：flutter / material.dart'; 
 
 void main（）{
 runApp（new MaterialApp（
 home：new MyApp（），
））; 
} 
 
类Countdown扩展了AnimatedWidget {
 Countdown（{Key key，this.animation}）：super（key：key，listenable：animation）; 
 Animation< int>动画; 
 
 @override 
 build（BuildContext context）{
 return new Text（
 animation.value.toString（），
 style：new TextStyle（fontSize ：150.0），
）; 
} 
} 
 
类MyApp扩展了StatefulWidget {
 State createState（）=>新的_MyAppState（）; 
} 
 
类_MyAppState扩展了State< MyApp>与TickerProviderStateMixin {
 AnimationController _controller; 
 
静态常量int kStartValue = 4; 
 
 @override 
 void initState（）{
 super.initState（）; 
 _controller = new AnimationController（
 vsync：this，
持续时间：new Duration（seconds：kStartValue），
）; 
} 
 
 @override 
小部件构建（BuildContext上下文）{
 return new Scaffold（
 floatActionButton：new FloatingActionButton（
 child：new Icon（Icons.play_arrow），
 onPressed：（）=> _controller.forward（from：0.0），
），
正文：new Container（
 child：new Center （
子级：新Countdown（
动画：new StepTween（
开始：kStartValue，
结束：0，
）.animate（_controller），
 ），
），
），
）； 
} 
} 
  

I am trying to build a countdown widget. Currently, I got the structure to work. I only struggle with the countdown itself. I tried this approach using the countdown plugin:

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

However, the value changes very weirdly and not smooth at all. It start twitching. Any other approach or fixes?

解决方案

It sounds like you are trying to show an animated text widget that changes over time. I would use an AnimatedWidget with a StepTween to ensure that the countdown only shows integer values.

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

这篇关于Flutter-创建倒数计时小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！