关于ios:Flutter-25FlutterTextField使用InputDecoration和FocusedNode

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提供了三个回调办法

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 查看，并且能够下载下来运行并体验。

TextField

TextField 事件监听