颤振底部溢出 n 个像素，列结束对齐

Question

我正在尝试在 Flutter 中显示一个简单的注册屏幕，但在显示键盘时出现bottom overflowed by n pixels 错误。

我的 Flutter 小部件：

class SignUpScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
            padding: const EdgeInsets.all(16),
            child: SafeArea(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisAlignment: MainAxisAlignment.end,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Text(S
                          .of(context)
                          .signUpTitle,
                          style: AppTextTheme.kBigTitle),
                      Container(height: 16),
                      Text(
                          "Some text describing what happens when we do stuff with things and other stuff that probably won't fit in this layout and will give us the horrible error banner ath the bottom of the screen. There's scope for even more text depending on how I'm feeling this evening. It could be that I stop typing, it could be that I type more and more. It really depends on what ",
                          style: AppTextTheme.kParagraph),
                      Container(height: 24),
                      Text("Email address"),
                      TextField(
                          decoration: InputDecoration(
                              hintText: "Email address")),
                      Container(height: 8),
                      Text("Password"),
                      TextField(
                          decoration: InputDecoration(hintText: "Password")),
                      Container(height: 24),
                      MaterialButton(
                        onPressed: () {
                          // Do stuff
                        },
                        child: Text("Sign up"),
                      ),
                      Container(height: 32),
                      FlatButton(
                        child: Column(
                          children: [
                            Text(
                              "Some other text",
                              style: AppTextTheme.kParagraphBold,
                            ),
                            Text("Sign in instead",
                                style: AppTextTheme.kParagraphBold.copyWith(
                                    decoration: TextDecoration.underline)),
                          ],
                        ),
                        onPressed: () {
                          Navigator.pushReplacementNamed(
                              context, RoutePaths.SIGN_IN);
                        },
                      )
                    ]))));
  }
}

我浏览了各种解决方案，但每个解决方案都有一个不受欢迎的权衡，要么会破坏设计，要么会产生不受欢迎的用户体验：

• 将Column 包裹在SingleChildScrollView 中意味着当键盘出现时Textfields 将被隐藏。
• 在Scaffold 上设置resizeToAvoidBottomInset: false 也会使TextFields 隐藏在键盘后面。
• 将Column 替换为ListView 意味着我无法将mainAxisAlignment 设置为MainAxisAlignment.end 以在内容底部对齐的屏幕截图中获得我想要的外观。

问题：

如何实现我想要的 UI，内容对齐屏幕底部，并且在用户键入时仍然能够看到 TextFields 而不会出现像素溢出错误？

Answer 1

我刚刚通过使用Container 和SingleChildScrollview 包装列小部件来获得您的用户界面来解决它。希望对您有所帮助。

class SignUpScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: SafeArea(
          child: Container(
            alignment: Alignment.bottomCenter,
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Text(
                    'Sign Up',
                    // style: AppTextTheme.kBigTitle),
                    style: Theme.of(context).textTheme.headline,
                  ),
                  Container(height: 16),
                  Text(
                    "Some text describing what happens when we do stuff with things and other stuff that probably won't fit in this layout and will give us the horrible error banner ath the bottom of the screen. There's scope for even more text depending on how I'm feeling this evening. It could be that I stop typing, it could be that I type more and more. It really depends on what ",
                    // style: AppTextTheme.kParagraph),
                    style: Theme.of(context).textTheme.body1,
                  ),
                  Container(height: 24),
                  Text("Email address"),
                  TextField(
                    decoration: InputDecoration(hintText: "Email address"),
                  ),
                  Container(height: 8),
                  Text("Password"),
                  TextField(
                    decoration: InputDecoration(hintText: "Password"),
                  ),
                  Container(height: 24),
                  MaterialButton(
                    onPressed: () {
                      // Do stuff
                  },
                    child: Text("Sign up"),
                  ),
                  Container(height: 32),
                  FlatButton(
                    child: Column(
                      children: [
                        Text(
                          "Already have an account ?",
                          // style: AppTextTheme.kParagraphBold,
                          style: Theme.of(context).textTheme.subtitle,
                        ),
                        Text("Sign in",
                          // style: AppTextTheme.kParagraphBold
                          style: Theme.of(context)
                            .textTheme
                            .subtitle
                            .copyWith(
                                decoration:   TextDecoration.underline)),
                      ],
                    ),
                    onPressed: () {
                      // Navigator.pushReplacementNamed(
                      //     context, RoutePaths.SIGN_IN);
                    },
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}