flutter-一个可以输入的数字增减器
warning:
这篇文章距离上次修改已过204天,其中的内容可能已经有所变动。
以下是一个简单的Flutter数字增减器示例,使用TextField
来输入数字,并使用IconButton
来增加或减少数字。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _counter = 0;
void _incrementCounter() => setState(() => _counter++);
void _decrementCounter() => setState(() => _counter--);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.remove),
onPressed: _decrementCounter,
),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '0'
),
onSubmitted: (value) => setState(() => _counter = int.parse(value)),
keyboardType: TextInputType.number,
controller: TextEditingController()..text = '$_counter',
),
IconButton(
icon: Icon(Icons.add),
onPressed: _incrementCounter,
),
],
),
],
),
),
);
}
}
这段代码创建了一个简单的应用,用户可以通过点击加号或减号按钮来增加或减少数字,也可以直接在输入框中输入数字。输入框会根据当前计数器的值进行初始化。
评论已关闭