TextField常用属性值 | 含义 |
---|---|
maxLength | 最大长度,设置此项会让TextField右下角有一个输入数量的统计字符串 |
maxLines | 最大行数 |
autocorrect | 是否自动更正 |
autofocus | 是否自动对焦 |
obscureText | 是否是密码 |
textAlign | 文本对齐方式,与Text的textAlign属性含义一致 |
style | 输入文本的样式 |
inputFormatters | 允许的输入格式 |
onChanged | 内容改变的回调 |
onSubmitted | 内容提交(按回车)的回调 |
enabled | 是否禁用 |
示例
TextField(
maxLength: 30,//最大长度,设置此项会让TextField右下角有一个输入数量的统计字符串
maxLines: 1,//最大行数
autocorrect: true,//是否自动更正
autofocus: true,//是否自动对焦
obscureText: true,//是否是密码
textAlign: TextAlign.center,//文本对齐方式
style: TextStyle(fontSize: 30.0, color: Colors.blue),//输入文本的样式
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],//允许的输入格式
onChanged: (text) {//内容改变的回调
print('change $text');
},
onSubmitted: (text) {//内容提交(按回车)的回调
print('submit $text');
},
enabled: true,//是否禁用
),
(图一)TextFeild常用属性赋值示例
最简易的TextFeild不包含提示文本。
new TextField(
//最普通的TextField,没有任何提示
),
(图二)TextFeild简易示例
new TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
icon: Icon(Icons.text_fields),
labelText: '这里是提示文案',
helperText: '这是文本框内提示文案',
),
onChanged: _textFieldChanged,
autofocus: false,
),
void _textFieldChanged(String str) {
print(str);
}
(图三)TextFeild包含提示文案示例
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class TextFieldDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return TextFieldDemoState();
}
}
class TextFieldDemoState extends State<TextFieldDemo> {
//手机号的控制器
TextEditingController phoneController = TextEditingController();
//密码的控制器
TextEditingController passController = TextEditingController();
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("文本输入控件"),
),
body: new Column(
children: <Widget>[
new Text(
"下面是登录演示",
style: new TextStyle(
color: const Color(0xffff9900),
decoration: TextDecoration.underline,
decorationColor: const Color(0xffff9900),
fontSize: 21.0),
),
TextField(
controller: phoneController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
icon: Icon(Icons.phone),
labelText: '请输入用户名)',
helperText: '请输入11位手机号',
),
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 main() {
runApp(new MaterialApp(
title: "输入控件案例",
theme: new ThemeData(primaryColor: Colors.deepOrangeAccent),
home: new TextFieldDemo(),
));
}
(图四)TextFeild登录示例
控制输入的键盘类型。
keyboardType属性值 | 含义 |
---|---|
TextInputType.text | 普通完整键盘。 |
TextInputType.number | 数字键盘。 |
TextInputType.emailAddress | 带有“@”的普通键盘。 |
TextInputType.datetime | 带有“/”和“:”的数字键盘。 |
TextInputType.multiline | 带有选项以启用有符号和十进制模式的数字键盘。 |
示例
TextField(
keyboardType: TextInputType.number,
),
TextField提供了一些有关如何使用户输入中的字母大写的选项。
textCapitalization属性值 | 含义 |
---|---|
TextCapitalization.sentences | 这是我们期望的正常类型的大写,每个句子的首字母大写。 |
TextCapitalization.characters | 大写句子中的所有字符。 |
TextCapitalization.words | 将每个单词的首字母大写。 |
TextCapitalization.none | 不做转换。 |
示例
TextField(
textCapitalization: TextCapitalization.sentences,
),
可以直接从TextField小部件自定义游标。
可以更改角落的光标颜色,宽度和半径。 例如,这里我没有明显的原因制作一个圆形的红色光标。
属性值 | 含义 |
---|---|
cursorColor | 光标颜色 |
cursorRadius | 光标圆角 |
cursorWidth | 光标宽度 |
示例
TextField(
cursorColor: Colors.red,
cursorRadius: Radius.circular(16.0),
cursorWidth: 16.0,
),
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有