Flutter中文本输入框TexeFieldr键盘样式TextInputType总结TexeField设置不可编辑

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

TextField 系列文章


TextField 简介

一句话来讲,TextField是在flutter应用开发中用于 用户输入文本框。

TextField 文本输入框

1最简单的使用

//这会创建一个基础TextField 默认带一个下划线
TextField() 

在这里插入图片描述

2 TextField 常用属性配制

在这里插入图片描述

  Widget buildTextFeild2(){
    return  TextField(
      /**
       * TextCapitalization.sentences  这是最常见的大写化类型,每个句子的第一个字母被转换成大写。
       * TextCapitalization.characters  大写句子中的所有字符。
       * TextCapitalization.words 对每个单词首字母大写。
       */
      textCapitalization: TextCapitalization.sentences,
      ///光标的颜色
      cursorColor: Colors.red,
      ///设置光标的 四个角的弧度
      cursorRadius: Radius.circular(10),
      ///设置光标的宽度
      cursorWidth: 6,
      ///设置键盘的类型
      keyboardType: TextInputType.phone,
      ///键盘回车键的样式
      textInputAction: TextInputAction.next,
      ///设置输入框是否可编辑
      ///   true 可输入
      ///   false 不可输入
      enabled: true,
      ///密码  maxLines =1
      obscureText: false,
      ///限制输入框内输入文本的长度的
      ///设置此项会让TextField右下角有一个输入数量的统计字符串
      maxLength: 30,
      ///限制输入框内输入文本的行数
      maxLines: 4,
      ///当输入框内的文本发生改变时回调的函数
      onChanged: (value){
        print("回调了 $value");
      },
      ///键盘上按了done
      onEditingComplete: () {

      },
    );
  }

3 键盘样式总结

        ///键盘回车键的样式
        /**
         * none 为不弹出键盘
         * unspecified 换行
         * none 为不弹出键盘
         * done 完成或者done
         * go  前往或者go
         * search 搜索或者search
         * send  发送或者send
         * next 下一项或者next
         * previous
         * continueAction 继续或者 continue
         * join 加入或者join
         * route 路线或者route
         * emergencyCall 紧急电话
         * newline 换行或者newline
         */
        textInputAction: TextInputAction.newline,

4 TextField设置不可编辑

文本输入框TextField设置为不可编辑可通过设置TextField的属性enabled的值为false,也可设置TextField的只读属性readOnly为true,两者的区别是使用到的边框样式不一样。

如果是使用enabled为false这种方式,那么TextField使用到的边框样式只是disabledBorder所配置的边框样式。

如果是使用的readOnly为true只读方式,那么TextField可以使用focusedBorder、enabledBorder、errorBorder配置的综合样式。

补充:

  • obscureText 密码设置说明,当输入的文本为密码选项时,输入文本是不可见的,这时 maxLines 性如果设置了,那么必须要求为 maxLines=1,因为在实际应用中,密码一般不会太长,一行足以承载,当设置的 maxLines>1时,flutter 应用程序在运行时会报异常。
  • onChanged 回调函数,只有当输入文本框中的文本内容有变化时,此函数才会被回调,焦点改变时不会触发。

【1】 目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒点击查看提示

在这里插入图片描述


【2】 本公众号会首发系列专题文章,付费的视频课程会在公众号中免费刊登,在你上下班的路上或者是睡觉前的一刻,本公众号都是你浏览知识干货的一个小选择,收藏不如行动,在那一刻,公众号会提示你该学习了。
在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页