从零开始学习Flutter【二】

[shuvigoss]

第二节内容就是写一个倒计时按钮组件，同时熟悉dart语言一些用法

[shuvigoss]

首先创建一个widgets的目录，在下边创建countdown_btn.dart

[shuvigoss]

这里，有2个概念需要理解，statelesswidget和 statefulwidget，可以简单解释为，组件有状态、有可能变动的情况下用statefulwidget,相反无状态不可动的用statelesswidget 可以尝试查看以下链接来了解： https://juejin.im/post/5caa2c5151882543f33d064c https://juejin.im/post/5d79d1165188254bf34fd9d3

本节课程我们做一个带有倒计时显示的按钮，内部需要维护一个倒计时的状态，所以选用statefulwidget

import 'package:flutter/material.dart';

class CountDownBtn extends StatefulWidget {
  @override
  _CountDownBtnState createState() => _CountDownBtnState();
}

class _CountDownBtnState extends State<CountDownBtn> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

[shuvigoss]

可以分析，一个倒计时按钮有哪些属性

• 按钮名称/title
• 起始倒计时
• 倒计时达到后callback函数

class CountDownBtn extends StatefulWidget {
  String title;
  int countdown = 3;
  Function() callBack;

  CountDownBtn({this.title, this.countdown, this.callBack});

  @override
  _CountDownBtnState createState() => _CountDownBtnState();
}

这里，先设置按钮样式：

class _CountDownBtnState extends State<CountDownBtn> {

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text('${widget.title} (3)'),
      onPressed: widget?.callBack,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
          side: BorderSide(color: Colors.grey)),
    );
  }
}

然后在welcome.dart内引入按钮到相应位置.

这样在模拟器中就可以看到这个按钮已经在相应位置了

[shuvigoss]

这里需要了解一下dart的 Timer 对象的使用，从网上找了个demo https://juejin.im/post/5d81cf6d518825485e227b8c

import 'dart:async';  // 引入定时去所需要的包
Timer _timer;  // 定义一个变量，在页面销毁时需要用到，如果在定时器内部已经销毁了，可以不需要
int _count = 0;  // 一切为了演示。定义的变量
...
myTimer() {  // 定义一个函数，将定时器包裹起来
  _timer = Timer.periodic(Duration(milliseconds: 1000), (t) {
    _count++;
    if (_count==5) {
      t.cancel();  // 定时器内部触发销毁
    }
  });
}
...
@override
void dispose(() {
  if (_timer != null) {   // 页面销毁时触发定时器销毁
    if (_timer.isActive) {  // 判断定时器是否是激活状态
      _timer.cancel();
    }
  }
  super.dispose();
});

[shuvigoss]

接下来完整的把代码补充完整

class _CountDownBtnState extends State<CountDownBtn> {
  Timer _timer;
  int _countdown;

  @override
  void initState() {
    _countdown = widget.countdown;
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (_countdown <= 0) {
        timer.cancel();
        widget?.callBack();
        return;
      }
      setState(() {
        _countdown--;
      });
    });
    super.initState();
  }

  @override
  // ignore: must_call_super
  void dispose() {
    super.dispose();
    _timer?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text('${widget.title} ($_countdown)'),
      onPressed: widget?.callBack,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
          side: BorderSide(color: Colors.grey)),
    );
  }
}