層疊布局（Stack）

概述

層疊布局（StackLayout）用于在屏幕上預(yù)留一塊區(qū)域來顯示組件中的元素，提供元素可以重疊的布局。層疊布局通過Stack容器組件實現(xiàn)位置的固定定位與層疊，容器中的子元素（子組件）依次入棧，后一個子元素覆蓋前一個子元素，子元素可以疊加，也可以設(shè)置位置。

層疊布局具有較強(qiáng)的頁面層疊、位置定位能力，其使用場景有廣告、卡片層疊效果等。

如圖1，Stack作為容器，容器內(nèi)的子元素（子組件）的順序為Item1->Item2->Item3。

開發(fā)布局

Stack組件為容器組件，容器內(nèi)可包含各種子組件。其中子組件默認(rèn)進(jìn)行居中堆疊。子元素被約束在Stack下，進(jìn)行自己的樣式定義以及排列。

對齊方式

Stack組件通過alignContent參數(shù)實現(xiàn)位置的相對移動。如圖2所示，支持九種對齊方式。

圖2 Stack容器內(nèi)元素的對齊方式

Z序控制

Stack容器中兄弟組件顯示層級關(guān)系可以通過Z序控制的zIndex屬性改變。zIndex值越大，顯示層級越高，即zIndex值大的組件會覆蓋在zIndex值小的組件上方。

Stack({ alignContent: Alignment.BottomStart }) {
  Column() {
    Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
  }.width(100).height(100).backgroundColor(0xffd306)

  Column() {
    Text('Stack子元素2').fontSize(20)
  }.width(150).height(150).backgroundColor(Color.Pink)

  Column() {
    Text('Stack子元素3').fontSize(20)
  }.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)

上圖中，最后的子元素3的尺寸大于前面的所有子元素，所以，前面兩個元素完全隱藏。改變子元素1，子元素2的zIndex屬性后，可以將元素展示出來。

Stack({ alignContent: Alignment.BottomStart }) {
  Column() {
    Text('Stack子元素1').fontSize(20)
  }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)

  Column() {
    Text('Stack子元素2').fontSize(20)
  }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)

  Column() {
    Text('Stack子元素3').fontSize(20)
  }.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)

場景示例

使用層疊布局快速搭建手機(jī)頁面顯示模型。

@Entry
@Component
struct StackSample {
  private arr: string[] = ['APP1', 'APP2', 'APP3', 'APP4', 'APP5', 'APP6', 'APP7', 'APP8'];

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(this.arr, (item) => {
          Text(item)
            .width(100)
            .height(100)
            .fontSize(16)
            .margin(10)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .backgroundColor(0xFFFFFF)
        }, item => item)
      }.width('100%').height('100%')

      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        Text('聯(lián)系人').fontSize(16)
        Text('設(shè)置').fontSize(16)
        Text('短信').fontSize(16)
      }
      .width('50%')
      .height(50)
      .backgroundColor('#16302e2e')
      .margin({ bottom: 15 })
      .borderRadius(15)
    }.width('100%').height('100%').backgroundColor('#CFD0CF')
  }
}