键盘将 modalBottomSheet 推出边界,resizeToAvoidBottomInset 不起作用

问题描述

我在 Flutter 应用程序中遇到了问题。即使 Scaffold 将 resizetoAvoidBottomInset 设置为 false键盘也会向上推模态底部表单。我希望模态底部工作表保持在其初始位置。我将向您展示用于显示模态底部工作表的代码,并附上一个视频来向您展示该错误

Scaffold(
    resizetoAvoidBottomInset: false,key: _scaffoldKey,body: ...
)

showModalBottomSheet(
  context: context,isScrollControlled: true,backgroundColor: Colors.transparent,builder: (context) => Container(
      height: MediaQuery.of(context).size.height * 0.8,decoration: new Boxdecoration(
        color: Colors.white,borderRadius: new BorderRadius.only(
          topLeft: const Radius.circular(25.0),topRight: const Radius.circular(25.0),),child: SearchPlace((place,alreadyExists) {
        Navigator.pop(context);
        didSelectPlace(place,alreadyExists);
      })),);

希望你能帮助我,谢谢!

解决方法

好的,所以我自己找到了解决这个问题的方法。

我希望模态底部表单占据屏幕的 80%,但它总是由键盘推动。 为了解决这个问题,我将主要的 Container 包裹在一个 Column 小部件中,并添加了一个带有 GestureDetector 的附加透明容器(以消除底部工作表) 的高度为屏幕的 20%。之后,我将 Column 包裹在 SingleChildScrollView 中。现在一切都按预期进行!我在下面添加了一个视频。

showModalBottomSheet(
    context: context,isScrollControlled: true,backgroundColor: Colors.transparent,builder: (context) => SingleChildScrollView(
    child: Column(children: [
      GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },child: Container(
          color: Colors.transparent,height: MediaQuery.of(context).size.height * 0.2,),Container(
          height: MediaQuery.of(context).size.height * 0.8,decoration: new BoxDecoration(
            color: Colors.white,borderRadius: new BorderRadius.only(
              topLeft: const Radius.circular(25.0),topRight: const Radius.circular(25.0),child: SearchPlace((place,alreadyExists) => {
                Navigator.pop(context),didSelectPlace(place,alreadyExists),})),]),);