Flutter 开发：TextField 常用属性的使用

2021 年 12 月 07 日
本文字数：2622 字
阅读完需：约 9 分钟

前言

在 flutter 开发过程中，掌握常用组件的使用是必备技能，flutter 常用的组件和 App 开发时候常用的控件基本一模一样，只是使用的方式不一样罢了。本篇博文分享一下 flutter 的文本输入框 TextField 组件的使用，该组件类似于 iOS 的 TextField 控件和 Android 的 EditText 控件，但是感觉 flutter 的文本输入框组件比 App 的文本输入框控件使用共简单一点，flutter 的 textfield 组件的常用属性以及使用方式如下所示。

示例

首先再来看一下 flutter 关于 textfield 的源码部分的使用介绍，如下所示：

  const TextField({
    Key key,
    this.controller,//编辑框的控制器
    this.focusNode,// 获取键盘焦点
    this.decoration = const InputDecoration(),//边框装饰，输入框的装饰器，用来修改外观
    TextInputType keyboardType,//设置输入键盘的类型
    this.textInputAction,// 键盘操作按钮的类型
    this.textCapitalization = TextCapitalization.none,// 设置大小写键盘
    this.style,//输入文本的样式
    this.strutStyle,
    this.textAlign = TextAlign.start,//输入的文本对齐方式
    this.textAlignVertical,
    this.textDirection,// 输入文字的排列方向
    this.readOnly = false, //是否为只读模式
    ToolbarOptions toolbarOptions,
    this.showCursor,
    this.autofocus = false, // 是否自动对焦校验
    this.obscureText = false,// 是否隐藏输入内容，eg:密码格式
    this.autocorrect = true,// 是否自动校正
    this.enableSuggestions = true,
    this.maxLines = 1,// 最大行数
    this.minLines,
    this.expands = false,
    this.maxLength,// 允许输入的最大字符个数
    this.maxLengthEnforced = true,// 是否允许超过输入最大长度，配合maxLength一起使用
    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.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection = true, // 长按是否显示[剪切、复制、粘贴菜单]弹框
    this.onTap,//点击输入框时的回调
    this.buildCounter,
    this.scrollController,
    this.scrollPhysics,
  })

复制代码

看了上面那么多属性，觉得 flutter 的 textfield 属性还是比较丰富的，所以在使用的时候要好好参考 API 的这些属性介绍，也没必要全部熟练掌握，只是要掌握常用的用法即可。本博文只介绍一部分常用属性，具体如下所示。

1、去掉 textfield 自带下划线背景

  TextField(
                decoration: InputDecoration(
                  border: InputBorder.none, // 去掉输入框的下滑线
),
),

复制代码

2、设置 textfield 输入框填充背景颜色

TextField(
decoration: InputDecoration(
fillColor: Colors.white, // 设置背景色
filled: true,), // 设置filled为true
),

复制代码

3、修改 textfield 的高度

一般方法：

new TextField(
          decoration: InputDecoration(
              contentPadding: EdgeInsets.only(left: 15.0, top: 5.0, right: 5.0, bottom: 5.0),
          ),
        )

复制代码

万能方法：

new ConstrainedBox(
constraints: BoxConstraints(
maxHeight: 20,
maxWidth: 210
),
child: new TextField(
decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(vertical: 4.0),
),
),

复制代码

4、设置 textfield 的边框圆角

TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide.none),
filled: true,
fillColor: Color(0xffaaaaaa), // 设置无色
),
),

复制代码

5、设置 textfield 提示文字的颜色

TextField(
     style: TextStyle(fontSize: 20),
     decoration: InputDecoration( //输入框修饰
        hintText: “请输入账号”,
        hintStyle: TextStyle(fontSize: 15.0, color: Color(0xff96A3B6)),//设置提示文字样式
     ),
),

复制代码

6、设置 textfield 左右位置的图标

            TextField(
                decoration: InputDecoration(
                  hintText: '请输入真实姓名',
                  hintStyle: TextStyle(
                      fontSize: 15.0, color: Color(0xff96A3B6)), //设置提示文字样式
                  contentPadding: EdgeInsets.only(
                      left: 15.0, top: 5.0, right: 5.0, bottom: 5.0),
                  border: InputBorder.none,
                  icon: Icon(Icons.person), //左侧图标
                  suffixIcon: Icon( //右侧图标
                    Icons.remove_red_eye,
                  ),
                ),
                style: new TextStyle(
                  fontSize: ScreenUtil.instance.setSp(10.0),
                  color: Color(0xFF3D3D3D),
                ),
                obscureText: true,
                controller: _passwordTextControl,
              ),

复制代码

最后

通过上文对在 Flutter 开发中 TextField 常用属性的使用，读者可以很好的掌握关于 TextField 使用详解，尤其是对于刚接触 Flutter 开发的开发者来说也是非常有用的知识点，因为 TextField 使用在 flutter 开发中也是非常常用的控件之一，这里不再赘述。

以上就是本章全部内容，欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”，三掌柜的新浪微博“三掌柜 666”，欢迎关注！

发布于: 2 小时前阅读数: 7

原文链接:【http://xie.infoq.cn/article/308221f068b5ac43d5a2066a8】。文章转载请联系作者。

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘，不一定有一分收获，但十分耕耘，一定会有一分收获！

评论 (1 条评论)

发布

三掌柜

12月日更、28 天写作计划第六天

2 小时前

 1 回复

没有更多了

创作场景

Flutter 开发：TextField 常用属性的使用

前言

示例

1、去掉 textfield 自带下划线背景

2、设置 textfield 输入框填充背景颜色

3、修改 textfield 的高度

4、设置 textfield 的边框圆角

5、设置 textfield 提示文字的颜色

6、设置 textfield 左右位置的图标

最后

三掌柜

评论 (1 条评论)