如何使文本在飘动30秒后变得可点击

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;
;
});
},
)
],
),
);
}
}