Flutter-TextField组件

1、 TextFiled组件

---

• 原生TextFiled

  只是一条灰色的输入线

  TextFiled()
  

• 添加标题（lableText）、添加提示性文字（hintText）

  ​ 使用于decoration内

  eg:
      return TextField(
          decoration: InputDecoration(
              labelText: "登录名",
              hintText: "在此输入你的手机号或邮箱账号"
          )
      );
  

• 自动聚焦（autofocus)

  ​ 适用于TextField下

  eg:
      return TextField(
          autofocus: true,
          ···
      );
  

• 最大行数（maxLines)、最大长度（maxLength）、限制最大长度的方法（maxLengthEnforced）

  ​ maxLines：最大行数，默认1行，如果想要无限制自动换行，设置为null

  ​ maxLength：最大长度，当被赋值时，当前长度和最大限制长度会被显示在输入框右下角

  ​ maxLengthEnforced：该参数接受一个bool值，表示达到最大长度时是否阻止继续输入，当值为true，阻止输入，当值为false，允许继续输入，但是输入框会以红色显示。

  ​ 这三个参数均是使用于TextField下

  eg:
      return TextField(
        maxLines: 1,//最大行数
        maxLength: 8,//最大长度，会显示在输入框的右下角
        maxLengthEnforced: false,//表示当输入长度达到限定时，是否强制阻止输入，否则，可以继续输入，但是输入框会显示红色
        decoration: InputDecoration(
          labelText: "密码",
          hintText: "在此输入登录密码"
        ),
      );
  

• 隐藏密码输入内容（obscureText)

  ​ 使用于TextField下

  eg:
      return TextField(
  	  obscureText: true,//是否为隐藏密码类型
        decoration: InputDecoration(
          labelText: "密码",
          hintText: "在此输入登录密码"
        ),
      );
  

• 指定允许输入的内容格式（keyboardType)

  ​ 使用于TextField下

  ​ keyboardType属性会限制弹出的软键盘类型，从而达到限制输入类型的目的，常见的属性值有文本（text）、数字（number）、电话（phone）、日期时间（datetime）、邮箱（emailAddress）和网站（url）。

  eg
  	return TextField(
          keyboardType: TextInputType.emailAddress,//允许输入内容格式，此处为email
          decoration: InputDecoration(
            labelText: "登录名",
            hintText: "在此输入你的手机号或邮箱账号"
          )
      );
  

• 为输入框添加一个图标（prefixIcon)

  ​ 使用于decoration下

  eg
      return TextField(
          autofocus: true,
          keyboardType: TextInputType.emailAddress,//允许输入内容格式，此处为email
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.person),//输入框头图标
            labelText: "登录名",
            hintText: "在此输入你的手机号或邮箱账号"
          )
      );
  

• 获取输入框中的内容

  • 一次性获取输入框内容

    ​ 首先需要定义一个TextEditingController，用来通过它获取输入内容。

    eg:
    	TextEditingController usernameController = TextEditingController();
    

    ​ 设置TextEditingController到TextField下

    eg:
    	 return TextField(
            autofocus: true,
            keyboardType: TextInputType.emailAddress,//允许输入内容格式，此处为email
            controller: usernameController,//监听输入
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.person),//输入框头图标
              labelText: "登录名",
              hintText: "在此输入你的手机号或邮箱账号"
            )
        );	通过TexteditingController获取内容
    

    ​ 通过TextEditingCOntroller获取内容

    eg:
        class loginButton extends StatelessWidget{
         @override
         Widget build(BuildContext context) {
           // TODO: implement build
           return RaisedButton(
             child: Text("登录"),
             onPressed: (){
               debugPrint("Username:"+usernameController.text+"-Password:"+passwordController.text);
             },
           );
         }
       }
    

  • 实时获取输入框内容

    ​ 设置onChange属性，对输入及删除都有监听效果。

    eg:
    	return TextField(
          obscureText: true,//是否为隐藏密码类型
          onChanged: (content){
            debugPrint("Password:"+content);
          },
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.lock),
            labelText: "密码",
            hintText: "在此输入登录密码"
          ),
        );
      }