鴻蒙HarmonyOS實戰-ArkUI元件（Stack）

蜀道山QAQ發表於2024-03-23
鴻蒙UI元件

🚀一、Stack

🔎1.概述

HarmonyOS中的層疊佈局Stack是一種可以將多個元件按照一定順序疊放的佈局。Stack佈局中的元件可以是任意型別的元件，且每個元件都可以設定在哪個位置疊放。在疊放時，後新增的元件會自動覆蓋前面新增的元件。

Stack佈局佈局中的每個子元件都可以設定偏移量、旋轉角度等屬性，這樣可以實現更加豐富的疊放效果。此外，Stack佈局還支援新增動畫，透過動畫可以實現元件的平移、旋轉等動態效果，使頁面更加生動有趣。

因為Stack佈局支援多種型別的元件，且可以實現豐富的疊放效果，所以在開發中可以廣泛應用，如在製作卡片式佈局、輪播圖等場景中都可以使用Stack佈局。

Stack作為容器，容器內的子元素（子元件）的順序為Item1->Item2->Item3
image

🔎2.開釋出局

Stack佈局的核心思想是將多個控制元件按照一定順序疊放在一起，比如，一個影像控制元件在上面，一個文字控制元件在下面。這種佈局方式可以讓應用程式在不同的螢幕尺寸和解析度下，以及不同的裝置上呈現出更加統一的效果。同時，Stack佈局還支援一些特殊的效果，比如在介面上實現彈出效果、拖拽效果等等。

在HarmonyOS中，開發者可以透過使用ArkUI提供的Stack佈局來快速構建具有層疊效果的介面。Stack佈局支援多種控制元件的佈局方式，比如文字、影像、按鈕等等。開發者可以根據自己的需要選擇不同的控制元件進行佈局。透過合理的設計和排布，可以讓應用程式在不同的裝置上呈現出更加統一、美觀的效果。

具有如圖：

Column(){
  Stack({ }) {
    Column(){}.width('90%').height('100%').backgroundColor('#ff58b87c')
    Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa')
    Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
  }.width('100%').height(150).margin({ top: 50 })
}

image

🔎3.對齊方式

ArkUI中Stack的alignContent屬性用於定義Stack內的所有子元素在交叉軸上的排列方式。該屬性僅在Stack容器內含有多行子元素時才會生效。
image

🔎4.Z序控制

在HarmonyOS中，層疊佈局(Stack)的zIndex屬性用於指定子佈局的疊放順序，決定了子佈局的顯示先後順序。zIndex屬性值較大的子佈局會在zIndex屬性值較小的子佈局的上方顯示。例如，zIndex屬性值為2的子佈局會在zIndex屬性值為1的子佈局的上方顯示。

如果兩個子佈局的zIndex屬性值相同，則它們的顯示順序將按照它們在佈局中的位置確定。越靠後的子佈局會在越靠前的子佈局的上方顯示。

值得注意的是，只有在使用層疊佈局(Stack)時，zIndex屬性才會起作用。如果使用線性佈局或網格佈局等其他型別的佈局，則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)

image

🔎5.宮格案例

@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('聯絡人').fontSize(16)
        Text('設定').fontSize(16)
        Text('簡訊').fontSize(16)
      }
      .width('50%')
      .height(50)
      .backgroundColor('#16302e2e')
      .margin({ bottom: 15 })
      .borderRadius(15)
    }.width('100%').height('100%').backgroundColor('#CFD0CF')
  }
}

image

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

相關文章