Flutter TextField(输入控件)
1、常用属性值及含义
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常用属性赋值示例
2、普通输入文本
最简易的TextFeild不包含提示文本。
new TextField(
//最普通的TextField,没有任何提示
),
(图二)TextFeild简易示例
3、包含提示文案的输入文本
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包含提示文案示例
4、登录示例
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登录示例
5、其他功能
5.1 keyboardType 键盘类型
控制输入的键盘类型。
keyboardType属性值 |
含义 |
---|---|
TextInputType.text |
普通完整键盘。 |
TextInputType.number |
数字键盘。 |
TextInputType.emailAddress |
带有“@”的普通键盘。 |
TextInputType.datetime |
带有“/”和“:”的数字键盘。 |
TextInputType.multiline |
带有选项以启用有符号和十进制模式的数字键盘。 |
示例
TextField(
keyboardType: TextInputType.number,
),
5.2 textCapitalization 字母大写
TextField提供了一些有关如何使用户输入中的字母大写的选项。
textCapitalization属性值 |
含义 |
---|---|
TextCapitalization.sentences |
这是我们期望的正常类型的大写,每个句子的首字母大写。 |
TextCapitalization.characters |
大写句子中的所有字符。 |
TextCapitalization.words |
将每个单词的首字母大写。 |
TextCapitalization.none |
不做转换。 |
示例
TextField(
textCapitalization: TextCapitalization.sentences,
),
5.3 更改TextField中的光标
可以直接从TextField小部件自定义游标。
可以更改角落的光标颜色,宽度和半径。 例如,这里我没有明显的原因制作一个圆形的红色光标。
属性值 |
含义 |
---|---|
cursorColor |
光标颜色 |
cursorRadius |
光标圆角 |
cursorWidth |
光标宽度 |
示例
TextField(
cursorColor: Colors.red,
cursorRadius: Radius.circular(16.0),
cursorWidth: 16.0,
),
- VIM常见用法总结
- Spring Cloud构建微服务架构:服务消费者
- android微信登录,分享
- 注册会计师带你用Python进行探索性风险分析(二)
- Android监听自身卸载,弹出用户反馈调查
- Spring Boot 1.5.x新特性:动态修改日志级别
- XMPP客户端库Smack 4.0.6版开发之二
- Spring Cloud实战小贴士:版本依赖关系
- 如何优雅的用Python做接口自动化测试
- 忘记oracle的sys用户密码怎么修改以及Oracle 11g 默认用户名和密码
- hibernate链接数据库链接池c3p0配置
- Oracle中session和processes的设置
- ssh相关原理学习与常见错误总结
- PyQt5 GUI应用程序工具包入门(1)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL组复制(MGR)全解析 Part 8 多主模式部署指南
- MySQL组复制(MGR)全解析 Part 9 MGR的要求和限制
- MySQL Galera Cluster全解析 Part 3 状态快照传输(SST)
- 一口气搞懂「文件系统」,就靠这 25 张图了
- Oracle ASM 环境增加控制文件
- 利用注解进行 Spring 开发
- 40张图揭秘,「键入网址发生了什么」
- Spring 代理模式知多少
- 一条SQL引发的“血案”:与SQL优化相关的4个案例
- Mycat分库分表全解析 Part 3 Mycat的安装
- Oracle非图形化界面创建数据库
- Mycat分库分表全解析 Part 5 Mycat 分片规则介绍
- PHP 命名空间与类自动加载实现
- mysqldump命令详解 Part 3-备份单表
- mysqldump命令详解 Part 7- -single-transaction 参数的使用