关于ios:Flutter-25FlutterTextField使用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 查看，并且能够下载下来运行并体验。