底部弹窗怎么做 2023-08-14 周一

简介

底部弹窗还是挺多的，比如这样的

企业微信截图_5baeb8fc-de51-4c1a-9f7b-fe31869cfc25.png

实现方案1

采用系统提供的showModalBottomSheet

• 不过这里有个问题，就是点击的时候，会默认响应，内容会被设置为初始状态，原因一直没找到。如果要解决这个问题，那么就要自己套一个GestureDetector，防止系统做不可预料的事情。

• 这篇文章就提到了这个问题：
  showModalBottomSheet的基本用法，自定义背景和状态管理

企业微信截图_2b56447b-b690-4bfc-b809-3a941fbdb254.png

实现方案2：

GetX插件的Get.bottomSheet()方法;

• 这个方法副作用较小，当前项目中一直在用；

这是页面

虽然是底部弹出框，但是这就相当于是加了一个页面。
如果想要让弹框消失，就需要使用Get.back()