Diagonal Corner Placement in ArkUI: RelativeContainer vs. Stack vs. Absolute Positioning
Problem Description
The requirement is to achieve diagonal layout effects where one child component is positioned at the top-left corner of its parent container, and another child component is positioned at the bottom-right corner.
Background Knowledge
How to implement a diagonal layout effect where one child component is positioned at the top-left corner of the parent container, and another child component is positioned at the bottom-right corner. Reference image below.
- Stack Layout is used to reserve an area on the screen to display elements in components, providing a layout where elements can overlap. The stack layout uses the Stack container component to implement fixed positioning and stacking. Child elements in the container are pushed onto the stack in sequence, with each subsequent child element covering the previous one. Child elements can overlap, and their positions can be set.
- Relative Layout is a container that uses relative positioning, allowing child elements inside the container to set relative positional relationships. It is suitable for handling complex interface scenarios where multiple child elements need to be aligned and arranged. Child elements can specify sibling elements or the parent container as anchor points for relative positioning.
- Position Attribute: Determines the position of child components relative to the parent component’s content area.
Solution
Solution 1: Using Relative Layout
Implementation Principle: Through the RelativeContainer in relative layout, specify the relative relationship between two child components in the container to make them diagonal to each other.
Example code:
@Entry
@Component
struct RelativeContainerPage {
build() {
Column() {
Text('Use relative layouts')
.fontSize(10)
.margin({ bottom: 10 })
RelativeContainer() {
Row()
.width(50)
.height(50)
.justifyContent(FlexAlign.Center)
.backgroundColor('#0A59F7')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
Row()
.width(50)
.height(50)
.justifyContent(FlexAlign.Center)
.backgroundColor('#F1F3F5')
.alignRules({
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
right: { anchor: '__container__', align: HorizontalAlign.End }
})
}
.width(150)
.height(150)
.border({ width: 2, color: '#6699FF' })
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
Implementation effect:
Solution 2: Using Stack Component
Implementation Principle: Set the alignment of multiple child components within the container, but the width and height of the Stack component need to be defined to control the overlapping of child components.
Note: When there are multiple nodes with overlapping touch areas in the Stack component (e.g., two nodes), by default, only the topmost node will undergo touch testing. If you need the lower node to trigger touch testing, set hitTestBehavior to HitTestMode.Transparent for the upper node.
Example code:
@Entry
@Component
struct StackPage {
build() {
Column() {
Text('Using the Stack Component')
.fontSize(10)
.margin({ bottom: 10 })
Stack({ alignContent: Alignment.TopStart }) {
Row()
.size({ width: '50', height: '50' })
.backgroundColor('#F1F3F5')
Stack({ alignContent: Alignment.BottomEnd }) {
Row()
.size({ width: '50', height: '50' })
.backgroundColor('#0A59F7')
}
.width('150')
.height('150')
.border({ width: 2, color: '#6699FF' })
// To trigger touch testing on lower-level components, the following settings are required.
.hitTestBehavior(HitTestMode.Transparent)
}
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
Implementation effect:
Solution 3: Setting the position Attribute
Implementation Principle: Determine the position based on the four sides of the parent component’s content area. The top/left/right/bottom attributes specify the margins of the component’s sides relative to the corresponding sides of the parent component’s content area, thereby determining the component’s position relative to the parent component’s content area.
Example code:
@Entry
@Component
struct PositionPage {
build() {
Column() {
Text('Use Absolute Positioning')
.fontSize(10)
.margin({ bottom: 10 })
Stack() {
Text('Text1')
.width(50)
.height(50)
.backgroundColor('#0A59F7')
.position({ top: 0, left: 0 })
Text('Text2')
.width(50)
.height(50)
.backgroundColor('#F1F3F5')
.fontColor(Color.Black)
.position({ right: 0, bottom: 0 })
}
.width(150)
.height(150)
.border({ width: 2, color: '#6699FF' })
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
Code Execution Effect Diagram
Limitations or Considerations
None
Summary
The applicable scenarios for each method are as follows:
| Method | Applicable Scenario |
|---|---|
| Relative Layout | Complex layouts or scenarios requiring reusable layout logic |
| Stack Component | Lightweight layouts requiring stacking or asymmetric arrangement |
| position Attribute | Scenarios requiring child components to be positioned relative to parent content area |
- RelativeContainer is ideal for complex diagonal layouts with multiple components
- Stack provides simpler implementation but requires careful hit-test behavior configuration
- Position attributes offer pixel-perfect control for fixed diagonal positioning
- All three methods support API Version 20+ and HarmonyOS 6.0.0+
- Requires DevEco Studio 6.0.0+ for compilation
Please refer this links
- https://developer.huawei.com/consumer/en/doc/harmonyos-guides/arkts-layout-development-stack-layout
- https://developer.huawei.com/consumer/en/doc/harmonyos-references/ts-container-stack
- https://developer.huawei.com/consumer/en/doc/harmonyos-guides/arkts-layout-development-relative-layout
- https://developer.huawei.com/consumer/en/doc/harmonyos-references/ts-universal-attributes-location#position
Top comments (0)