HarmonyOS 层叠布局：（Stack）打造灵活多变的UI界面

在应用开发中，布局设计是用户体验的关键之一。而在HarmonyOS中，层叠布局（Stack）是一种极为灵活的布局方式。它允许我们在同一个区域内放置多个组件，并根据需求将它们叠加起来，形成丰富的视觉效果。无论是广告展示还是卡片叠加效果，层叠布局都能轻松胜任。今天，我将带大家深入了解Stack布局的使用方法，并通过代码示例展示它的强大之处。

什么是层叠布局？

层叠布局（Stack）可以理解为一个容器，这个容器能够容纳多个子元素，并将这些元素按顺序叠加。默认情况下，后添加的元素会覆盖在前一个元素的上方。当然，你也可以通过设置元素的zIndex属性来自定义叠加顺序。借助这个功能，你可以实现复杂的页面布局，比如带有多个重叠元素的广告页面。

为了帮助大家更好地理解，下面我们先来看一个简单的示例：

@Entry
@Component
struct MyStackLayout {
  build() {
    Stack() {
      // 第一个元素：背景层
      Row()
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Blue)

      // 第二个元素：中间层
      Text('中间层')
        .width('70%')
        .height('70%')
        .backgroundColor(Color.Green)
        .textAlign(TextAlign.Center)
        .fontSize(20)

      // 第三个元素：顶层
      Button('点击我')
        .width('40%')
        .height('40%')
        .backgroundColor(Color.Orange)
        .fontColor(Color.White)
        .fontSize(18)
    }
    .width('100%')
    .height(200)
  }
}

在这个例子中，Stack布局中包含了三个子元素：一个充满背景色的容器，一个居中的文本和一个按钮。它们按照代码中的顺序依次叠加。

对齐方式

除了基本的叠加效果之外，Stack布局还支持多种对齐方式。你可以使用alignContent属性来控制子元素在容器中的位置。比如，你可以将元素对齐到容器的左上角、右下角或者居中等等。这种对齐方式让你可以灵活地控制元素的展示位置。

以下是一个设置不同对齐方式的示例：

@Entry
@Component
struct AlignStackExample {
  build() {
    Stack({ alignContent: Alignment.BottomEnd }) {
      Text('底部对齐')
        .width('80%')
        .height('50%')
        .backgroundColor(Color.Yellow)
        .textAlign(TextAlign.Center)
      
      Text('覆盖层')
        .width('60%')
        .height('30%')
        .backgroundColor(Color.Red)
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height(200)
  }
}

在这个示例中，alignContent: Alignment.BottomEnd将两个文本组件都对齐到Stack容器的右下角。第一个文本组件被第二个覆盖，但你可以通过调整zIndex属性来改变它们的显示顺序。

Z序控制

在层叠布局中，Z序（zIndex）是控制元素层级的关键属性。通过调整zIndex的值，你可以改变元素的叠放顺序。zIndex值越大，元素就越靠上，显示在其他元素之上。

来看一个关于zIndex的代码示例：

@Entry
@Component
struct ZIndexStackExample {
  build() {
    Stack() {
      Text('底层元素')
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Gray)
        .zIndex(1)

      Text('中间元素')
        .width('80%')
        .height('80%')
        .backgroundColor(Color.Blue)
        .zIndex(2)

      Text('顶层元素')
        .width('60%')
        .height('60%')
        .backgroundColor(Color.Green)
        .zIndex(3)
    }
    .width('100%')
    .height(200)
  }
}

在这个例子中，三个文本组件的zIndex值分别为1、2和3，zIndex值大的元素会覆盖在zIndex值小的元素之上。

实际应用场景

层叠布局非常适合用来构建复杂的UI界面，例如应用启动页面。下面是一个简单的应用示例：

@Entry
@Component
struct StackAppSample {
  private apps: string[] = ['应用1', '应用2', '应用3', '应用4'];

  build() {
    Stack() {
      Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(this.apps, (app) => {
          Button(app)
            .width(100)
            .height(100)
            .margin(10)
            .backgroundColor(Color.White)
            .fontColor(Color.Black)
        })
      }
      .width('100%')
      .height('80%')

      Text('启动菜单')
        .fontSize(24)
        .backgroundColor(Color.Black)
        .fontColor(Color.White)
        .padding(20)
        .alignSelf(Alignment.BottomCenter)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }
}

这个示例展示了一个简单的应用启动页面，应用图标通过Flex布局整齐排列在屏幕上方，而启动菜单则固定在页面底部，通过层叠布局实现。

希望通过以上内容，大家对HarmonyOS的Stack布局有了更深的理解。这种布局在实际开发中非常实用，尤其适用于需要多层次元素展示的场景。大家可以在自己的项目中尝试使用，灵活打造出符合需求的UI界面。