在Flutter中使用TextField小部件的输入来设置计时器的持续时间,可以按照以下步骤进行:
import 'package:flutter/material.dart';
import 'dart:async';
class TimerPage extends StatefulWidget {
@override
_TimerPageState createState() => _TimerPageState();
}
class _TimerPageState extends State<TimerPage> {
final TextEditingController _controller = TextEditingController();
Timer _timer;
int _duration = 0;
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Timer'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller,
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: '请输入持续时间(秒)',
),
),
SizedBox(height: 20),
RaisedButton(
child: Text('开始计时'),
onPressed: () {
setState(() {
_duration = int.parse(_controller.text);
_startTimer();
});
},
),
SizedBox(height: 20),
Text('剩余时间:$_duration 秒'),
],
),
),
);
}
void _startTimer() {
if (_timer != null) {
_timer.cancel();
}
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
setState(() {
if (_duration > 0) {
_duration--;
} else {
_timer.cancel();
}
});
});
}
}
void main() {
runApp(MaterialApp(
home: TimerPage(),
));
}
这样,你就可以在Flutter中使用TextField小部件的输入来设置计时器的持续时间了。用户可以在输入框中输入持续时间(以秒为单位),然后点击“开始计时”按钮,计时器将开始倒计时并显示剩余时间。当计时器倒计时结束时,计时器将停止。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云函数(SCF)。
领取专属 10元无门槛券
手把手带您无忧上云