flutter - 按下按钮时颤振倒计时开始
问题描述
所以我正在尝试制作一个短信验证器。我需要一个按钮来发送短信,然后它需要开始倒计时,这样你就不能再按下按钮了。我在互联网上找到了这段代码(https://dartpad.dev/23c25b17a8d663ea8c01b18eae38b2ab?),问题是它在页面打开后首先开始倒计时,而我需要完全相反,一旦页面首先打开你按下按钮,然后看到倒计时和循环重复。
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
static const _timerDuration = 30;
StreamController _timerStream = new StreamController<int>();
int timerCounter;
Timer _resendCodeTimer;
@override
void initState() {
activeCounter();
super.initState();
}
@override
dispose(){
_timerStream.close();
_resendCodeTimer.cancel();
super.dispose();
}
activeCounter(){
_resendCodeTimer =
new Timer.periodic(Duration(seconds: 1), (Timer timer) {
if (_timerDuration - timer.tick > 0)
_timerStream.sink.add(_timerDuration - timer.tick);
else {
_timerStream.sink.add(0);
_resendCodeTimer.cancel();
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: StreamBuilder(
stream: _timerStream.stream,
builder: (BuildContext ctx,
AsyncSnapshot snapshot) {
return SizedBox(
width: 300,
height: 30,
child:RaisedButton(
textColor: Theme.of(context)
.accentColor,
child: Center(
child:
snapshot.data == 0 ?
Text('send code again')
: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(' button will be enable after ${snapshot.hasData ? snapshot.data.toString() : 30} seconds '),
],)
),
onPressed: snapshot.data == 0 ? () {
// your sending code method
_timerStream.sink.add(30);
activeCounter();
} : null,
)
);
},
),
),
);
}
}
解决方案
只需像这样更改您的 initState() :
@override
void initState() {
_timerStream.sink.add(0); //add this line
super.initState();
}
推荐阅读
- sql - 在 SQL 中使用 CTE 时出现语法错误
- spring - 将 RequestParam 数据传递给 Spring RestController
- cocoa - NSOutlineView 检测子项何时折叠
- java - Spring Cloud Stream 多主题事务管理
- javascript - 如何使用 Javascript 有效地确定 HTML 文档中兄弟元素的相对顺序
- aws-lambda - 无法通过用户凭据访问 api 网关
- angular - 所有观察到的 NGXS 选择器是否都会在任何状态更改时执行?
- javascript - 在等待中使用外部函数并使用回调
- android - 如何在 5 分钟后停止通知 FLAG_INSISTENT?
- sql-server - MVC 项目中的 Rdlc 报告能够切换数据库