解决 Flutter showBottomSheet 设置高度没有作用的?
最近在做一个电商项目,其中规格视图 Flutter 的底部弹窗,但是发现 showBottomSheet 在弹出的时候最高高度始终限制在了屏幕的二分之一的位置,再往高设置仍然还是一半高度,但是我们的弹窗设计稿是占据屏幕三分之二的位置的,显然 Flutter 的这个限制是无法满足需求的。 有问题的截图如下:怎么去解决这个问题??? 当时百度 Google了两个小时,发现了 Flutt...
最近在做一个电商项目,其中规格视图 Flutter 的底部弹窗,但是发现 showBottomSheet 在弹出的时候最高高度始终限制在了屏幕的二分之一的位置,再往高设置仍然还是一半高度,但是我们的弹窗设计稿是占据屏幕三分之二的位置的,显然 Flutter 的这个限制是无法满足需求的。
有问题的截图如下:
怎么去解决这个问题???
当时百度 Google了两个小时,发现了 Flutter 的 issue,说了很多办法,但是都是没有实际性解决问题的,既然找不到现成的办法,看源码吧,然后我就直接打开了showBottomSheet 这个方法进行查看,因为时间紧,全局搜了 height 的关键字,发现了一个重要的一点:
Flutter 在这里强制将最大高度设置为 constraints.maxHeight 的 9/16,看来问题症结找到了,本着快速验证的原则,直接修改 Flutter 源码去掉后面的这些,run 了一下,果然好了,修改之后的截图如下:
bottomsheet 高度一下子高了好多,看来这是关键所在啊,但是如果修改 Flutter 源码,我们的对外打包是在服务器上进行的,不可能去直接修改服务器的 Flutter 源码,而且以后 Flutter 升级的时候这个也是个问题,所以我将 bottom_sheet 的源码直接拷贝了出来。
第二个方案是重写 bottomsheet,替换这里的 maxheight,但是问题来了,这个dart里面的很多类都是私有的,你根本无法重写,怎么办呢?
拷贝!!!然后更换了名字为 adjustable_bottomsheet.dart,将这个文件复制到自己的业务中,将 import 的地方加上 Flutter 的路径前缀,整个 dart 文件被我们复制了一份出来,没有报错了,完美,然后为了防止方法名冲突,将这个复制类的方法改成如下:
然后在自己的业务中,导入:
import 'adjustable_bottomsheet.dart';
将 showBottomsheet 更换成 showAdjustableBottomSheet ,大功告成!!!!
更多推荐




所有评论(0)