導入
日常の開発プロセスでは、ロジックの完了を遅らせたり、スタートアップ ページにスプラッシュ スクリーン広告を読み込んでカウントダウン時間が経過した後にアプリに入るなど、カウントダウンのようなシナリオがよく使用されます。シナリオは、携帯電話の確認コードを取得するときに、ユーザーにフレンドリーなプロンプトを表示する待機試行です。このブログ投稿では、フラッターに基づいてカウントダウン ウィジェットをカプセル化するプロセス全体について学びます。
コースの知識ポイント
- 1.タイマーのご利用について
- 2. コールバック関数の値を渡す
- 3. コンポーネントカプセル化の考え方の確立
今日のブログ投稿を始める前に、今日のコースで教えられる内容のイメージを見てみましょう。
レンダリング
論理的な並べ替え
上の図から分析できるのは、
1. プロセス カウントダウン ウィジェット全体は 2 つの状態に分かれています。
- カウントダウン: 設定した時間に従って、残り時間が 0 になるまで 1 秒ずつ減ります。この期間中、ボタンのフォントの色は灰色になり、ボタンは再びクリック イベントを受け取ることができません。
- 初期状態またはカウントダウン完了: ボタンのフォントの色は青色で、ボタンをクリックするとカウントダウン状態に入ります。
2. dart async パッケージのタイマーを使用して、ボタンのカウントダウン ロジックを完了します。
Timer.periodic(Duration duration, void callback(Timer timer))
メソッド シグネチャから、Timer.periodic が 2 つのパラメーター、つまり時間間隔とコールバック関数を受け取ることがわかります。受信時間間隔を 1 秒の期間として使用し、コールバック関数で実行します。時間が 1 ずつデクリメントされるたびに、現在の残り時間が 1 未満の場合は現在のタイマーを終了し、それ以外の場合はコールバックを終了します。関数は常に実行されます。
Timer _timer;
int _countdownTime = 10;
_timer = Timer.periodic(
Duration(seconds: 1),
(Timer timer) =>
{
setState(() {
if (_countdownTime < 1) {
_timer.cancel();
} else {
_countdownTime = _countdownTime - 1;
}
})
});
その他の部分は、ボタンのステータスとクリック イベントの処理に関係します。これらについては、入門レベルの上級コラムの一連の記事で詳しく説明していますので、ここでは詳しく説明しません。読者は、以下を基に自分で読んで理解することができます。コード。
カプセル化されたカウントダウン ウィジェット コード:
import 'dart:async';
import 'package:flutter/material.dart';
/**
* @desc
* @author xiedong
* @date 2020-02-28.
*/
class TimerCountDownWidget extends StatefulWidget {
Function onTimerFinish;
TimerCountDownWidget({
this.onTimerFinish}) : super();
@override
State<StatefulWidget> createState() => TimerCountDownWidgetState();
}
class TimerCountDownWidgetState extends State<TimerCountDownWidget> {
Timer _timer;
int _countdownTime = 0;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
if (_countdownTime == 0) {
setState(() {
_countdownTime = 60;
});
//开始倒计时
startCountdownTimer();
}
},
child: RaisedButton(
color: Colors.black12,
child: Text(
_countdownTime > 0 ? '$_countdownTime后重新获取' : '获取验证码',
style: TextStyle(
fontSize: 14,
color: _countdownTime > 0
? Colors.white
: Color.fromARGB(255, 17, 132, 255),
),
),
),
);
}
void startCountdownTimer() {
// const oneSec = const Duration(seconds: 1);
// var callback = (timer) => {
// setState(() {
// if (_countdownTime < 1) {
// widget.onTimerFinish();
// _timer.cancel();
// } else {
// _countdownTime = _countdownTime - 1;
// }
// })
// };
//
// _timer = Timer.periodic(oneSec, callback);
_timer = Timer.periodic(
Duration(seconds: 1),
(Timer timer) => {
setState(() {
if (_countdownTime < 1) {
widget.onTimerFinish();
_timer.cancel();
} else {
_countdownTime = _countdownTime - 1;
}
})
});
}
@override
void dispose() {
super.dispose();
if (_timer != null) {
_timer.cancel();
}
}
}
ページ内のウィジェットとして使用します
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/custom_widget/widget/timer_count_down_widget.dart';
/**
* @desc
* @author xiedong
* @date 2020-02-28.
*/
class VerficationCodePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => VerficationCodePageState();
}
class VerficationCodePageState extends State<VerficationCodePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("验证码倒计时"),
centerTitle: true,
),
body: Center(
child: TimerCountDownWidget(onTimerFinish: (){
print("倒计时结束--------");
},),
),
);
}
}
コードを実行した後、[検証コードの取得] ボタンをクリックします。カウントダウンが終了すると、渡したコールバック関数が呼び出されます。以下に示すように、プログラムに入力した内容がログ コンソールに出力されます。
このブログ投稿に関連するコード:ブログ投稿のソース コード