introducción
En el proceso de desarrollo diario, a menudo se utilizan escenarios como la cuenta regresiva, como retrasar la finalización de una parte de la lógica o cargar un anuncio en la pantalla de inicio en la página de inicio y luego ingresar a la aplicación una vez finalizado el tiempo de la cuenta regresiva. El escenario es que hacemos un intento de espera para avisar amigablemente al usuario cuando obtiene el código de verificación del teléfono móvil. En esta publicación de blog, aprenderemos sobre todo el proceso de encapsular un widget de cuenta regresiva basado en flutter.
Puntos de conocimiento del curso
- 1. Sobre el uso del Temporizador
- 2. Pasar el valor de la función de devolución de llamada.
- 3. Establecimiento de la idea de encapsulación de componentes.
Antes de comenzar la publicación del blog de hoy, echemos un vistazo a las representaciones de lo que se enseña en el curso de hoy:
representaciones
clasificación lógica
De la figura anterior podemos analizar que
1. Todo el widget de cuenta regresiva del proceso se divide en dos estados.
- Cuenta regresiva: según el tiempo que configuramos, disminuya un segundo cada vez hasta que el tiempo restante sea 0. Durante este período, el color de fuente del botón es gris y el botón no puede recibir eventos de clic nuevamente.
- Estado inicial o cuenta regresiva completada: el color de fuente del botón es azul, haga clic en el botón para ingresar al estado de cuenta regresiva.
2. Usamos el temporizador en el paquete dart async para completar la lógica de cuenta regresiva en el botón.
Timer.periodic(Duration duration, void callback(Timer timer))
Desde la firma del método, podemos ver que Timer.periodic recibe dos parámetros, a saber, el intervalo de tiempo y la función de devolución de llamada. Usamos el intervalo de tiempo entrante como un período de 1 segundo y luego lo ejecutamos en la función de devolución de llamada. Cada vez que el tiempo se reduce en 1, si el tiempo restante actual es menor que 1, finalizamos el temporizador actual; de lo contrario, la devolución de llamada La función siempre se ejecuta.
Timer _timer;
int _countdownTime = 10;
_timer = Timer.periodic(
Duration(seconds: 1),
(Timer timer) =>
{
setState(() {
if (_countdownTime < 1) {
_timer.cancel();
} else {
_countdownTime = _countdownTime - 1;
}
})
});
Las otras partes involucran el procesamiento del estado del botón y los eventos de clic. Los he explicado en detalle en la serie de artículos en la columna avanzada de nivel de entrada, por lo que no entraré en detalles aquí. Los lectores pueden leer y comprender por sí mismos según el código.
Código del widget de cuenta regresiva encapsulado:
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();
}
}
}
Úselo como widget en la página.
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("倒计时结束--------");
},),
),
);
}
}
Después de ejecutar el código, hacemos clic en el botón Obtener código de verificación. Cuando finalice la cuenta regresiva, se llamará a la función de devolución de llamada que pasamos. Como se muestra a continuación, el contenido que ingresamos en el programa se imprime en la consola de registro:
Código relacionado con esta publicación de blog: Código fuente de la publicación de blog