Question

我正在制作一个登录应用程序，在那里我创建了一个OTP验证页面。我要在此页面中创建一个重新发送选项，该选项只有在页面加载30秒后才能单击，并且一旦单击就永远无法点击。

我是新手，所以很抱歉。

Answer 1

您可以遵循此代码。

class TestButton extends StatefulWidget {
  @override
  _TestButtonState createState() => _TestButtonState();
}

class _TestButtonState extends State<TestButton> {
  bool firstStateEnabled = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Timer(Duration(milliseconds: 30000), () {
      setState(() {
        firstStateEnabled = true;
      });
    });
    return Scaffold(
      body: Container(
        child: firstStateEnabled
            ? Center(
                child: Container(
                  width: 200,
                  height: 55,
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text("Resend OTP"),
                  ),
                ),
              )
            : Center(child: Container()),
      ),
    );
  }
}

或者如果只需要一次按钮，则可以遵循以下代码。

安装timer_count_down。

然后，下面的代码。

class TestButton extends StatefulWidget {
  @override
  _TestButtonState createState() => _TestButtonState();
}

class _TestButtonState extends State<TestButton> {
  bool firstStateEnabled = false;
  final CountdownController controller = CountdownController();
  final int seconds = 30;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            child: firstStateEnabled
                ? Center(
                    child: Container(
                      width: (200),
                      height: 55,
                      child: RaisedButton(
                        onPressed: () {
                          setState(() {
                            firstStateEnabled = false;
                          });
                        },
                        child: Text("Resend OTP"),
                      ),
                    ),
                  )
                : Center(child: Container()),
          ),
          Countdown(
            controller: controller,
            seconds: seconds,
            build: (context, double time) {
              return Container();
            },
            interval: Duration(milliseconds: 100),
            onFinished: () {
              setState(() {
                firstStateEnabled = true;
                ;
              });
            },
          )
        ],
      ),
    );
  }
}

如何使文字在颤动30秒后变得可点击？

1 个答案: