场景
在使用一个组件作为另一个组件的背景时,不免需要使用Stack组件将两个组件堆叠起来。但是,顶层的宽高并不一定是固定的,如果底层预留的宽高不大,就会出现顶层盖过底层的问题。
需求
- Stack 组件需要获取上一层组件的宽高,从而改变下一层的宽高,让底层的宽高永远大于顶层。
解决方法
重复组件法
在底层重复构建顶层的组件,同时使用Opacity
将重复构建的组件隐藏。适用于顶层组件简单无其他功能,比如图片之类的。同时可以去除不影响布局的参数优化一定性能。
计算法
- 将两层使用一个
StatefulWidget
包裹 - 给顶层的组件设置一个
GlobalKey
- 利用
WidgetsBinding.instance.addPostFrameCallback
添加构建回调 - 回调中通过
key
获取顶层的大小 - 通过
setState(() {})
刷新这个StatefulWidget