flutter: 获取用户输入

最新推荐文章于 2023-09-04 11:15:09 发布

小公鸡卡哇伊呀~

最新推荐文章于 2023-09-04 11:15:09 发布

阅读量595

点赞数

文章标签： flutter

本文链接：https://blog.csdn.net/ftell/article/details/126283052

版权

输入界面由两个 TextField 和一个 button组成:

在这里插入图片描述
获得输入有两种方法

1 用户每次按键，获得输入

相应code：

class MyHomePage extends StatelessWidget {
	String titleInput;
	String amountInput;
	TextField(
		decoration: InputDecoration(labelText: 'Title'),  //  placeholder
		onChanged: (val) {
			titleInput = val;
		},
	),
	TextField(
		decoration: InputDecoration(labelText: 'Amount'),   //  placeholder
		onChanged: (val) => amountInput = val),
	FlatButton(
		child: Text('Add Transaction'),
		onPressed: () {
			print(amountInput);
			print(titleInput);
		},
		textColor: Colors.purple
	),

2 用户点击提交按钮，获得输入

相应code：

class MyHomePage extends StatelessWidget {
	final titleController = TextEditingController();
	final amountController = TextEditingController();
	TextField(
		decoration: InputDecoration(labelText: 'Title'),
		controller: titleController,
	),
	TextField(
		decoration: InputDecoration(labelText: 'Amount'),
		controller: amountController,
	),
	FlatButton(
		child: Text('Add Transaction'),
		onPressed: () {
			print(titleController.text);
		},
		textColor: Colors.purple,
	),