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

发布时间：2020-12-14 14:55:22 所属栏目：百科来源：网络整理

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

我正在尝试构建一个倒计时小部件.目前,我得到了结构工作.我只与倒计时本身斗争.我使用倒计时插件尝试了这种方法：

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来确保倒计时仅显示整数值.

countdown

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!