【Flutter 2-5】Flutter——TextField使用、InputDecoration和FocusedNode

TextField

TextField是一个经常使用的控件，同时它也是一个组合控件，由多个控件组合而成。
这是来自Material官方网站的的图片

TextField是由7个控件组成，其中有些控件默认不显示，咱们能够对各个控件单独设置想要的样式来知足不一样的UI展现需求。
下面咱们就来列举几种常见的样式：

1. 简单的TextField

TextField(
    decoration: InputDecoration(
        labelText: "最基本的的TextField",
    ),
)

TextField接收一个InputDecoration做为参数，InputDecoration初始化的参数labelText能够帮助咱们定义placeholder。labelText模式会灰色的，选中以后会变为蓝色，而且TextField底部会有一条蓝色线条。

2. 限制字符的长度

TextField(
    maxLength: 10,
    decoration: InputDecoration(
        labelText: "最多10个字符",
    ),
)

maxLength能够设置最长字符个数，若是超过这个限制再次输入不会有显示，而且在TextField在有右下角有当前字符个数的标记，此处是10/10。

3. 限制行数

TextField(
    maxLines: 2,
    decoration: InputDecoration(
        labelText: "两行文字，超出的文字上翻",
    ),
)

maxLines参数能够设置行数，好比这里设置的是2，默认只会显示两行，超过两行的部分只能经过上下滚动来显示。

默认行数是1，超过的部分会往左缩进。

4. labelText设置颜色

TextField(
    decoration: InputDecoration(
        labelText: "labelText 有颜色",
        labelStyle: TextStyle(color: Colors.red),
    ),
)

InputDecoration能够设置labelStyle参数，接收一个TextStyle对象，TextStyle这个咱们比较熟悉，在以前讲解Text的文章中已经作了不少详解了。设置颜色以后，当点击TextField以后，文字会变小，颜色也是设置好的颜色。

5. 左侧Icon

TextField(
    decoration: InputDecoration(
        icon: Icon(Icons.account_box),
        labelText: "左侧有一个Icon",
    ),
)

icon参数能够传入一个Icon对象用来显示在TextField的左侧，咱们能够传入各式各样的Icon，知足咱们更丰富的展现需求。

6. 右侧Icon suffix和suffixIcon

TextField(
    decoration: InputDecoration(
        labelText: "右侧的两个Icon suffix 和 suffixIcon",
        suffix: Icon(Icons.account_box),
        suffixIcon: Icon(Icons.add),
    ),
)

suffixIcon默认是显示在右侧的，TextField被点击以后会显示为被选中状态，suffix默认不显示，只有当选中TextField的时候才会显示出来。

7. 辅助提示

TextField(
    decoration: InputDecoration(
        labelText: "下方带有辅助提示的TextField",
        helperText: "我是辅助提示",
        helperStyle: TextStyle(color: Colors.red),
    ),
)

helperText能够帮助咱们在TextField下面显示一行提示文字，一样咱们也能够使用helperStyle来设置这段提示文字的样式。

8. 点击后的提示 hintText

TextField(
    decoration: InputDecoration(
        labelText: "点击后会有提示",
        hintText: "我是点击后的提示",
        hintStyle: TextStyle(color: Colors.red),
    ),
)

hintText参数能够帮助咱们设置一个点击后显示的文字，只有点击以后才能够显示，一样咱们能够经过hintStyle来设置hintText的样式。

9. 不显示下划线

TextField(
    decoration: InputDecoration(
        labelText: "选中时没有下划线",
        focusedBorder: InputBorder.none,
    ),
)

focusedBorder能够帮助咱们设置下划线的样式，若是传入InputBorder.none则不会显示下划线。

10. 自定义下划线样式

TextField(
    decoration: InputDecoration(
        labelText: "选中时的下划线颜色",
        focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.red),
        ),
    ),
)

咱们能够给focusedBorder传入自定义的UnderlineInputBorder来自定义下划线的样式，这里咱们简单作了个颜色的改变。

TextField事件监听

平常开发中，咱们每每但愿在三个地方TextField能够给咱们回调。

1. 输入文字的过程当中，这样方便咱们在用户输入的时候就能够判断输入内容是否合法。
2. 输入完成的时候，这个时候咱们能够拿到输入内容作一些操做。
3. 与键盘事件的配合，在必要的时候回收键盘。

TextField提供了三个回调方法

• onChanged 此方法是在输入有变化的时候就会回调。参数是当前已经输入的内容
• onSubmitted 此方法是在咱们输入完成后，点击键盘上回车的时候回调。参数是当前的已经输入的内容
• onEditingComplete此方法也是在点击键盘上回车的时候回调，它会在onSubmitted以前执行。不会带有参数

须要注意是onEditingComplete回调方法没有携带参数。若是咱们须要在onEditingComplete方法中获取到当前的输入值。
那就须要经过TextEditingController来捕捉输入内容，TextField接收一个TextEditingController对象来做为controller参数，
经过TextEditingController的属性text咱们也能够获取到当前的输入内容。

11. 事件回调

TextEditingController controller = TextEditingController();
TextField(
    controller: controller,
    onChanged: (value) {
      print("onChanged value = " + value);
    },
    onSubmitted: (value) {
      print("onSubmitted value = " + value);
    },
    onEditingComplete: () {
      print("onEditingComplete value = " + controller.text);
    },
    decoration: InputDecoration(
      labelText: "输入事件监听",
    ),
)

能够看到经过controller.text能够获取到当前的输入内容。
12. 键盘回收

TextField(
    decoration: InputDecoration(
        labelText: "键盘回收",
        suffixIcon: IconButton(
            icon: Icon(Icons.close),
            onPressed: () {
                FocusScope.of(context).requestFocus(FocusNode());
            }),
        ),
    )

FocusNode能够帮助咱们进行键盘的回收，我只须要将FocusScope的requestFocus方法中传入一个新的FocusNode对象即刻。
若是在开发过程当中，咱们但愿经过点击页面上某个按钮来结束TextField输入而且获取到当前的输入内容。使用FocusNode是颇有效的。

想体验以上的示例的运行效果，能够到个人Github仓库项目flutter_app->lib->routes->textfield_page.dart查看，而且能够下载下来运行并体验。

---