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

Question

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

我的颤振小部件：

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将a包裹起来SingleChildScrollView意味着Textfield当键盘出现时 s 是隐藏的。
• 设置在 sresizeToAvoidBottomInset: false上Scaffold也会使TextFields 隐藏在键盘后面。
• Column用 a替换ListView意味着我无法设置 amainAxisAlignment来MainAxisAlignment.end获得我在内容底部对齐的屏幕截图中所追求的外观。

问题：

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

标签： flutterflutter-layout

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