大家好我是海岛,今天和大家分享一下在传智博学谷学习的一些知识分享,关于Stack组件的用法。
这里复制下HarmonyOs官网的内容
概述
层叠布局(StackLayout)用于在屏幕上预留一块区域来显示组件中的元素,提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠,容器中的子元素(子组件)依次入栈,后一个子元素覆盖前一个子元素,子元素可以叠加,也可以设置位置。
层叠布局具有较强的页面层叠、位置定位能力,其使用场景有广告、卡片层叠效果等。
如图1,Stack作为容器,容器内的子元素(子组件)的顺序为Item1->Item2->Item3。
开发布局
Stack组件为容器组件,容器内可包含各种子组件。其中子组件默认进行居中堆叠。子元素被约束在Stack下,进行自己的样式定义以及排列。
@Entry
@Component
struct Demo2 {
build() {
Stack({
alignContent: Alignment.Center
}) {
// 写在下面的组件会覆盖在前面的组件上
Column() {
Text("第一层(粉色)").fontSize(22)
}.height("100%").width("100%").backgroundColor(Color.Pink)
Column() {
Text("第二层(橙色)").fontSize(22)
}.height("50%").width("100%").backgroundColor(Color.Orange)
Column() {
Text("第三层(绿色)").fontSize(22)
}.height("30%").width("100%").backgroundColor(Color.Green)
}
}
}
其实官网的讲解和示例已经十分清楚了,我这里主要是和大家更多的分享下我在实际开发使用Stack的场景
比如在这个场景中美团点餐的页面中,就使用到了stack组件作为最外层的组件来包裹其他子组件,例如底部的按钮,我们就可以使用 Stack({ alignContent: Alignment.Bottom })的方式使子组件底部对齐,调整整个页面的布局效果,当点击外卖小哥的头像查看购物车时,因为是stack布局,可使购物车组件覆盖在上面,起到了传统前端的底部卡片弹出的效果。