Four-Corner Text Placement in a Stack (ArkUI)

Read the original article：Four-Corner Text Placement in a Stack (ArkUI)

Four-Corner Text Placement in a Stack (ArkUI)

Requirement Description

Place four Text components at the top-left, top-right, bottom-left, and bottom-right corners within a Stack.

Background Knowledge

• justifyContent aligns children along the main axis for Row/Column. See
• Stack provides layered layout and fixed positioning space. See

Implementation Steps

1. Use a Stack as the container and stretch it to fill its parent.
2. Inside the Stack, place a Column that has two Rows:
   • The first Row holds the top-left and top-right texts; set justifyContent(FlexAlign.SpaceBetween) and width('100%').
   • The second Row holds the bottom-left and bottom-right texts; set the same properties.
3. Space the two Rows vertically by applying justifyContent(FlexAlign.SpaceBetween) on the parent Column and give it height('100%').
4. (Wearables) Keep sizes in vp, avoid absolute pixel offsets, and respect safe areas for round screens.

Code Snippet / Configuration

@Entry
@Component
struct Index {
  build() {

    Stack({ alignContent: Alignment.Center }) {
      Column() {
        Row() {
          Text('Top-Left')
            .fontSize('9.00fp')
            .fontColor(Color.Red)

          Text('Top-Right')
            .fontSize('9.00fp')
            .fontColor(Color.Red)

        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)

        Row() {
          Text('Bottom-Left')
            .fontSize('9.00fp')
            .fontColor(Color.Red)

          Text('Bottom-Right')
            .fontSize('9.00fp')
            .fontColor(Color.Red)

        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      // For wearables, consider safe area if needed:
      // .safeArea({ type: SafeAreaType.SYSTEM, edges: [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM] })
    }
    .width('60%')
    .height('60%')
    .backgroundColor(Color.White)
    .margin({
      top: "22%",
      left: "22%"
    })
  }
}

Test Results

• Verified that all four Text nodes anchor to the intended corners on rectangular and round screens (Watch 5) when the parent fills the viewport.

Limitations or Considerations

• SDK / Tools: Works with API Version 19 Release+, HarmonyOS 5.1.1 Release SDK+, DevEco Studio 5.1.1 Release+.
• Wearables: On round displays, ensure important content stays within visible bounds; consider safeArea as shown.
• Scaling: If using larger fonts or dynamic content, add padding to avoid clipping.

Related Documents or Links

• justifyContent (Column/Row)
• Stack

Written by Bunyamin Eymen Alagoz