解決Flutter ModalBottomSheet無法設(shè)置高度的問題

最近在做一個Flutter的底部彈窗,但是發(fā)現(xiàn)bottomsheet在彈出的時(shí)候最高高度始終限制在了屏幕的二分之一的位置,再往高就會報(bào)bottom overflow了,但是我們的彈窗設(shè)計(jì)稿是占據(jù)屏幕三分之二的位置的,顯然Flutter的這個限制是無法滿足需求的。

有問題的截圖如下:


Screenshot_20190626-101954.jpg

怎么去解決這個問題???
當(dāng)時(shí)百度Google了兩個小時(shí),發(fā)現(xiàn)了flutter 的issue,說了很多辦法,但是都是沒有實(shí)際性解決問題的,既然找不到現(xiàn)成的辦法,看源碼吧,然后我就直接打開了showModalBottomSheet這個方法進(jìn)行查看,因?yàn)闀r(shí)間緊,全局搜了height的關(guān)鍵字,發(fā)現(xiàn)了一個重要的一點(diǎn)

image.png

flutter在這里強(qiáng)制將最大高度設(shè)置為constraints.maxHeight的9/16,看來問題癥結(jié)找到了,本著快速驗(yàn)證的原則,直接修改flutter源碼去掉后面的這些,run了一下,果然好了,修改之后的截圖如下


Screenshot_20190626-102017.jpg

bottomsheet高度一下子高了好多,看來這是關(guān)鍵所在啊,但是如果修改flutter源碼,我們的對外打包是在服務(wù)器上進(jìn)行的,不可能去直接修改服務(wù)器的flutter源碼,而且以后flutter升級的時(shí)候這個也是個問題,所以我將bottom_sheet的源碼直接拷貝了出來,

第二個方案是重寫bottomsheet,替換這里的maxheight,但是問題來了,這個dart里面的很多類都是私有的,你根本無法重寫,怎么辦呢?

拷貝?。?!然后更換了名字為adjustable_bottomsheet.dart,將這個文件復(fù)制到自己的業(yè)務(wù)中,將import的地方加上flutter的路徑前綴,整個dart文件被我們復(fù)制了一份出來,沒有報(bào)錯了,完美,然后為了防止方法名沖突,將這個復(fù)制類的方法改成如下:

image.png

然后在自己的業(yè)務(wù)中
import 'adjustable_bottomsheet.dart';

將showModalBottomsheet 更換成 showAdjustableBottomSheet ,

大功告成?。。?!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容