鸿蒙arkts的容器组件层叠布局（Stack）的用法_arkts stack

大家好我是海岛，今天和大家分享一下在传智博学谷学习的一些知识分享，关于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布局，可使购物车组件覆盖在上面，起到了传统前端的底部卡片弹出的效果。