感君一回顾，思君朝与暮。

本文部分图片和文字介绍转载于 https://www.jianshu.com/p/13e639cb3037

<一>Flutter中的TextField类似我们iOS中的UITextField

• 属性

• InputDecoration的使用

  TextField _textField(){
    return TextField(
      decoration: _normalDecoration(),
    );
  }
  
  InputDecoration _normalDecoration(){
    return InputDecoration(
      filled: true,
      fillColor: Colors.lightBlue.shade100,
  
      prefixIcon: Icon(Icons.phone),
      prefixText: "+86 ",
      prefixStyle: TextStyle(color: Colors.orange, fontSize:  18),
  
      hintText: "请输入手机号",
  
      suffixIcon: Icon(Icons.clear),
    );
  }
  

image.png

• controller的使用
  使用 controller 属性可以为输入框填写一个默认的值，同时也可以监听输入框变化。

  TextEditingController _controller(){
  TextEditingController _controller = TextEditingController(
    text: "123333",
  );
  
  _controller.addListener(() {
    print(_controller.text);
  });
  
  return _controller;
  

• textInputAction 的使用
  使用 textInputAction 来控制输入框完成按钮的样式。

  TextField _textField(){
    return TextField(
      controller: _controller(),
      decoration: _normalDecoration(),
      textInputAction: TextInputAction.search,
    );
  }
  

image.png

• 键盘样式
  使用 keyboardType 来改变键盘样式。

  TextField _textField(){
    return TextField(
      controller: _controller(),
      decoration: _normalDecoration(),
      textInputAction: TextInputAction.search,
      keyboardType: TextInputType.phone,
    );
  }
  

• TextInputType text

  
  
  image

• TextInputType multiline

  
  
  image

• TextInputType phone

  
  
  image

• TextInputType datetime

  
  
  image

• TextInputType emailAddress

  
  
  image

• TextInputType url

  
  
  image

• TextInputType visiblePassword

  
  
  image

• TextInputType name

  
  
  image

• TextInputType streetAddress

  
  
  image

• 文字加密
  使用 obscureText 设置加密。

  TextField _textField(){
    return TextField(
      controller: _controller(),
      decoration: _normalDecoration(),
      autofocus: true,
      obscureText: true,
    );
  }
  

image.png

• 使用 obscuringCharacter 设置加密后的字符样式。

  TextField _textField(){
    return TextField(
      controller: _controller(),
      decoration: _normalDecoration(),
      obscuringCharacter: "&",
      obscureText: true,
    );
  }
  

image

• 输入中，输入完成，提交事件
  onTap：点击输入框
  onChanged ： 每次输入框文字改变，均会执行
  onSubmitted：提交按钮点击
  onEditingComplete：输入完成，提交按钮点击后会先执行这里
  注意执行顺序为 onTap -> onChanged -> onEditingComplete -> onSubmitted

   TextField _textField(){
    return TextField(
      controller: _controller(),
      decoration: _normalDecoration(),
      onChanged: (string){
        print("onChanged $string");
      },
      onSubmitted: (string){
        print("onSubmitted $string");
      },
      onEditingComplete: (){
        print("onEditingComplete");
      },
      onTap: (){
        print("onTap");
      },
    );
  }
  
  

image