第十六回：如何使用TextField Widget

我们在上一章回中介绍了Text Widget,本章回中将介绍TextField Widget。闲话休提，让我们一起Talk Flutter吧。闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在上一章回中介绍了显示文本的Text Widget，本章回中介绍另外一个与文本相关的Widget，它叫TextField,主要用来接收用户输入的文本，它的作用与TextWidget正好相反，其实它的功能和Android中的EditText组件类似，它也是常用组件之一，本章回中将详细介绍它的使用方法。

使用方法

和其它Widget一样，TextField提供了相关的属性来控制自己，常用的属性如下：

• autofocus 属性用来控制自动获取光标，它是布尔类型，赋值true或者false就可以；
• keyboardType 属性用来控制键盘的输入类型，比如数字，文本等；
• decoration 属性用来装饰文本，比如hint,文本前后的icon等，详细内容可以参考示例代码；
• obscureText 属性用来控制是否以密码形式显示文本；
• onChanged 属性用来获取输入的文本，这是一个方法；

示例代码

 return Scaffold(
      appBar: AppBar(
        title: Text("Example of TextField"),
      ),
      body:const TextField(
        autofocus: true,
        keyboardType: TextInputType.number,
        // onChanged: (){},
        decoration: InputDecoration(
          labelText: "Label",
          hintText: "Name",
          errorText: "It is wrong",
          prefixIcon: Icon(Icons.login),
          suffixIcon: Icon(Icons.panorama_fish_eye),
          border: OutlineInputBorder(),
        ),
        // obscureText: true,
      ),
    );

上面的代码中只列出了主要代码，完整的代码可以查看Github上Ex009中的代码。在该代码中，我们给TextField装饰了Label,hint，外层的边框，并且在文本前面和后面添加了Icon,这些都是常用的内容，我们在这里就不演示程序运行结果了，建议大家自己动手去实践。

注意：使用onChanged属性时需要把TextField嵌套在一个布局类Widget中，并且布局类Widget位于StatefullWidget中。这里的代码没有演示这种嵌套关系，大家可以参考Github中Ex009中的代码。

看官们，关于"如何使用TextField Widget"的内容就介绍到这里，欢迎大家在评论区交流与讨论!