Flutter之TextField的基本使用

439 阅读2分钟

学习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,

)