先来看下TextField的构造方法
TextFormField的属性参考TextField
const TextField({
Key key,
//控制正在编辑的文本。通过其可以拿到输入的文本值
//获取方式 String value=controller.text
this.controller, ////控制器，控制TextField文字
//控制此小部件是否具有键盘焦点。
this.focusNode,
//给TextField设置装饰（形状等）
this.decoration = const InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.transparent)
),
//输入内容距离上下左右的距离 ，可通过这个属性来控制 TextField的高度
contentPadding: EdgeInsets.all(10.0),
fillColor: Colors.white, filled: true,
// labelText: 'Hello',
// 以下属性可用来去除TextField的边框
disabledBorder: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
), //输入器装饰
TextInputType keyboardType, ////输入的类型 TextInputType.text
//控制键盘的功能键 指enter键，比如此处设置为next时，enter键
//显示的文字内容为 下一步
this.textInputAction, //TextInputAction.next
//键盘大小写的显示 Only supports text keyboards 但是好像不起作用？
//characters 默认为每个字符使用大写键盘
//sentence 默认为每个句子的第一个字母使用大写键盘
//word 默认为每个单词的第一个字母使用大写键盘。
//none 默认使用小写
this.textCapitalization = TextCapitalization.none,
this.style,
this.textAlign = TextAlign.start, //文字显示位置
this.autofocus = false, //是否自动获得焦点
this.obscureText = false, //是否是密码
this.autocorrect = true, //是否自动更正
this.maxLines = 1,
//最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
//这种情况一般是不符合我们设计的要求的，但是有需要限制其输入的位数
// 这时候我们可以使用下方的属性来限制
this.maxLength,
// 跟最大长度限制对应，如果此属性设置为false,当输入超过最大长度
// 限制时，依然会显示输入的内容，为true不会（默认为 true）
this.maxLengthEnforced = true,
// 限制输入的 最大长度 TextField右下角没有输入数量的统计字符串
this.inputFormatters: [LengthLimitingTextInputFormatter(11)],
//允许的输入格式 下方的模式指只允许输入数字
this.inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
this.onChanged, //内容改变的回调
this.onEditingComplete, //按回车时调用
this.onSubmitted, //内容提交(按回车)的回调
this.enabled,
//光标宽度
this.cursorWidth = 2.0,
this.cursorRadius, //光标圆角弧度
//光标颜色
this.cursorColor,
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
})
[图片上传失败...(image-27633a-1564021272772)]
通过上面的构造方法跟预览效果图，熟悉android开发的小伙伴们是不是有种似曾相识的感觉，Flutter的TextField跟原生Android中的EditText用法包括部分属性名几乎都是一样的，比如我们可以通过keyboardType来指定唤起软件盘时的输入方式，例如上图的两个输入框属性设置：
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(new MaterialApp(home: new PullToRefreshDemo()));
}
class PullToRefreshDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("文本输入"),
),
body: new Center(
child: new Column(
children: <Widget>[
new Text("简单文本输入框",style: new TextStyle(fontSize: 20.0)),
new TextField(keyboardType: TextInputType.text,), //指定输入方式为文本输入
new TextField(keyboardType: TextInputType.number,),//指定唤起软键盘时默认显示数字键盘
],
)),
);
}
}
通过上面的构造方法我们留意到TextField给我提供了onChanged、onSubmitted、OnEditingComplete回调方法帮助我们监听输入框的内容变化、编辑提交、编辑完成等事件，我们给输入框绑定上述监听方法做下测试：
new TextField(
onSubmitted: (value){
print("------------文字提交触发（键盘按键）--");
},
onEditingComplete: (){
print("----------------编辑完成---");
},
onChanged: (value){
print("----------------输入框中内容为:$value--");
},
keyboardType: TextInputType.text,
),
唤起软键盘后在输入框中输入123456，log控制台打印出：
image.png
到此对输入框的基本使用你已经完全get到了，但是现实开发过程中，可能我们会需要给输入框指定一些辅助性的说明内容，比如输入框未输入内容时添加hint提示，或者在输入框的旁边添加Icon指示，或者输入框内部文字的显示样式、背景色等等，这些辅助性的设置在Flutter中统一有一个叫做InputDecoration的装饰器来完成操作，我们先来看下InputDecoration的构造方法，然后来简单尝试下几个日常开发中常用的操作。
const InputDecoration({
this.icon, //输入框左侧添加个图标
this.labelText,//输入框获取焦点/有内容 会移动到左上角，否则在输入框内labelTex的位置
this.labelStyle,
this.helperText,
this.helperStyle,
this.hintText, //未输入文字时，输入框中的提示文字
this.hintStyle,
this.errorText,
this.errorStyle,
this.errorMaxLines,
this.isDense,
this.contentPadding,
this.prefixIcon, //输入框内侧左面的控件
this.prefix,
this.prefixText,
this.prefixStyle,
this.suffixIcon,//输入框内侧右面的图标
this.suffix,
this.suffixText,
this.suffixStyle,
this.counterText,
this.counterStyle,
this.filled,
this.fillColor,
this.errorBorder,
this.focusedBorder,
this.focusedErrorBorder,
this.disabledBorder,
this.enabledBorder,
this.border, //增加一个边框
this.enabled = true,
this.semanticCounterText,
})
image.png
给输入框添加输入辅助性输入说明：
body: new Center(
child: new TextField(
decoration: new InputDecoration(
labelText: "请输入内容",//输入框内无文字时提示内容，有内容时会自动浮在内容上方
helperText: "随便输入文字或数字", //输入框底部辅助性说明文字
prefixIcon: new Icon(Icons.print), //输入框左边图标
suffixIcon: new Icon(Icons.picture_as_pdf), //输入框右边图片
contentPadding: const EdgeInsets.only(bottom:15.0)),
keyboardType: TextInputType.number,
),
));
image.png
通过给InputDecoration设置border给输入框添加边框：
body: new Center(
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder( //添加边框
gapPadding: 10.0,
borderRadius: BorderRadius.circular(20.0),
),
prefixIcon: new Icon(Icons.print),
contentPadding: const EdgeInsets.all(15.0)),
keyboardType: TextInputType.number,
),
));
image.png
其他样式跟属性读者可自行运行体验，我就不逐一列举说明了，总之参考文档再结合原生开发的经验去使用TextField还是比较简单的。下面我分享一个完整的登录UI的例子供大家参考：
image.png
完整代码：
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyApp()));
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new MyAppState();
}
}
class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
TextEditingController _userPhoneController = new TextEditingController();
TextEditingController _userPasswordController = new TextEditingController();
/**
* 清空输入框内容
*/
void onTextClear() {
setState(() {
_userPhoneController.text = "";
_userPasswordController.text = "";
});
}
return new Scaffold(
appBar: new AppBar(
title: new Text("登录"),
),
body: new Column(
children: <Widget>[
new TextField(
controller: _userPhoneController,
keyboardType: TextInputType.number,
decoration: new InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
icon: new Icon(Icons.phone),
labelText: "请输入手机号",
helperText: "注册时填写的手机号"),
onChanged: (String str) {
//onChanged是每次输入框内每次文字变更触发的回调
print('手机号为：$str----------');
},
onSubmitted: (String str) {
//onSubmitted是用户提交而触发的回调{当用户点击提交按钮（输入法回车键）}
print('最终手机号为:$str---------------');
},
),
new TextField(
controller: _userPasswordController,
keyboardType: TextInputType.text,
decoration: new InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
icon: new Icon(Icons.nature_people),
labelText: "请输入名字",
// hintText: "fdsfdss",
helperText: "注册名字"),
),
new Builder(builder: (BuildContext context) {
return new RaisedButton(
onPressed: () {
if (_userPasswordController.text.toString() == "10086" &&
_userPhoneController.text.toString() == "10086") {
Scaffold.of(context)
.showSnackBar(new SnackBar(content: new Text("校验通过")));
} else {
Scaffold.of(context)
.showSnackBar(new SnackBar(content: new Text("校验有问题，请重新输入")));
onTextClear(); //情况输入内容，让用户重新输入
}
},
color: Colors.blue,
highlightColor: Colors.deepPurple,
disabledColor: Colors.cyan,
child: new Text(
"登录",
style: new TextStyle(color: Colors.white),
),
);
})
],
));
}
}
