Material Widget库中提供了丰富的输入框(TextField
)及表单(Form
)Widget,下面我们分别进行介绍。
TextField
TextField
用于文本输入,它提供了很多属性,我们先简单介绍一下主要属性的作用,然后通过几个示例来演示一下关键属性的用法。
const TextField({
...
TextEditingController controller,
FocusNode focusNode,
InputDecoration decoration = const InputDecoration(),
TextInputType keyboardType,
TextInputAction textInputAction,
TextStyle style,
TextAlign textAlign = TextAlign.start,
bool autofocus = false,
bool obscureText = false,
int maxLines = 1,
int maxLength,
bool maxLengthEnforced = true,
ValueChanged<String> onChanged,
VoidCallback onEditingComplete,
ValueChanged<String> onSubmitted,
List<TextInputFormatter> inputFormatters,
bool enabled,
double cursorWidth = 2.0,
Radius cursorRadius,
Color cursorColor,
...
})
-
controller
:编辑框的控制器,通过它可以设置/获取编辑框的内容、选择编辑内容和监听编辑文本改变事件。大多数情况下我们都需要显式提供一个controller
来与文本框交互,如果没有提供controller
,则TextField
内部会自动创建一个。 -
focusNode
:用于控制TextField
是否占有当前键盘的输入焦点,它是我们和键盘交互的一个处理器(handle
)。 -
InputDecoration
:用于控制TextField
的外观显示,如提示文本、背景颜色以及边框等。 -
keyboardType
:用于设置该输入框默认的键盘输入类型,取值如下:TextInputType枚举值 含义 text 文本输入键盘 multiline 多行文本,需和maxLines配合使用(设为null或大于1) number 数字(会弹出数字键盘) phone 优化后的电话号码输入键盘(会弹出数字键盘并显示“* #”) datetime 优化后的日期输入键盘(Android上会显示“: -”) emailAddress 优化后的电子邮件地址(会显示“@ .”) url 优化后的url输入键盘(会显示“/ .”) -
textInputAction
:键盘动作按钮图标(即回车键位图标),它是一个枚举值,有多个可选值,全部的取值列表读者可以查看API文档,下面是当值为TextInputAction.search
时,原生Android系统下的键盘样式: -
style
正在编辑的文本样式。 -
textAlign
:输入框内编辑文本在水平方向的对齐方式。 -
autofocus
:是否自动获取焦点。 -
obscureText
:是否隐藏正在编辑的文本,用于输入密码的场景等,文本内容会用“•”替换。 -
maxLines
:输入框的最大行数,默认为1,如果为null
,则无行数限制。 -
maxLength
和maxLengthEnforced
:maxLength
代表输入框文本的最大长度,设置后输入框右下角会显示输入文本计数;maxLengthEnforced
决定当输入文本长度超过maxLength
时是否阻止输入,为true
时会阻止输入,为false
时不会阻止输入但输入框会变红。 -
onChanged
:输入框内容改变时的回调函数;注:内容改变事件也可以通过controller
来监听。 -
onEditingComplete
和onSubmitted
:这两个回调都是在输入框输入完成时触发,比如按了键盘上的完成键(✔图标)或搜索键(🔍图标)。不同的是两个回调签名不同,onSubmitted
回调是ValueChanged<String>
类型,它接收当前输入内容作为参数,而onEditingComplete
不接收参数。 -
inputFormatters
:用于指定输入格式;当用户输入内容改变时,会根据指定的格式来校验。 -
enable
:如果为false
,则输入框会被禁用,禁用状态不接收输入内容和事件,同时显示禁用状态样式(在其decoration
中定义)。 -
cursorWidth
、cursorRadius
和cursorColor
:这三个属性是用于自定义输入框光标宽度、圆角和颜色的。
示例:登录
布局
// LoginTextFieldApp
class LoginTextFieldApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "登录",
home: Scaffold(
appBar: AppBar(
title: Text("登录"),
),
body: LoginTextFieldRoute(),
),
);
}
}
// LoginTextFieldRoute
class LoginTextFieldRoute extends StatefulWidget {
@override
_LoginTextFeildRouteState createState() => _LoginTextFeildRouteState();
}
// _LoginTextFeildRouteState
class _LoginTextFeildRouteState extends State<LoginTextFieldRoute> {
@override
Widget build(BuildContext context){
return Column(
children: <Widget>[
TextField(
autofocus: true,
decoration: InputDecoration(
labelText: "用户名",
hintText: "手机号或邮箱",
prefixIcon: Icon(Icons.person)
),
),
TextField(
decoration: InputDecoration(
labelText: "密码",
hintText: "8-16位数字和字母组合的密码",
prefixIcon: Icon(Icons.lock)
),
obscureText: true,
)
],
);
}
}
运行效果图:
获取输入内容
从TextField
中获取输入内容有两种方式:
- 方式一:定义两个变量,用于保存用户名和密码,然后在
onChanged
触发时,各自保存一下输入内容。 - 方式二:通过
controller
直接获取。
第一种方式比较简单,不在举例,我们重点说说第二种方式:
- 创建一个
controller
:class _LoginTextFeildRouteState extends State<LoginTextFieldRoute> { TextEditingController _unameController = TextEditingController //...省略无关代码 }
- 给
TextField
输入框设置controller
:TextField( autofocus: true, //设置controller controller: _unameController, ... )
- 通过
controller
获取输入框内容:print("用户名:" + _unameController.text);
监听文本变化
监听文本变化有两种方式:
- 方式一:给
TextField
设置onChanged
回调:
TextField(
autofocus: true,
onChanged: (value) {
print("onChanged: $value");
}
)
- 方式二:通过
controller
监听
@override
void initState() {
//监听输入改变
_unameController.addListener((){
print(_unameController.text);
});
}
两种方式相比,onChanged
是专门用于监听文本变化的回调,而controller
的功能却多一些,它除了能监听文本变化,还可以设置默认值、选择文本,如:
- 创建一个
controller
:TextEditingController _selectionController = TextEditingController();
- 设置默认值,并从第三个字符开始选中后面的字符:
@override void initState() { //设置默认值 _selectionController.text = "Hello word"; //从第三个字符开始选中后面的字符 _selectionController.selection = TextSelection( baseOffset: 2, extentOffset: _selectionController.text.length, ); }
- 给
TextField
设置controller
:TextField( controller: _selectionController, )
- 运行效果:
控制焦点
焦点可以通过FocusNode
和FocusScopeNode
来控制,默认情况下,焦点由FocusScope
来管理,它代表焦点控制范围,在这个范围内可以通过FocusScopeNode
在输入框之间移动焦点、设置默认焦点等,我们可以通过FocusScope.of(context)
来获取Widget树中默认的FocusScopeNode
。下面看一个示例,在此示例中创建两个TextField
(第一个默认获取焦点),然后创建两个按钮:
- 点击第一个按钮可以将焦点从第一个
TextField
挪到第二个TextField
。 - 点击第二个按钮可以隐藏键盘。
代码如下:
// FocusTestApp
class FocusTestApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "焦点",
home: Scaffold(
appBar: AppBar(
title: Text("焦点"),
),
body: FocusTestRoute(),
),
);
}
}
// FocusTestRoute
class FocusTestRoute extends StatefulWidget {
@override
_FocusTestRouteState createState() => _FocusTestRouteState();
}
// _FocusTestRouteState
class _FocusTestRouteState extends State<FocusTestRoute> {
FocusNode focusNode1 = new FocusNode();
FocusNode focusNode2 = new FocusNode();
FocusScopeNode focusScopeNode;
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
TextField(
autofocus: true,
//关联focusNode1
focusNode: focusNode1,
decoration: InputDecoration(
labelText: "input1"
),
),
TextField(
//关联focusNode2
focusNode: focusNode2,
decoration: InputDecoration(
labelText: "input2"
),
),
Builder(builder: (ctx){
return Column(
children: <Widget>[
RaisedButton(
child: Text("移动焦点"),
onPressed: (){
//将焦点从第一个TextField移到第二个TextField
//第一种写法
//FocusScope.of(context).requestFocus(focusNode2);
//第二种写法
if(null == focusScopeNode) {
focusScopeNode = FocusScope.of(context);
}
focusScopeNode.requestFocus(focusNode2);
},
),
RaisedButton(
child: Text("隐藏键盘"),
onPressed: (){
//当所有编辑框都失去焦点时键盘就会收起
focusNode1.unfocus();
focusNode2.unfocus();
},
)
],
);
}),
],
),
);
}
}
FocusNode
和FocusScopeNode
还有一些其它的方法,详情可以查看API文档。
运行效果:
监听焦点状态改变事件
FocusNode
继承自ChangeNotifier
,通过FocusNode
可以监听焦点的改变事件,如:
...
// 创建 focusNode
FocusNode focusNode = new FocusNode();
...
// focusNode绑定输入框
TextField(focusNode: focusNode);
...
// 监听焦点变化
focusNode.addListener((){
print(focusNode.hasFocus);
});
获得焦点时focusNode.hasFocus
值为true
,失去焦点时为false
。
自定义样式
虽然我们可以通过decoration
属性来定义输入框样式,但是有一些样式如下划线默认颜色及宽度都是不能直接自定义的,下面的代码没有效果:
TextField(
...
decoration: InputDecoration(
border: UnderlineInputBorder(
//下面代码没有效果
borderSide: BorderSide(
color: Colors.red,
width: 5.0
)
),
prefixIcon: Icon(Icons.person)
),
),
之所以如此,是由于TextField
在绘制下划线时使用的颜色是主题色里面的hintColor
,只不过提示文本颜色也是用的hintColor
,所以如果直接修改hintColor
,那么下划线和提示文本的颜色都会改变,这并不是我们想要的,我们只想改变下划线的颜色。值得高兴的是,decoration
中可以设置hintStyle
,它可以覆盖hintColor
,并且Theme
主题中也可以通过inputDecorationTheme
来设置输入框默认的decoration
。
代码如下:
Theme(
data: Theme.of(context).copyWith(
hintColor: Colors.grey[200], //定义下划线颜色
inputDecorationTheme: InputDecorationTheme(
labelStyle: TextStyle(color: Colors.grey),//定义label字体样式
hintStyle: TextStyle(color: Colors.grey, fontSize: 14.0)//定义提示文本样式
)
),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: "用户名",
hintText: "手机号或邮箱",
prefixIcon: Icon(Icons.person)
),
),
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
labelText: "密码",
hintText: "8-16位数字和字母组合的密码",
//设置hintStyle
hintStyle: TextStyle(color: Colors.grey, fontSize: 13.0)
),
obscureText: true,
)
],
)
)
运行效果如下:
这样我们就成功的自定义了下划线颜色和提问文字样式,细心的读者可能已经发现,通过这种方式自定义后,输入框在获取焦点时,labelText
不会高亮显示了,正如上图中的“用户名”本应该显示蓝色,但现在却显示为灰色。接下来,我们看看如何修改下划线的宽度?有一种灵活的方式,那就是直接隐藏掉TextField
本身的下划线,然后通过Container
去嵌套定义样式。
代码如下:
Container(
child: TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Email",
hintText: "电子邮件地址",
prefixIcon: Icon(Icons.email),
border: InputBorder.none //隐藏下划线
)
),
decoration: BoxDecoration(
// 下滑线浅灰色,宽度1像素
border: Border(bottom: BorderSide(color: Colors.grey[200], width: 1.0))
),
)
运行效果如下:
通过这种组件组合的方式,还可以定义背景圆角等。一般来说,优先通过decoration
来自定义样式,如果decoration
实现不了,再用Widget组合的方式。
表单Form
实际业务中,在正式向服务器提交数据前,都会对各个输入框数据进行合法性校验,但是对每一个TextField
都分别进行校验将会是一个非常麻烦的事情。还有,如果用户想清除一组TextField
的内容,除了一个一个清除有没有什么更好的办法呢?为此,Flutter提供了一个Form
组件,它可以对输入框进行分组,然后进行一些统一操作,如输入内容校验、输入框重置以及输入内容保存。
Form
Form
继承自StatefulWidget
对象,它对应的状态类为FormState
。我们先看看Form
类的定义:
Form({
@required Widget child,
bool autovalidate = false,
WillPopCallback onWillPop,
VoidCallback onChanged,
})
autovalidate
:是否自动校验输入内容;当为true
时,每一个子FormField
内容发生变化时都会自动校验合法性,并直接显示错误信息。否则,需要通过调用FormState.validate()
来手动校验。onWillPop
:决定Form
所在的路由是否可以直接返回(如点击返回按钮),该回调返回一个Future
对象,如果Future
的最终结果是false
,则当前路由不会返回;如果为true
,则会返回到上一个路由。此属性通常用于拦截返回按钮。onChanged
:Form
的任意一个子FormField
内容发生变化时会触发此回调。
FormField
Form
的子孙元素必须是FormField
类型,FormField
是一个抽象类,它继承自StatefulWidget
对象,我们先看看FormField
类的部分定义:
const FormField({
...
FormFieldSetter<T> onSaved, //保存回调
FormFieldValidator<T> validator, //验证回调
T initialValue, //初始值
bool autovalidate = false, //是否自动校验。
})
为了方便使用,Flutter提供了一个TextFormField
组件,它继承自FormField
类,也是TextField
的一个封装类,所以除了FormField
定义的属性之外,它还包括了TextField
定义的属性。
FormState
FormState
为Form
的State
类,可以通过Form.of()
或GlobalKey
获得。我们可以通过它来对Form
的子孙FormField
进行统一操作。我们看看其常用的三个方法:
FormState.validate()
:调用此方法后,会调用Form
子孙FormField
的validator
回调,如果有一个校验失败,则返回false
,所有校验失败项都会给用户返回错误提示。FormState.save()
:调用此方法后,会调用Form
子孙FormField
的onSaved
回调,用于保存保存表单内容。FormState.reset()
:调用此方法后,会将子孙FormField
的内容清空。
示例
我们修改一下上面用户登录的示例,在提交之前校验:
- 用户名不能为空,如果为空则提示“用户名不能为空”。
- 密码不能少于6位,如果少于6位则提示“密码不能少于6位”。
完整代码如下:
// FormTestApp
class FormTestApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Form",
home: Scaffold(
appBar: AppBar(
title: Text("Form"),
),
body: FormTestRoute(),
),
);
}
}
// FormTestRoute
class FormTestRoute extends StatefulWidget {
@override
FormTestRouteState createState() => FormTestRouteState();
}
// FormTestRouteState
class FormTestRouteState extends State<FormTestRoute> {
TextEditingController _unameController = TextEditingController();
TextEditingController _pwdController = TextEditingController();
GlobalKey _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 24.0),
child: Form(
key: _formKey, //设置GlobalKey,用于后面获取FormState
autovalidate: true, //开启自动校验
child: Column(
children: <Widget>[
TextFormField(
autofocus: true,
controller: _unameController,
decoration: InputDecoration(
labelText: "用户名",
hintText: "手机号或邮箱",
icon: Icon(Icons.person),
),
//校验用户名
validator: (value) {
return value.trim().length > 0 ? null : "用户名不能为空";
},
),
TextFormField(
controller: _pwdController,
decoration: InputDecoration(
labelText: "密码",
hintText: "请输入6位及以上的字母或数字",
icon: Icon(Icons.lock),
),
obscureText: true,
//校验密码
validator: (value){
return value.trim().length > 5 ? null : "密码不能少于6位";
},
),
//登录按钮
Padding(
padding: const EdgeInsets.only(top: 28.0),
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
padding: const EdgeInsets.all(15.0),
child: Text("登录"),
color: Theme.of(context).primaryColor,
textColor: Colors.white,
onPressed: () => {
//在这里不能通过此方式获取FormState,context不对
//print(Form.of(context));
//通过_formKey.currentState获取FormState后,
//调用validate()方法校验用户名、密码是否合法,
//校验通过后再提交数据。
if((_formKey.currentState as FormState).validate()) {
//验证通过提交数据
}else {
//清空TextFormField内容
//(_formKey.currentState as FormState).reset(),
}
},
),
),
],
),
),
],
),
),
);
}
}
运行效果如下:
注意:登录按钮的onPressed
方法中不能通过Form.of(context)
来获取FormState
,原因是,此处的context
为FormTestRoute
的context
,因为Form.of(context)
是根据所指定context
向根去查找的,而FormState
是在FormTestRoute
的子树中,所以不行。正确的做法是通过Builder
来构建登录按钮,Builder
会将widget
节点的context
作为回调参数:
Expanded(
//通过Builder来获取RaisedButton所在widget树的真正context(Element)
child:Builder(builder: (context){
return RaisedButton(
...
onPressed: () {
//由于本widget也是Form的子代widget,所以可以通过下面方式获取FormState
if(Form.of(context).validate()){
//验证通过提交数据
}
},
);
})
)
其实context
正是操作Widget所对应的Element
的一个接口,由于Widget树对应的Element
都是不同的,所以context
也都是不同的,有关context
的更多内容会在后续进行讲解。Flutter中有很多of(context)
这种方法,读者在使用时一定要注意context
是否正确。