前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter 小练习

Flutter 小练习

作者头像
坑吭吭
发布2018-08-31 17:25:38
1.1K0
发布2018-08-31 17:25:38
举报

学Flutter也有一段时间了,一直在学习理论,还没怎么做过练习。想起以前初学Android的时候做过的一个练手小玩具,今天决定用Flutter去实现一下子。核心东西是一个叫Ticker的东西,用来计时。以后项目中如果做短信验证倒计时的时候应该能用上吧。

杨艳点点

玩法(逻辑)

点击开始,开始按钮变成结束字样,并开启15秒钟的倒计时。此时可以点击“点我”按钮,每点一次次数+1。目的看15秒内最多能点多少次。重新开始会刷新次数。

代码总览

代码语言:javascript
复制
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {

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

class _MyAppState extends State<MyApp> {
  int _count = 0;
  String _time = "0";
  Ticker _ticker;
  String _beginButtonText = "开始";

  _MyAppState(){
    _ticker = new Ticker((Duration duration){
        setState(() {
          _time = (15-duration.inSeconds).toString();
          if(15-duration.inSeconds==0){
            _ticker.stop(canceled: true);
            _beginButtonText = "开始";
          }
        });
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(title: new Text('Flutter点点'),),
          body: Center(child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text("还剩$_time秒"),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text("一共点了$_count次"),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: MaterialButton(
                      color: Colors.grey,
                      colorBrightness: Brightness.light,
                      child: Text(_beginButtonText),
                      onPressed:(){
                        if(_ticker.isTicking){
                          _ticker.stop(canceled: true);
                          setState(() {
                            _beginButtonText = "开始";
                          });
                        }else{
                          _ticker.start();
                          setState(() {
                            _beginButtonText = "结束";
                            _count = 0;
                          });
                        }
                      },
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: MaterialButton(
                      color: Colors.grey,
                      colorBrightness: Brightness.light,
                      child: Text('点我'),
                      onPressed:(){
                        if(_ticker.isTicking){
                          setState(() {
                            _count++;
                          });
                        }
                      },
                    ),
                  ),
                ],
              ),
            ],
          )),
        ),
      );
  }
}

代码仅供参考,仅仅是记录一下学习成果,对之前学习过的东西进行一下实际应用而已。 这里记录三个快捷键:

快捷键

功能

alt+enter

可以快速嵌套或删除widget

stf

可以快速创建stateful的widget

stl

可以快速创建stateless的widget

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.07.30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 玩法(逻辑)
  • 代码总览
相关产品与服务
短信
腾讯云短信(Short Message Service,SMS)可为广大企业级用户提供稳定可靠,安全合规的短信触达服务。用户可快速接入,调用 API / SDK 或者通过控制台即可发送,支持发送验证码、通知类短信和营销短信。国内验证短信秒级触达,99%到达率;国际/港澳台短信覆盖全球200+国家/地区,全球多服务站点,稳定可靠。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档