This content originally appeared on DEV Community and was authored by flfljh
Introduction
In HarmonyOS Next, child elements use the .position() attribute for relative positioning within parent elements. Usage example:
@Entry
@Component
struct PositionExample1 {
build() {
Column() {
Row() {
}
.position({x: 50, y: 50})
}
.width('100%')
.height('100%')
}
}
This positions the child element 50 units from the parent's left and top edges.
A common challenge is positioning elements near the right edge, especially given the diverse screen sizes across devices. How can we ensure consistent positioning across different devices?
We propose a solution using the LocalizedEdges type. This approach accounts for device diversity by:
- Identifying device types
- Adapting to screen dimensions
- Maintaining consistent positioning across devices
Solution
Official documentation:
#position
Use LocalizedEdges for positioning relative to parent container edges, with mirroring support. This is ideal for:
- Fixed-position elements
- Floating action buttons
- Top-aligned components
- Edge-sensitive designs
Example of bottom-right positioning:
@Entry
@Component
struct PositionExample1 {
build() {
Column() {
Row() {
}
// bottom: Offset from bottom edge
// end: Offset from right edge (supports RTL mirroring)
.position(bottom: { value: 20, unit: 2 }, end: { value: 20, unit: 2 })
}
.width('100%')
.height('100%')
}
}
Key features:
-
unit: 2specifies percentage-based positioning - Works consistently across all screen sizes
- Automatically adjusts for right-to-left languages
- Maintains design integrity on any device
This concludes our overview of advanced positioning techniques in HarmonyOS Next.
This content originally appeared on DEV Community and was authored by flfljh
flfljh | Sciencx (2025-06-26T01:16:14+00:00) HarmonyOS Next Element Positioning. Retrieved from https://www.scien.cx/2025/06/26/harmonyos-next-element-positioning/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.