Flutter - SingleChildScrollView 不滚动到键盘打开的列底部

Question

我在我的应用程序的许多地方都使用了 SingleChildScrollView，一切都很好。但是，在下面的场景中，当键盘弹出时，它不能滚动到列的底部。

Future<void> _showCupertinoModalBottomSheet() async {
    final Size screenSize = MediaQuery.of(context).size;

    await showCupertinoModalPopup(
        context: context,
        builder: (BuildContext context) {
          return Container(
            height: screenSize.height * 0.8,
            color: CupertinoColors.white,
            child: Column(
              children: <Widget>[
                CupertinoTextField(
                ),
                Expanded(
                  child: SingleChildScrollView(
                    child: Column(
                      children: <Widget>[
                        //List of widgets
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        });
  }

不知道为什么它可以滚动但不能滚动到底部，并且有些内容被键盘隐藏了。

感谢任何帮助！

Answer 1

添加填充小部件有效

Future<void> _showCupertinoModalBottomSheet() async {
  final Size screenSize = MediaQuery.of(context).size;
  await showCupertinoModalPopup(
    context: context,
    builder: (BuildContext context) {
      return Padding(
        padding: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        child: Container(
          height: screenSize.height * 0.8,
          color: CupertinoColors.white,
          child: Column(
            children: <Widget>[
              CupertinoTextField(),
              Expanded(
                child: SingleChildScrollView(
                  child: Column(
                    children: <Widget>[
                      for (int i = 0; i < 50; i++) Text(i.toString())
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    },
  );
}

Answer 2

作为最后的手段，也许可以尝试添加一个SizedBox 小部件作为SingleChildScrollView 的最后一个孩子。或者，您可以将其包装在 Padding 中。无论哪种方式，将SizedBox的toppadding参数或height参数设置为MediaQuery.of(context).size.height / x。 X 是一个可调整的值，您可以使用它来尝试获取它没有向下滚动到的屏幕高度的百分比。这会将其他所有内容推高一定程度。

同样，这很“hacky”，所以只有在找不到其他解决方案时才使用它。

也可以尝试在您的Scaffold 中设置这些，它们可能会有所帮助：

resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,

另外，将您的 stateless 小部件更改为 stateful 小部件有时会有所帮助。