在堆栈内部，如何在键盘渲染后进行垂直滚动，SingleChildScrollView不工作，FLutter？

Question

你能不能帮我实现堆栈内的滚动视图 键盘渲染后的TextField我已经把更多的TextFields里面的column widget，但当键盘已经渲染，它是覆盖的文本字段，所以如何把屏幕下的滚动键盘渲染后，这是堆栈singleChildScrollView不运作

Widget build(BuildContext context) {
  return SafeArea(
  child:Stack(children: <Widget>[
    Align(
      alignment: Alignment.topCenter,
      child: Container(
        child: Padding(
          padding: EdgeInsets.only(top: 20.0),
          child: Center(
            child: Image.asset(
              "img/xyzlogo.jpg",
              width: Short.w * 0.4,
            ),
          ),
        ),
        width: Short.w,
        height: MediaQuery.of(context).size.height * 0.20,
        color: Colors.blue[800],
      ),
    ),
    Align(
      alignment: Alignment.bottomLeft,
      child: Container(
        height: Short.h * 0.82,
        width: Short.w,
        color: Colors.white,
        child:new LayoutBuilder(
    builder:
        (BuildContext contex, BoxConstraints viewportConstraints) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints:
              BoxConstraints(
                maxHeight: viewportConstraints.maxHeight,
                // minHeight:viewportConstraints.minHeight
                ),
          child: Column(children: [Form(
                  key: _formKey,
                  child: Column(
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Flexible(
                            child: Padding(
                              padding: EdgeInsets.only(
                                top: 18,left: Short.w * 0.03,
                              ),
                              child: Material(
                                shape: Border(
                                  left: BorderSide(
                                      width: 5.0, color: Colors.blue[800]),
                                  bottom: BorderSide(
                                      width: 1.8, color: Colors.blue[800]),
                                ),
                                color: Colors.white,
                                child: Padding(
                                  padding: EdgeInsets.only(left: 9.0),
                                  child: TextFormField(
                                    decoration: InputDecoration(
                                      labelStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                      labelText: '  Email/Phone',
                                      hintText: " Enter your email /Phone",
                                      hintStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                      // border: OutlineInputBorder(
                                      //     borderRadius: BorderRadius.circular(
                                      //         Short.h * 2.5)),
                                    ),
                                    controller: email,
                                    keyboardType:
                                        TextInputType.emailAddress,
                                   ),
                                ),
                              ),
                            ),
                          ),
                          Flexible(
                            child: Padding(
                              padding: EdgeInsets.only(
                                  top: 18,
                                  left: Short.w * 0.03,
                                  right: Short.w * 0.02),
                              child: Material(
                                shape: Border(
                                  left: BorderSide(
                                      width: 5.0, color: Colors.blue[800]),
                                  bottom: BorderSide(
                                      width: 1.8, color: Colors.blue[800]),
                                ),
                                color: Colors.white,
                                child: Padding(
                                  padding: EdgeInsets.only(left: 9.0),
                                  child: TextFormField(
                                    decoration: InputDecoration(
                                      labelStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                      labelText: '  Password',
                                      hintText: " Enter your Password",
                                      hintStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                                                             ),
                                    controller: pwd,
                                    keyboardType:
                                        TextInputType.visiblePassword,
                                    // validator: pwdValidator,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ), ]), ), ); },)  ),   ),

Answer 1

键盘渲染后，你不能在栈或列内使用SingleChildScrollView部件，因为SingleChildScrollView是在你有一个完全可见的单框时使用的，不像其他部件在其上渲染。这可以通过使用堆栈内的SingleChildSrollView widget进入脚手架来解决，通过脚手架可以滚动整个堆栈。

   Scaffold(
           body: SingleChildScrollView(
             child: Stack(children: <Widget>[
                Align(
            alignment: Alignment.topCenter,
            child: Container(
              child: Padding(
                padding: EdgeInsets.only(top: 20.0),
                child: Center(
                  child: Image.asset(
                    "img/xyzlogo.jpg",
                    width: Short.w * 0.4,

                  ),
                ),
              ),
              width: Short.w,
              height: MediaQuery.of(context).size.height * 0.20,
              color: Colors.blue[800],
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              margin: EdgeInsets.only(top: 150),
              height: Short.h * 0.75,
              width: Short.w,
              color: Colors.white,
              child: new Column(children: [

                Form(
                  key: _formKey,
                  child: Column(
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Flexible(
                            child: Padding(
                              padding: EdgeInsets.only(
                                top: 18,
                                left: Short.w * 0.03,
                              ),
                              child: Material(
                                shape: Border(
                                  left: BorderSide(
                                      width: 5.0, color: Colors.blue[800]),
                                  bottom: BorderSide(
                                      width: 1.8, color: Colors.blue[800]),
                                ),
                                color: Colors.white,
                                child: Padding(
                                  padding: EdgeInsets.only(left: 9.0),
                                  child: TextFormField(
                                    decoration: InputDecoration(
                                      labelStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                      labelText: '  Email/Phone',
                                      hintText: " Enter your email /Phone",
                                      hintStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                    ),
                                    controller: email,
                                    keyboardType: TextInputType.emailAddress,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Flexible(
                            child: Padding(
                              padding: EdgeInsets.only(
                                  top: 18,
                                  left: Short.w * 0.03,
                                  right: Short.w * 0.02),
                              child: Material(
                                shape: Border(
                                  left: BorderSide(
                                      width: 5.0, color: Colors.blue[800]),
                                  bottom: BorderSide(
                                      width: 1.8, color: Colors.blue[800]),
                                ),
                                color: Colors.white,
                                child: Padding(
                                  padding: EdgeInsets.only(left: 9.0),
                                  child: TextFormField(
                                    decoration: InputDecoration(
                                      labelStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                      labelText: '  Password',
                                      hintText: " Enter your Password",
                                      hintStyle: TextStyle(
                                          color: Colors.grey,
                                          fontSize: Short.h * 0.02),
                                    ),
                                    controller: pwd,
                                    keyboardType: TextInputType.visiblePassword,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),

                    ],
                  ),
                ),

              ]),
            ),
          ),

        ]),
      ),

    ));

之后，在容器内部使用margin，它提供了边界外的空间，使你的屏幕看起来很好。