flutter 组件中, Stack 组件的使用频率还是很高的, Stack 组件的作用是实现层叠布局, 配合 Positions 组件和 Align 组件, 将实现子组件绝对定位.
那么, 它是如何决定子组件的摆放位置的呢? 这个算法是由 RenderStack 类来决定, 下面是布局算法的过程:
1) 初始化:
未定位的子组件, 会按照列表顺序放置在其他子组件的上面, 未定位的组件是指 top, left, right, bottom 为 null 的组件, 他们初始化时会被放置为 Stack 组件的左上角。
2) 确定 Stack 组件的大小
Stack 组件接着调整自身大小, 以包括所有未定位的子组件, 如果没有未定位的子组件, Stack 将会尽可能的大。
3) 确定子组件的 left 值和 top 值
未定位子组件的最终位置将由 alignment 参数来决定。 每一个未定位子组件的 left 值将会不同, 它在子组件的 width 值和 Stack 的 width 值之间由 alignment.x 缩放来决定。 同样的, top 值也是由 alignment.y 值缩放来决定. 请注意: 0.0 是 x, y 值的默认值, 将位于左上角, 0.5 将会位于中间位置.
4) 确定子组件的宽高
计算子组件的确切位置。 如果子组件的 top 值和 bottom 值不为 null, 它将获得固定的高度, 高度的计算方式是 Stack 的高度减去子组件的 top 值和 bottom 值, 同样的, 子组件的宽度也是有 Stack 的宽度, 以及自身的 left, right 值来决定. 如果子组件无法获得确切的宽高, 它将没有边界约束.
5) 确定子组件的位置
Stack 根据子组件的 StackParentData 的 top, right, bottom, left 的属性值来确定子组件的摆放位置。 举个例子， 如果 bottom 值是 10.0, 将会在 Stack 组件的底部和子组件的底部之间插入 10.0 像素。 如果子组件超出 Stack 的边界, 子组件将会被裁剪。
如果您觉得这篇文章对您的学习很有帮助, 请您也分享它, 让它能再次帮助到更多的需要学习的人. 您的支持将鼓励我继续创作 !