Flutter：出现键盘时向上滚动屏幕

Question

我正在尝试构建一个登录屏幕，其中包含顶部的电话号码字段以及底部的图像和登录按钮，一旦我点击电话号码字段键盘升起但我的“登录按钮”隐藏在键盘后面，我已使用“SingleChildScrollView”，以便当键盘上升时页面变为可滚动但登录按钮不会出现在键盘顶部。

这是代码片段：

return Scaffold(
  backgroundColor: white.color,
  body: SingleChildScrollView(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
                  Container(
                        child: Text(
                          'Enter your mobile number',
                          style: TextStyle(
                            fontSize: headSize.fontSize,
                            fontWeight: FontWeight.w400,
                            color: black.color,
                            fontFamily: 'ProductSans',
                          ),
                        ),
                      ),
                      Container(
                        height: screenHeight / 15,
                        child: Center(
                          child: SizedBox(
                            height: screenHeight / 6,
                            width: double.infinity,
                            child: RaisedButton(
                              color: indigo.color,
                              shape: borderRadius,
                              child: Text(
                                "Continue",
....

Answer 1

我可以给你一个提示，因为你的代码有点难以理解，你可以使用 MediaQuery.of(context).viewInsets.bottom。 现在的问题是它的作用以及它将如何帮助我。

1. 它的作用：它将提供开发人员应该避免的底部填充（基本上由系统UI在您的情况下键盘占用空间），因为它是一个继承的小部件，因此它会在您打开键盘后立即构建.

2.如何使用：您可以在列底部创建一个空容器或大小框，并设置其 height=MediaQuery.of(context).viewInsets.bottom 并将您的列包装在单个子滚动视图中。

Answer 2

尝试用例如 100 替换screenHeight / 15 and screenHeight / 6并检查结果。

Container(
          height: screenHeight / 15,
          child: Center(
            child: SizedBox(
              height: screenHeight / 6,
              width: double.infinity,
              child: RaisedButton(
                color: indigo.color,
                shape: borderRadius,
                child: Text(
                  "Continue",

顺便说一句，您将父级的高度设置为小于子级。 我想知道为什么？ :)

例如，如果 screenHeight = 100

100/15 = 6.6 父母

100/6 = 16.6 孩子