iOS tabbar毛玻璃适配

一直对iOS的毛玻璃效果很热衷，体验也确实不错。Android平台虽然也能实现，但是效果感觉一直没有iOS好，而且用的App好像也不多。
最近在用flutter写地图应用，flutter对毛玻璃支持较好。但是我的应用是一个地图应用，想在地图上面覆盖一层毛玻璃，显示一些图标文字，想想挺漂亮，居然实现不了。估计和地图是platformview有关系。

看到官方在最新的版本中加入了iOS tabbar毛玻璃效果，立马拿过来用一用。
发现一个问题：之前全局设置了安全区域safearea，iPhoneX等刘海机型能很好的适配。
现在为了毛玻璃效果，需要去掉safeara底部适配，这是全局性质的，导致其他页面都没有safeara底部适配了，每个页面都需要单独设置，挺麻烦。

没办法，只能每个页面单独设置了，下面是我的方法，有点麻烦。小伙伴有更好的方法希望能分享一下哦~
最外面的一个container加个padding，如果底部有悬浮按钮，为了避免在按钮下面穿透，需要也加个padding。

<view class="container"></view>  

.container {  
  padding-bottom: 0;  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom);  
}  

# 如果底部有悬浮按钮，需要这样处理，加一个padding  

.bottom-review {  
  background-color: white;  
  position: fixed;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  display: flex;  
  align-items: center;  
  padding: 10px 10px;  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);  
  border-top: #f6f6f6 solid 1px;  
}

这是效果图：