显示键盘时底部溢出 x 像素

Question

我是 Flutter 新手，有一个问题。当我单击TextField并显示键盘时，我收到此错误，并且无法单击按钮“Kontynuuj”。

\n

A RenderFlex overflowed by 227 pixels on the bottom.\n\nThe relevant error-causing widget was: \n  Column file:///C:/../lib/ui/pages/EmailPage.dart:37:16\nThe overflowing RenderFlex has an orientation of Axis.vertical.\nThe edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.\n\nConsider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.\nThis is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.\n

\n

\n

当未显示键盘时，一切正常，我可以正确单击按钮的任何位置并且它可以工作。我想让它在具有不同分辨率的任何设备上运行，因此它应该动态工作。可以帮助我吗？我应该改变什么？

\n

代码：

\n

import \'dart:io\';\n\n//imports\n\nimport \'LoginPage.dart\';\n\nclass EmailPage extends StatefulWidget {\n  static final routeName = \'edit-product\';\n\n  @override\n  _EmailPage createState() => _EmailPage();\n}\n\nclass _EmailPage extends State<EmailPage> {\n  ...;\n\n  final emailController = TextEditingController();\n\n  final _formKey = GlobalKey<FormState>();\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text("Zaloguj si\xc4\x99"),\n      ),\n      body: Container(\n        padding: EdgeInsets.all(40.0),\n        width: MediaQuery.of(context).size.width,\n        height: MediaQuery.of(context).size.height,\n        child: Column(\n          crossAxisAlignment: CrossAxisAlignment.center,\n          children: [\n            FlutterLogo(size: 130),\n            SizedBox(\n              height: 30.0,\n            ),\n            Text(\n              \'Zaloguj lub zarejestruj si\xc4\x99 za pomoc\xc4\x85 adresu e-mail\',\n              style: TextStyle(\n                fontSize: 18,\n                color: Color(0xff000000),\n              ),\n              textAlign: TextAlign.center,\n            ),\n            SizedBox(\n              height: 30.0,\n            ),\n            Form(\n              child: TextFormField(\n                validator: (value) {\n                  if (value == null || value.isEmpty) {\n                    return \'Please enter an email\';\n                  } else if (!EmailValidator.validate(value)) {\n                    return \'Please enter proper mail\';\n                  }\n                  return null;\n                },\n                controller: emailController,\n                decoration: InputDecoration(\n                    border: OutlineInputBorder(),\n                    hintText: \'Adres e-mail\',\n                    fillColor: Color(0xffdbdbdb),\n                    filled: true),\n              ),\n              key: _formKey,\n            ),\n            SizedBox(\n              height: 15.0,\n            ),\n            ConstrainedBox(\n              constraints: BoxConstraints.tightFor(width: 240, height: 60),\n              child: ElevatedButton(\n                onPressed: () {\n                  if (_formKey.currentState!.validate()) {\n                    moveToProperWindowBasedOnEmail(\n                        emailController.text, context);\n                  }\n                },\n                child: Text(\'Kontynuuj\',\n                    style: TextStyle(\n                      fontSize: 30,\n                      color: Color(0xffffffff),\n                    ),\n                    textAlign: TextAlign.center),\n                style: ButtonStyle(\n                  backgroundColor: MaterialStateProperty.all<Color>(\n                    Color(0xFF2F45C6),\n                  ),\n                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(\n                    RoundedRectangleBorder(\n                      borderRadius: BorderRadius.circular(25.0),\n                    ),\n                  ),\n                ),\n              ),\n            ),\n            SizedBox(\n              height: 35.0,\n            ),\n            Text(\n              \'Mo\xc5\xbcesz te\xc5\xbc si\xc4\x99 zalogowa\xc4\x87 za pomoc\xc4\x85:\',\n              style: TextStyle(\n                fontSize: 18,\n                color: Color(0xff000000),\n              ),\n              textAlign: TextAlign.center,\n            ),\n            SizedBox(\n              height: 15.0,\n            ),\n            SignInButton(\n              Buttons.Google,\n              text: "Sign up with Google",\n              onPressed: () {},\n            ),\n            SignInButton(\n              Buttons.Facebook,\n              text: "Sign up with Facebook",\n              onPressed: () {},\n            )\n          ],\n        ),\n      ),\n      backgroundColor: const Color(0xFEF2F7FD),\n    );\n  }\n\n  Future<void> moveToProperWindowBasedOnEmail(\n      String text, BuildContext context) async {\n    //something\n    }\n  }\n}\n

\n

Answer 1

解决方案1：

在您的脚手架中，将“resizeToAvoidBottomInset”属性设置为 false。

    return Scaffold(
      resizeToAvoidBottomInset : false,
      body: YourWidgets(),
    );

解决方案2：

强制您的列与屏幕高度相同，然后将其放置在 SingleChildScrollView 中，以便 Flutter 在使用键盘时自动将屏幕向上滚动到足够的位置。

Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      physics: NeverScrollableScrollPhysics(),
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: MediaQuery.of(context).size.width,
          minHeight: MediaQuery.of(context).size.height,
        ),
        child: IntrinsicHeight(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              // CONTENT HERE
            ],
          ),
        ),
      ),
    ),
  );
}

Answer 2

最好的解决方案是将您的小部件包装在SingleChildScrollView：

\n

 return Scaffold(\n      appBar: AppBar(\n        title: Text("Zaloguj si\xc4\x99"),\n      ),\n      body: SingleChildScrollView(child: ...),\n  );\n

\n

Answer 3

我遇到了同样的问题，并将其添加到你的脚手架中，它说得很好

Scaffold(
  resizeToAvoidBottomInset: false, 
  ... 
)