Flutter 底部跟随键盘并且页面跟随键盘_flutter stack 随键盘

1.应用的控件

   Scaffold 设置  resizeToAvoidBottomInset: true, // 防止底部被键盘遮挡

   stack   设置 children 1 为ListView 内部有TextField可跟随键盘 //正文

               children2 为 Align  设置属性 alignment: Alignment.bottomCenter, / 底部内容

2.用例

class TextFieldPage extends StatelessWidget {
  var result = 'Navigator';
  String platformVersion = 'Unknown';
  TextEditingController rechargeController = TextEditingController();
  bool s = true;

  @override
  Widget build(BuildContext context) {
    var fa = new FocusNode();
    // https://book.flutterchina.club/chapter3/input_and_form.html#_3-7-2-%E8%A1%A8%E5%8D%95form
    // checkBox flutter_sujian_select 1.0.1
    return new Scaffold(
      resizeToAvoidBottomInset: true, // 防止底部被键盘遮挡
      appBar: new AppBar(
        title: new Text('$result'),
      ),
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Stack(
          children: [
            Container(
              child: ListView(
                children: [
                  Checkbox(
                    onChanged: (b) {
                      s = !s;
                    },
                    value: s,
                    splashRadius: 44,
                    mouseCursor: MouseCursor.defer,
                  ),
                  Checkbox(
                      value: s,
                      onChanged: (b) {
                        s = !s;
                      }),
                  new TextField(
                    focusNode: fa,
                    controller: rechargeController,
                    //    maxLength: 30,//最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
                    //最大行数
                    maxLines: 1,
                    //是否自动更正
                    autocorrect: true,
                    onSubmitted: (str) {
                      print("sub");
                    },
                    // 键盘 提交按钮监听
                    textInputAction: TextInputAction.send,
                    /*是否自动对焦
                  autofocus: false,
                  // 秘密隐藏
                  obscureText: false,*/
                    //是否是密码
                    textAlign: TextAlign.start,
                    //文本对齐方式
                    style: TextStyle(fontSize: 16, color: Colors.black87),
                    //输入文本的样式
                    onChanged: (text) {
                      //内容改变的回调
                      print('change $text');
                    },
                    cursorWidth: 2.0,
                    cursorColor: Colors.black87,
                    //光标颜色,
                    dragStartBehavior: DragStartBehavior.down,
                    // this.dragStartBehavior = DragStartBehavior.down,
                    scrollPadding: EdgeInsets.all(20),
                    inputFormatters: [
                      // FilteringTextInputFormatter.allow(RegExp(r'[0-9]')), // 只允许输入样式
                      FilteringTextInputFormatter.deny(RegExp("[0-9]")),
                      // 不允许的样式
                      // 不允许输入的
                      LengthLimitingTextInputFormatter(5)
                    ],
                    decoration: new InputDecoration(
                        enabled: true,
                        labelText: "输入账户",
                        // 悬浮提示\
                        hintText: "phone",
                        hintStyle: new TextStyle(fontSize: 16),
                        // prefixIcon: Icon(Icons.phone_android),// 左侧内图标
                        // 左侧外图标
                        icon: Icon(Icons.phone_android),
                        suffixIcon: GestureDetector(
                          child: Icon(Icons.navigate_next),
                          onTap: () {
                            print("print clcik");
                          },
                        ),
                        errorText: null,
                        // 设置为null errorBorder 失效
                        /*   border: new OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8.0),
                            borderSide: BorderSide(color: Colors.red)
                        ),*/
//                  border: new UnderlineInputBorder( //OutlineInputBorder 边框
//                      borderSide: BorderSide(color: Colors.black87 ),
//                      borderRadius: BorderRadius.circular(7.0)
//                  ),
                        border: new UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.black12)),
                        // 聚焦时
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue)),
                        disabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.black12)),
                        // 未聚焦时
                        enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.black)),
                        errorBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.red))),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Container(
                    height: 143,
                    margin: EdgeInsets.symmetric(horizontal: 25),
                    padding: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8.0),
                        border: Border.all(color: Colors.black12, width: 1)),
                    child: TextField(
                      maxLines: 5,
                      maxLength: 200,
                      decoration: InputDecoration(
                          contentPadding: EdgeInsets.all(10),
                          hintText: "输入内容",
                          counterStyle: TextStyle(color: Colors.blue),
                          border: InputBorder.none
                        /* border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8.0))*/
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 25),
                    child: TextFormField(
                      keyboardType: TextInputType.visiblePassword,
                      maxLines: 1,
                      autofillHints: <String>[AutofillHints.password],
                      scrollPadding: EdgeInsets.all(25),
                      textAlign: TextAlign.start,
                      decoration: InputDecoration(
                        filled: true,
                        isCollapsed: true,
                        contentPadding:
                        EdgeInsets.symmetric(horizontal: 29, vertical: 11),
                        fillColor: CommonColors.color_99,
                        hintText: "请输入域帐号密码",
                        hintStyle:
                        TextStyle(fontSize: 14, color: CommonColors.text_33),
                        border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: BorderSide.none),
                      ),
                    ),
                  ),
                  Container(
                    height: 56.0,
                    decoration: BoxDecoration(
                      border:
                      Border(bottom: BorderSide(color: Colors.black12, width: 1)),
                    ),
                    child: Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Container(
                            height: double.infinity,
                            margin: EdgeInsets.only(top: 8),
                            alignment: Alignment.topLeft,
                            child: Text(
                              "¥",
                              style: TextStyle(
                                  fontSize: 24, color: CommonColors.text_66),
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Expanded(
                            child: TextField(
                              autofocus: true,
                              keyboardType: TextInputType.number,
                              style: TextStyle(
                                  color: CommonColors.text_33, fontSize: 48),
                              decoration: InputDecoration(
                                border: InputBorder.none,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  new Container(
                    width: 200,
                    child: TextField(
                      //    maxLength: 30,//最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
                      maxLines: 1,
                      //最大行数
                      autocorrect: true,
                      //是否自动更正
                      autofocus: false,
                      //是否自动对焦
                      obscureText: false,
                      //是否是密码
                      textAlign: TextAlign.start,
                      //文本对齐方式
                      style: TextStyle(fontSize: 16, color: Colors.black87),
                      //输入文本的样式
                      //| inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],//允许的输入格式
                      inputFormatters: [
                        // FilteringTextInputFormatter.allow(RegExp(r'[0-9]')), // 只允许输入样式
                        FilteringTextInputFormatter.deny(RegExp("[0-9]")),
                        // 不允许输入的
                        LengthLimitingTextInputFormatter(5)
                      ],
                      onChanged: (text) {
                        //内容改变的回调
                        print('change $text');
                      },
                      cursorWidth: 2.0,
                      cursorColor: Colors.black87,
                      //光标颜色,
                      dragStartBehavior: DragStartBehavior.down,
                      // this.dragStartBehavior = DragStartBehavior.down,
                      scrollPadding: EdgeInsets.all(20),
                      decoration: new InputDecoration(
                          hintText: "搜索",
                          hintStyle: new TextStyle(fontSize: 16),
                          prefixIcon: Icon(Icons.search),
                          border: InputBorder.none),
                    ),
                  ),
                  SizedBox(
                    height: 35,
                  ),
                  ElevatedButton(
                      onPressed: () {
                        fa.unfocus();
                      },
                      child: Text("test")),
                ],
              ),
              margin: EdgeInsets.only(bottom: 60),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                height: 60,
                margin: EdgeInsets.symmetric(horizontal: 25),
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(8.0),
                    border: Border.all(color: Colors.black12, width: 1)),
                child: TextField(
                  maxLines: 1,
                  maxLength: 200,
                  decoration: InputDecoration(
                      contentPadding: EdgeInsets.all(10),
                      hintText: "输入内容",
                      counterStyle: TextStyle(color: Colors.blue),
                      border: InputBorder.none
                    /* border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0))*/
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}