学习flutter的时候做的笔记,方便以后查看。
flutter的文本输入框TextField组件,类似于iOS的TextField控件和Android的EditText控件。
1、基本使用。
TextField(),
2、输入框的装饰,定义输入框的边框、背景、提示文本等样式。
decoration: InputDecoration(
//圆角边框
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(50)), //圆角大小调制,不调为默认的大小
),
//去掉下划线
border:InputBorder.none,
//
border:OutlineInputBorder,
//filled为true时,输入框将会被fillColor填充
filled: true,
fillColor: Colors.grey[200],
hintText: "请输入内容",//提示文字
hintStyle: TextStyle(color: Colors.grey[200]),//提示文字颜色
contentPadding: EdgeInsets.all(0),// contentPadding和border的设置是为了让TextField内容实现上下居中
prefixIcon:const Icon(Icons.phone),//输入框左侧内加图标
icon: Icon(Icons.person),//输入框左侧外加图标
suffixIcon: IconButton(icon: Icon(Icons.phone), onPressed: () {})),//输入框右侧内加图标
),
3、控制输入框的文本是否隐藏,常用于密码输入框。当设置为true时,输入的文本将以圆点或其他隐藏字符显示。
obscureText: false,
4、输入框是否可编辑,当设置为false时,输入框将变为只读状态。
enabled: true,
5、限制输入框可输入的最大字符数。
maxLength: 5,
其他限制输入值方式:
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp("[a-zA-Z]")),//只允许输入字母
FilteringTextInputFormatter.allow(RegExp("[0-9.]")),//只允许输入小数
FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),//设置只允许输入数字
FilteringTextInputFormatter.digitsOnly,//设置只允许输入数字
LengthLimitingTextInputFormatter(6)//限制长度
],
6、指定键盘操作按钮的类型,例如完成、继续等。控制键盘上右下角按钮的标签和功能。
textInputAction: TextInputAction.search
7、指定键盘的类型,例如只能输入文本、数字、URL等。
keyboardType: TextInputType.number,
8、定义输入框文本的样式,如字体大小、颜色等。
style: const TextStyle(
fontSize: 16.0,
color: Colors.red,
),
9、onChanged在输入框文本发生变化时被调用
onChanged: (value) {
//在输入框文本发生变化时被调用
},
10、用户提交输入时被调用
onSubmitted: (value) {
//用户提交输入时被调用
},
11、控制输入框的文本内容
final TextEditingController _textController = TextEditingController();
@override
void initState() {
super.initState();
//初始值,光标依然在最后面
_textController.text = "widget.name";
//在需要用到输入值的地方,直接用 _textController.text 获取
_textController.addListener(() {
//这里可以写一些需要的逻辑
print("controller的监听方法:"+_textController.text);
});
}
TextField(
controller: _textController,
)