颤振:出现键盘时向上滚动屏幕

时间:2020-05-20 16:49:51

标签: flutter dart

我正在尝试构建一个登录屏幕,该屏幕在我单击电话号码字段键盘时会立即在顶部包含电话号码字段,在底部包含图像和登录按钮,但我的“登录按钮”隐藏在键盘,我使用了“ 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",
....

2 个答案:

答案 0 :(得分:0)

我可以给您一个提示,因为您的代码有点难以理解,您可以使用MediaQuery.of(context).viewInsets.bottom。现在的问题是它的作用是什么,它将对我有什么帮助。

  1. 它的作用:由于它是继承的小部件,因此将提供开发人员应避免的底部填充(基本上是在您的情况下,系统UI在您的键盘上占用空间),因为它是继承的小部件,因此它将在您尽快构建打开键盘。

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

答案 1 :(得分:0)

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

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个孩子