Flutter TextField(文本输入)

TextField 是一个文本输入组件,类似 Web 上的 Input。

new TextField(
    decoration: const InputDecoration(
        hintText: '帐号/邮箱',
        contentPadding: const EdgeInsets.all(10.0),
    ),
    // 当 value 改变的时候,触发
    onChanged: (val) {
        print(val);
    }
),

TextField 有以下常用属性:

  • autocorrect → bool - 是否启用自动更正。
  • autofocus → bool - 是否是自动获取焦点。
  • controller → TextEditingController - 控制正在编辑的文本。
  • decoration → InputDecoration - TextField 的外形描述。
  • enabled → bool - 是否禁用。
  • focusNode → FocusNode - 是否具有键盘焦点。
  • inputFormatters → List<textinputformatter style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: none; box-sizing: border-box;"></textinputformatter> - 可选的,输入验证和格式化。
  • keyboardType → TextInputType - 用于编辑文本的键盘类型。
  • maxLength → int - 文本最大的字符串长度。
  • maxLengthEnforced → bool - 如果为true,则防止字段允许超过 maxLength 字符。
  • maxLines → int - 文本最大行数,默认为 1。多行时应该设置为 > 1。
  • obscureText → bool - 是否是隐藏文本(密码形式)。
  • onChanged → ValueChanged - 当 value 改变时触发。
  • onSubmitted → ValueChanged - 当用户点击键盘的提交时触发。
  • style → TextStyle - 文本样式,颜色,字体等。
  • textAlign → TextAlign - 设置文本对齐方式。

双向数据绑定

通常需要把 TextField 的数据绑定到组件的状态里,那么在 Flutter 里如何实现呢?那就是使用 controller。

new TextField(
    controller: new TextEditingController(text: this.id),
    decoration: const InputDecoration(
        hintText: '帐号/邮箱',
        contentPadding: const EdgeInsets.all(10.0),
    ),
    onChanged: (val) {
        this.setState(() {
            this.id = val;
        });
    },
),
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,025评论 3 119
  • WorldTrotter 看起来不错,但到目前为止它并没有做任何事情。 在本章中,您将向 WorldTrotter...
    titvax阅读 707评论 0 0
  • 我身边的好少年 “陈小凯,刘欣怡两位同学,为山区小朋友捐献了100元爱心包裹,特此表扬...
    舒扬飞飞阅读 457评论 0 1
  • 一天又过去了。想想今天也没做什么事情。上午混来混去我姑娘的觉也没睡上。昨天给非妹买了滑梯,前天买了羽绒服,买了保暖...
    非妹麻麻阅读 218评论 0 0
  • (叔丁) 傍晚从游泳池出来看了看计步器,才三千多步,跟先生嘀咕说:今天步数不够,晚上得再走走。最近公司加入一个全球...
    叔丁阅读 896评论 4 12