【Flutter】实现按钮点击后显示一个60秒的倒计时效果

服务器托管网

要实现按钮点击后显示一个60秒的倒计时效果，可以结合使用Flutter的Timer类和setState方法来更新按钮的文本内容。
以下是示例代码：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends StateMyHomePage> {
  String _buttonText = 'Click Me';
  bool _buttonEnabled = true;

  void _startCountdown() {
    setState(() {
      _buttonEnabled = false;
      _buttonText = '60s'; // 初始文本为60s
    });

    int count = 60;
    Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        count--;
        if (count > 0) {
          _buttonText = '$count s'; // 更新按钮文本为倒计时数字
        } else {
          _buttonText = 'Click Me';
          _buttonEnabled = true;
          timer.cancel(); // 取消定时器
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Countdown Button Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _buttonEnabled ? _startCountdown : null,
          child: Text(_buttonText),
        ),
      ),
    );
  }
}

在这个示例中，当用户点击按钮后，按钮的文本会显示60秒的倒计时，每秒更新一次。倒计时结束后按钮文本会恢复为”Click Me”，按钮恢复可点击状态。

这段代码利用了Timer.perio服务器托管网dic来实现每秒更新按钮文本的功能。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Hive数据仓库行转列

查了很多资料发现网上很多文章都是转发和抄袭，有些问题。这里分享一个自己项目中使用的行转列例子，供大家参考。代码如下： SELECT my_id, nm_cd_map[‘A’] AS my_cd_a, nm_cd_map[‘B’] AS my_cd_b, nm_…