————————基本等价于Android中EditText,其中属性都有很多一致
1.属性
const TextField({
Key key,
this.controller, // 控制正在编辑文本
this.focusNode, // 获取键盘焦点
this.decoration = const InputDecoration(), // 边框装饰
TextInputType keyboardType, // 键盘类型
this.textInputAction, // 键盘的操作按钮类型
this.textCapitalization = TextCapitalization.none, // 配置大小写键盘
this.style, // 输入文本样式
this.textAlign = TextAlign.start, // 对齐方式
this.textDirection, // 文本方向
this.autofocus = false, // 是否自动对焦
this.obscureText = false, // 是否隐藏内容,例如密码格式
this.autocorrect = true, // 是否自动校正
this.maxLines = 1, // 最大行数
this.maxLength, // 允许输入的最大长度
this.maxLengthEnforced = true, // 是否允许超过输入最大长度
this.onChanged, // 文本内容变更时回调
this.onEditingComplete, // 提交内容时回调
this.onSubmitted, // 用户提示完成时回调
this.inputFormatters, // 验证及格式
this.enabled, // 是否不可点击
this.cursorWidth = 2.0, // 光标宽度
this.cursorRadius, // 光标圆角弧度
this.cursorColor, // 光标颜色
this.keyboardAppearance, // 键盘亮度
this.scrollPadding = const EdgeInsets.all(20.0), // 滚动到视图中时,填充边距
this.enableInteractiveSelection, // 长按是否展示【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】
this.onTap, // 点击时回调
})
——————重要属性
decoration ——————装饰器,可以修改样式,padding,调整文字位置,提示文字,icon、标签文字等。
我们给上面的代码新增decoration属性
keyboardType ——————键盘输入类型(除了隐藏密码不能做到)
keyboardType: TextInputType.visiblePassword, 显示密码
obscureText——————密码和普通文本框,maxLine必须1,否则报错
textAlign ——————文字对齐方式
maxLines ——————多行
maxLength——————最多多少文字
onChanged ——————文字改变时回调
autofocus: true——————自动对焦,第一次进来就弹起键盘
onEditingComplete ————点击键盘按钮确认时触发
onSubmitted, //同样是点击键盘完成按钮时触发的回调,该回调有参数,参数即为当前输入框中的值。(String)
textInputAction ————修改键盘右小角按钮文字或图标(textInputAction: TextInputAction.go,)
class TextDemo extends StatelessWidget {
const TextDemo({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
TextField(),
SizedBox(height: 20),
TextField(
decoration: InputDecoration(
hintText: "请输入搜索的内容", border: OutlineInputBorder()),
),
SizedBox(height: 20),
TextField(
maxLines: 4,
decoration: InputDecoration(
hintText: "多行文本框", border: OutlineInputBorder()),
),
SizedBox(height: 20),
TextField(
obscureText: true,
decoration:
InputDecoration(hintText: "密码框", border: OutlineInputBorder()),
),
SizedBox(height: 20),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: "用户名")),
SizedBox(height: 20),
TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: "密码",
// labelStyle: TextStyle()
)),
SizedBox(height: 20),
TextField(
decoration: InputDecoration(
icon: Icon(Icons.people), hintText: "请输入用户名")),
],
),
);
}
}
案例:实现登录
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: TextFieldAndCheckPage(),
));
}
}
class TextFieldAndCheckPage extends StatefulWidget {
@override
State createState() => TextFieldAndCheckPageState();
}
class TextFieldAndCheckPageState extends State {
//手机号的控制器
TextEditingController phoneController = TextEditingController();
//密码的控制器
TextEditingController passController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('输入和选择'),
),
body: Column(
children: [
TextField(
controller: phoneController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
icon: Icon(Icons.phone),
labelText: '请输入你的用户名)',
helperText: '请输入注册的手机号',
),
autofocus: false,
),
TextField(
controller: passController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
icon: Icon(Icons.lock),
labelText: '请输入密码)',
),
obscureText: true),
RaisedButton(
onPressed: _login,
child: Text('登录'),
),
],
),
);
}
void _login() {
print({'phone': phoneController.text, 'password': passController.text});
if (phoneController.text.length != 11) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('手机号码格式不对'),
));
} else if (passController.text.length == 0) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('请填写密码'),
));
} else {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('登录成功'),
));
phoneController.clear();
}
}
void onTextClear() {
setState(() {
phoneController.clear();
passController.clear();
});
}
}