抖动底部底部对齐列时溢出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中表示在出现键盘时隐藏了Textfield。
• 在resizeToAvoidBottomInset: false上设置Scaffold也将TextField隐藏在键盘后面。
• 将Column替换为ListView意味着我无法将mainAxisAlignment设置为MainAxisAlignment.end以获得在屏幕底部对齐的屏幕快照中的外观。

问题：

如何在内容朝向屏幕底部对齐的情况下实现所需的UI，并且当用户键入时没有出现像素溢出错误，仍然能够看到TextField？

Answer 1

我刚刚通过用Container和SingleChildScrollview包装列窗口小部件来获得UI来解决它。希望对您有帮助。

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