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

Question

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

A RenderFlex overflowed by 227 pixels on the bottom.

The relevant error-causing widget was: 
  Column file:///C:/../lib/ui/pages/EmailPage.dart:37:16
The overflowing RenderFlex has an orientation of Axis.vertical.
The 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.

Consider 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.
This 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.

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

代码：

import 'dart:io';

//imports

import 'LoginPage.dart';

class EmailPage extends StatefulWidget {
  static final routeName = 'edit-product';

  @override
  _EmailPage createState() => _EmailPage();
}

class _EmailPage extends State<EmailPage> {
  ...;

  final emailController = TextEditingController();

  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Zaloguj się"),
      ),
      body: Container(
        padding: EdgeInsets.all(40.0),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            FlutterLogo(size: 130),
            SizedBox(
              height: 30.0,
            ),
            Text(
              'Zaloguj lub zarejestruj się za pomocą adresu e-mail',
              style: TextStyle(
                fontSize: 18,
                color: Color(0xff000000),
              ),
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: 30.0,
            ),
            Form(
              child: TextFormField(
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter an email';
                  } else if (!EmailValidator.validate(value)) {
                    return 'Please enter proper mail';
                  }
                  return null;
                },
                controller: emailController,
                decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Adres e-mail',
                    fillColor: Color(0xffdbdbdb),
                    filled: true),
              ),
              key: _formKey,
            ),
            SizedBox(
              height: 15.0,
            ),
            ConstrainedBox(
              constraints: BoxConstraints.tightFor(width: 240, height: 60),
              child: ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    moveToProperWindowBasedOnEmail(
                        emailController.text, context);
                  }
                },
                child: Text('Kontynuuj',
                    style: TextStyle(
                      fontSize: 30,
                      color: Color(0xffffffff),
                    ),
                    textAlign: TextAlign.center),
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(
                    Color(0xFF2F45C6),
                  ),
                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25.0),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 35.0,
            ),
            Text(
              'Możesz też się zalogować za pomocą:',
              style: TextStyle(
                fontSize: 18,
                color: Color(0xff000000),
              ),
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: 15.0,
            ),
            SignInButton(
              Buttons.Google,
              text: "Sign up with Google",
              onPressed: () {},
            ),
            SignInButton(
              Buttons.Facebook,
              text: "Sign up with Facebook",
              onPressed: () {},
            )
          ],
        ),
      ),
      backgroundColor: const Color(0xFEF2F7FD),
    );
  }

  Future<void> moveToProperWindowBasedOnEmail(
      String text, BuildContext context) async {
    //something
    }
  }
}

Answer 1

解决方案 1：

在您的 Scaffold 中，将“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：

 return Scaffold(
      appBar: AppBar(
        title: Text("Zaloguj się"),
      ),
      body: SingleChildScrollView(child: ...),
  );