微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决键盘将 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),})),]),);

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。