HarmonyOS UI Design: How to Use Stack in ArkTS?

Read the original article：HarmonyOS UI Design: How to Use Stack in ArkTS?

Introduction

The Stack component in HarmonyOS is a flexible layout tool for building layered user interfaces in applications. It places multiple views on top of each other, allowing control over which view is shown.

This article explains how to use the Stack component in ArkTS to design a tabbed interface. It also covers layout organization and simple design practices. The Stack component helps manage different views in a clear and structured way.

Advantages of Using the Stack Component

Layered Layout: The Stack component allows placing multiple views on top of each other in the same area.

Visibility Control: Each view in the Stack can be shown or hidden easily using visibility settings.

High Flexibility: Each child in the Stack can be positioned and sized independently for custom layouts.

Stack Implementation:

Let's create a few components. For example, let's use an image.

Image($r('app.media.table'))
  .width('100%')
  .height('100%')
  .padding({
    bottom:110
  })

Let's create an animation by looping over myCurves and rendering a small colored circle for each item. Each circle is rotated continuously using an infinite animation, with the rotation angle and timing controlled by the item's curve and a shared rotation value.

ForEach(myCurves, (item: MyCurve) => {
  Column() {
    Row()
      .width(10)
      .height(10)
      .borderRadius(15)
      .backgroundColor(item.color)
      .clip(true)
  }
  .width('50%')
  .height('55%')
  .rotate({ angle: this.dRotate - 90 })
  .animation({
    duration: 2000,
    iterations: -1,
    curve: item.curve,
    delay: 100
  })
}, (item: string, index: number) => item)

Now let's create 2 texts.

Column(){
  Text('BMI: ' + this.bmi_value)
    .fontSize(12)
    .fontWeight(FontWeight.Bold)
    .fontColor($r('app.color.blue_color'))
    .height('14%')
  Text('Your journey to strength starts here—small steps can lead to powerful transformations!')
    .fontStyle(FontStyle.Italic)
    .fontSize(10)
    .fontWeight(FontWeight.Bold)
    .fontColor(Color.Red)
    .height('14%')
    .width('80%')
    .padding({
      top:10
    })
}
.padding({
  top:20
})

Now it's time to create the UI using these components in the build method.

build() {
      Stack() {
        Image($r('app.media.table'))
          .width('100%')
          .height('100%')
          .padding({
            bottom:110
          })
        ForEach(myCurves, (item: MyCurve) => {
          Column() {
            Row()
              .width(10)
              .height(10)
              .borderRadius(15)
              .backgroundColor(item.color)
              .clip(true)
          }
          .width('50%')
          .height('55%')
          .rotate({ angle: this.dRotate - 90 })
          .animation({
            duration: 2000,
            iterations: -1,
            curve: item.curve,
            delay: 100
          })
        }, (item: string, index: number) => item)
        Column(){
          Text('BMI: ' + this.bmi_value)
            .fontSize(12)
            .fontWeight(FontWeight.Bold)
            .fontColor($r('app.color.blue_color'))
            .height('14%')
          Text('Your journey to strength starts here—small steps can lead to powerful transformations!')
            .fontStyle(FontStyle.Italic)
            .fontSize(10)
            .fontWeight(FontWeight.Bold)
            .fontColor(Color.Red)
            .height('14%')
            .width('80%')
            .padding({
              top:10
            })
        }
        .padding({
          top:20
        })
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.White)
  }

The final layout showcases a fully layered interface using the Stack component. It seamlessly overlays a full-screen background image with animated rotating indicators and descriptive text, demonstrating the power of Stack for building rich, multi-layered UI experiences.

Conclusion

This approach demonstrates a declarative and component-based UI architecture, where visuals are composed using reusable building blocks. The stack encourages clean separation of data and presentation, making it easy to scale and maintain dynamic, animated interfaces in a structured and reactive way.