Flutter 知识 时间(定时,倒计时,延时)

一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。

delayed - 延时

Future.delayed(Duration(milliseconds: 2000), () {

});

periodic - 定时

import 'dart:async';//用于定时器
Timer.periodic(const Duration(milliseconds: 1000), (timer) {
  
});

Timer - 倒计时

Flutter 知识 时间(定时,倒计时,延时)_第1张图片

Flutter 知识 时间(定时,倒计时,延时)_第2张图片

倒计时封装

import 'package:flutter/material.dart';
import 'dart:async';


class CountdownTimerWidget extends StatefulWidget {
  final int seconds;

  CountdownTimerWidget({required this.seconds});

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

class _CountdownTimerWidgetState extends State<CountdownTimerWidget> {
  late int _currentSeconds;//设置倒计时的时间
  late Timer _timer;//定时器

  @override
  void initState() {
    super.initState();
    _currentSeconds = widget.seconds;
    _startTimer();
  }

  void _startTimer() {
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        if (_currentSeconds > 0) {
          _currentSeconds--;
        } else {
          _timer.cancel();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Countdown: $_currentSeconds seconds'),
        TextButton(
          onPressed: () {
            _currentSeconds = 20;
            _timer.cancel();
            _startTimer();
            },
          style: TextButton.styleFrom(
            backgroundColor: Colors.green[300],//背景颜色
          ),
          child: const Text(
            'changeValue',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,// 设置文本颜色为蓝色
              fontSize: 14,
            ),
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }
}

使用

import 'package:flutter/material.dart';
import 'package:flutterdemols/CountdownTimerWidget.dart';

class Home extends StatefulWidget {

  static const routeName = 'Home';

  @override
  State<Home> createState() => _Home();
}

class _Home extends State<Home> {

  @override
  void initState() {

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue[300],
      ),
      body: Center(
        child: CountdownTimerWidget(seconds: 60),
      ),
    );
  }

}

你可能感兴趣的:(Flutter,flutter)