在 Stack 内部，如何在渲染键盘后进行垂直滚动，SingleChildScrollView 不起作用，FLutter？

Question

你能帮我在为 TextField 呈现键盘后实现堆栈内的滚动视图吗 我在列小部件中放置了更多的文本字段，但是当键盘被渲染时它覆盖了文本字段所以如何在键盘渲染后将屏幕置于滚动状态 因为这是堆栈 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 小部件内的堆栈小部件用于可以滚动整个堆栈的脚手架来解决。

   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,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),

                    ],
                  ),
                ),

              ]),
            ),
          ),

        ]),
      ),

    ));

之后，在容器内部使用边距，它在边框外提供 space 让您的屏幕看起来不错。