0
点赞
收藏
分享

微信扫一扫

axios接口请求超时,重试方法

kmoon_b426 2024-02-28 阅读 9
flutter

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

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  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(); // 取消定时器
        }
      });
    });
  }

  
  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.periodic来实现每秒更新按钮文本的功能。

举报

相关推荐

0 条评论