Flutter TextField跟随键盘弹出和收回（类似于今日头条的评论）

在开发过程中，我们会遇到输入框跟随键盘上下移动的效果（例如今日头条，当我们点击评论框时候，评论框会自动跟随键盘上移或收回），在原生开发这个效果很简单，那么Flutter如何实现呢？向上一下效果图

编辑前：

 编辑后：

那么这项过如何实现呢？废话不多说直接上代码

Container(
            child: AnimatedPadding(//可以添加一个动画效果
              padding: MediaQuery.of(context).viewInsets, //边距（必要）
              duration: const Duration(milliseconds: 100), //动画时常 （必要）
              child: Container(
                color: ColorUtils.WHITE,//评论位置颜色
                padding: new EdgeInsets.only(bottom: keyboard ? 0 : height),//距离底部边界距离，这个是为了适配全面屏的，keyboard，bool类型，代表键盘的弹起和收回。true谈起，false收回，这个值怎么获取下面会有提到。
                child: Container(
                  height: keyboard ? 120 : 60,//设置输入框谈起和收回时的高度
                  width: double.infinity,//设置宽度
                  child: Flex(//控件横向排版弹性布局
                    direction: Axis.horizontal,
                    crossAxisAlignment: CrossAxisAlignment.end,//剧右边显示
                    children: <Widget>[
                      Expanded(设置输入框
                        flex: 1,
                        child: Container(
                          height: double.infinity,
                          margin: new EdgeInsets.all(10),
                          child: TextField(
                            maxLines: 50,//最大行数
                            controller: editingController,//绑定TextEditController更好操作
                            style: TextStyle(//设置字体、颜色
                              fontSize: FontSizeUtils.FONT_SIZE_15,
                              color: ColorUtils.TEXT_TITLE_BLACK,
                            ),
                            autocorrect: true,
                            decoration: InputDecoration(//设置提示内容，字体颜色、大小等
                              border: InputBorder.none,
                              hintText: "请发表你的评论",
                              hintStyle: TextStyle(
                                fontSize: FontSizeUtils.FONT_SIZE_15,
                                color: ColorUtils.TEXT_GRAY,
                              ),
                            ),
                            onChanged: (text) {
                               // 获取时时输入框的内容
                            },
                          ),
                          decoration: BoxDecoration(//设置边框、圆角效果
                              color: ColorUtils.WHITE,
                              borderRadius: BorderRadius.circular(5),
                              border: new Border.all(
                                  width: 0.5, color: ColorUtils.TEXT_GRAY)),
                        ),
                      ),
                      Offstage(控件隐藏控件
                        offstage: !keyboard,//键盘弹起，发布按钮显示、反之隐藏
                        child: GestureDetector(
                          onTap: () {// 点击发布按钮判断输入框内容是否为空，并提示用户
                            if (editingController.text.isEmpty) {
                              Fluttertoast.showToast(msg: "请填写评论信息");
                              return;
                            }
                            editingController.text = "";//不为空，点击发布后，清空内容
                            FocusScope.of(context).requestFocus(FocusNode());//关闭键盘
                          },
                          child: Container(// 设置点击按钮样式
                            height: 30,
                            alignment: Alignment.center,
                            padding: new EdgeInsets.fromLTRB(10, 0, 10, 0),
                            margin: new EdgeInsets.only(bottom: 14, right: 10),
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(8.0),
                                ),
                                color: ColorUtils.DIALOG_SURE_BTN_BG),
                            child: Text(
                              "发布",
                              style:
                                  TextStyle(color: Colors.white, fontSize: 14),
                            ),
                          ),
                        ),
                      ),
                      GestureDetector(//点赞按钮样式
                        onTap: () {
                            // 点赞按钮点击事件
                        },
                        child: Container(
                          height: 25,
                          alignment: Alignment.center,
                          margin: new EdgeInsets.only(bottom: 16, right: 10),
                          child: Icon(//设置点赞按钮图标
                            Icons.favorite_border,
                            color: ColorUtils.TEXT_BLUE,
                            size: 25,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),

 其实上面使用到了三个参数，分别是height、keyboard、TextEditingController，下面是我的参数定义

  double height = MediaQuery.of(context).padding.bottom;// 这个很简单，就是获取高度，获取的底部安全区域的高度
  bool keyboard = false;//键盘的弹起、收回状态
  TextEditingController editingController = new TextEditingController();//输入框的编辑

这样用到的参数也介绍完了，下面就是我们如何监听键盘的弹起和收回呢？Flutter也为我们提供了方法，方法如下：

@override
Widget build(BuildContext context) {
    // 监听键盘的弹起和收回
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        // MediaQuery.of(context).viewInsets.bottom大于0就是代表键盘弹起，0位收回
        keyboard = MediaQuery.of(context).viewInsets.bottom > 0;
      });
    });
}

到此，一个输入框跟随键盘移动的效果就算完成了。个人感觉效果还不错，有兴趣的小伙伴可以自己敲一下，自己感受一下。