在 Flutter 中消除大量像素溢出的最佳方法是什么？

Question

我的应用程序中有 Stepper，并且在屏幕上放置文本字段时遇到问题，当我想在文本字段中输入一些文本时，会出现键盘并显示：

\n\n

\n

RenderFlex 底部溢出了 139 个像素。

\n

\n\n

我读了一些文章并理解，我必须使用它FittedBox，但我不知道如何以最佳方式使用它。我怎样才能达到我的目标？

\n\n

代码：

\n\n

@override\n  Widget build(BuildContext context) {\n    globalHeight = (MediaQuery.of(context).size.height) * 0.85;\n    return Scaffold(\n      body: AnnotatedRegion<SystemUiOverlayStyle>(\n        value: SystemUiOverlayStyle.light,\n        child: Container(\n          decoration: BoxDecoration(color: colorsBackround[_currentPage]),\n          child: Padding(\n            padding: EdgeInsets.symmetric(vertical: 10.0),\n            child: Column(\n              crossAxisAlignment: CrossAxisAlignment.stretch,\n              children: <Widget>[\n                Container(\n                  height: globalHeight,\n                  child: PageView(\n                    physics: ClampingScrollPhysics(),\n                    controller: _pageController,\n                    onPageChanged: (int page) {\n                      setState(() {\n                        _currentPage = page;\n                      });\n                    },\n                    children: <Widget>[\n                     // some code\n                      Padding(\n                        padding: EdgeInsets.all(10.0),\n                        child: Center(\n                          child: Column(\n                            crossAxisAlignment: CrossAxisAlignment.center,\n                            mainAxisAlignment: MainAxisAlignment.start,\n                            children: <Widget>[\n                              Image(\n                                image: AssetImage(\n                                  itemIcon[_currentPage],\n                                ),\n                                height: 300.0,\n                                width: 300.0,\n                              ),\n                              Text(\n                                '\xd0\xa3\xd0\xba\xd0\xb0\xd0\xb6\xd0\xb8\xd1\x82\xd0\xb5 \xd0\xb2\xd0\xb0\xd1\x88 \xd0\xb2\xd0\xbe\xd0\xb7\xd1\x80\xd0\xb0\xd1\x81\xd1\x82',\n                                style: kTitleStyle,\n                              ),\n                              SizedBox(\n                                width: MediaQuery.of(context).size.width * 0.8,\n                                height: 50.0,\n                                child: Padding(\n                                    padding: EdgeInsets.only(\n                                        top: 20.0,\n                                        left: 20,\n                                        right: 20,\n                                        bottom: MediaQuery.of(context)\n                                            .viewInsets\n                                            .bottom),\n                                    child: TextField(\n                                      controller: ageController,\n                                      keyboardType: TextInputType.number,\n                                      onChanged: (text) {\n                                        setState(() {\n                                          if (text.isNotEmpty) {\n                                            inputs[1] = true;\n                                          } else {\n                                            inputs[1] = false;\n                                          }\n                                        });\n                                      },\n                                      decoration: InputDecoration(\n                                        labelText: '\xd0\x92\xd0\xbe\xd0\xb7\xd1\x80\xd0\xb0\xd1\x81\xd1\x82',\n                                      ),\n                                      style: TextStyle(fontSize: 18.5),\n                                    )),\n                              ),\n                            ],\n                          ),\n                        ),\n                      ),\n                      //some code\n                    ],\n                  ),\n                ),\n                Row(\n                  mainAxisAlignment: MainAxisAlignment.center,\n                  children: _buildPageIndicator(),\n                ),\n                _currentPage != _numPages - 1\n                    ? Expanded(\n                        child: Container(\n                            child: Row(\n                        mainAxisSize: MainAxisSize.max,\n                        children: <Widget>[\n                          Expanded(\n                              child: Align(\n                            alignment: FractionalOffset.bottomLeft,\n                            child: FlatButton(\n                              onPressed: () {\n                                _pageController.previousPage(\n                                  duration: Duration(milliseconds: 500),\n                                  curve: Curves.ease,\n                                );\n                              },\n                              child: Row(\n                                mainAxisSize: MainAxisSize.min,\n                                children: <Widget>[\n                                  Icon(\n                                    Icons.arrow_back,\n                                    color: Colors.white,\n                                    size: 26.0,\n                                  ),\n                                  SizedBox(width: 10.0),\n                                  Text(\n                                    '\xd0\x9d\xd0\xb0\xd0\xb7\xd0\xb0\xd0\xb4',\n                                    style: TextStyle(\n                                      fontFamily: 'Century Gothic',\n                                      color: Colors.white,\n                                      fontSize: 14.5,\n                                    ),\n                                  ),\n                                ],\n                              ),\n                            ),\n                          )),\n                          Expanded(\n                              child: Align(\n                            alignment: FractionalOffset.bottomRight,\n                            child: FlatButton(\n                              onPressed: () {\n                                _pageController.nextPage(\n                                  duration: Duration(milliseconds: 500),\n                                  curve: Curves.ease,\n                                );\n                              },\n                              child: Row(\n                                mainAxisSize: MainAxisSize.min,\n                                children: <Widget>[\n                                  Text(\n                                    '\xd0\x94\xd0\xb0\xd0\xbb\xd1\x8c\xd1\x88\xd0\xb5',\n                                    style: TextStyle(\n                                      fontFamily: 'Century Gothic',\n                                      color: Colors.white,\n                                      fontSize: 14.5,\n                                    ),\n                                  ),\n                                  SizedBox(width: 10.0),\n                                  Icon(\n                                    Icons.arrow_forward,\n                                    color: Colors.white,\n                                    size: 26.0,\n                                  ),\n                                ],\n                              ),\n                            ),\n                          )),\n                        ],\n                      )))\n                    : Text(''),\n              ],\n            ),\n          ),\n        ),\n      ),\n      bottomSheet: _currentPage == _numPages - 1\n          ? Container(\n              height: 75.0,\n              width: double.infinity,\n              color: Theme.of(context).scaffoldBackgroundColor,\n              child: GestureDetector(\n                onTap: () => print('Get started'),\n                child: Center(\n                  child: Padding(\n                    padding: EdgeInsets.only(bottom: 15.0),\n                    child: Text(\n                      '\xd0\x9d\xd0\xb0\xd1\x87\xd0\xb0\xd1\x82\xd1\x8c',\n                      style: TextStyle(\n                        fontFamily: 'Century Gothic',\n                        color: Colors.white,\n                        fontSize: 21.0,\n                        fontWeight: FontWeight.bold,\n                      ),\n                    ),\n                  ),\n                ),\n              ),\n            )\n          : Text(''),\n    );\n  }\n}\n

\n

Answer 1

没有直接的解决方案可以防止溢出问题，这取决于您当前的代码。所以，这里你使用

1. 添加到您的Scaffold

   resizeToAvoidBottomInset: false
   

2. 将你的小部件包裹在SingleChildScrollView

   SingleChildScrollView(
     child: YourColumn(),
   )