- 第1节:Flutter Windows安装
- 第2节:Flutter MacOS安装
- 第3节:Flutter Linux安装
- 第4节:Flutter 配置编辑器
- 第5节:Flutter 编写第一个Flutter应用
- 第6节:Flutter Widget框架概述
- 第7节:Flutter Widget目录
- 第8节:Flutter 构建布局
- 第9节:Flutter 布局方法
- 第10节:Flutter 布局多个widgets
- 第11节:Flutter 常用布局widgets
- 第12节:Flutter 添加交互
- 第13节:Flutter 手势
- 第14节:Flutter 动画
- 第15节:Flutter 自定义字体
- 第16节:Flutter 盒约束
- 第17节:Flutter 资源和图片
- 第18节:Flutter 文本输入
- 第19节:Flutter 路由和导航
- 第20节:Flutter 国际化
- 第21节:Flutter 使用 packages
- 第22节:Flutter 开发 packages
- 第23节:Flutter 平台特定的代码
- 第24节:Flutter 文件读写
- 第25节:Flutter 网络和Http
- 第26节:Flutter JSON和序列化
- 第27节:Flutter 使用 Flutter IDE
- 第28节:Flutter 使用热重载
- 第29节:Flutter 测试应用
- 第30节:Flutter 调试应用
- 第31节:Flutter 检查用户界面
- 第32节:Flutter Android构建发布
- 第33节:Flutter iOS构建发布
- 第34节:Flutter 升级安装
- 第35节:Flutter 格式化代码
Flutter 文本输入
介绍
本页面介绍如何在Flutter应用程序中输入文本
选择一个widget
TextField 是最常用的文本输入widget.
默认情况下,TextField有一个下划线装饰(decoration)。您可以通过提供给decoration属性设置一个InputDecoration来添加一个标签、一个图标、提示文字和错误文本。 要完全删除装饰(包括下划线和为标签保留的空间),将decoration明确设置为空即可。
TextFormField包裹一个TextField 并将其集成在Form中。你要提供一个验证函数来检查用户的输入是否满足一定的约束(例如,一个电话号码)或当你想将TextField与其他FormField集成时,使用TextFormField。
获取用户输入
有两种获取用户输入的主要方法:
- 处理 onChanged回调
- 提供一个TextEditingController.
onChanged
每当用户输入时,TextField会调用它的onChanged回调。 您可以处理此回调以查看用户输入的内容。例如,如果您正在输入搜索字段,则可能需要在用户输入时更新搜索结果。
TextEditingController
一个更强大(但更精细)的方法是提供一个TextEditingController作为TextField的controller属性。 在用户输入时,controller的text和selection属性不断的更新。要在这些属性更改时得到通知,请使用controller的addListener方法监听控制器 。 (如果你添加了一个监听器,记得在你的State对象的dispose方法中删除监听器 )。
该TextEditingController还可以让您控制TextField的内容。如果修改controller的text或selection的属性,TextField将更新,以显示修改后的文本或选中区间。 例如,您可以使用此功能来实现推荐内容的自动补全。
例子
以下是使用一个TextEditingController读取TextField中用户输入的值的示例:
/// Opens an [AlertDialog] showing what the user typed.
class ExampleWidget extends StatefulWidget {
ExampleWidget({Key key}) : super(key: key);
@override
_ExampleWidgetState createState() => new _ExampleWidgetState();
}
/// State for [ExampleWidget] widgets.
class _ExampleWidgetState extends State<ExampleWidget> {
final TextEditingController _controller = new TextEditingController();
@override
Widget build(BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something',
),
),
new RaisedButton(
onPressed: () {
showDialog(
context: context,
child: new AlertDialog(
title: new Text('What you typed'),
content: new Text(_controller.text),
),
);
},
child: new Text('DONE'),
),
],
);
}
}