HarmonyOS Next Element Positioning

Introduction

In HarmonyOS Next, child elements use the .position() attribute for relative positioning within parent elements. Usage example:
In HarmonyOS NEXT, child elements within a parent element can be positioned using the .position() attribute, allowing for relative positioning within the parent's coordinate space. This is particularly useful for creating flexible and responsive layouts that adapt to different screen sizes and device configurations.
Relative Positioning:
The .position() attribute, when applied to a child element, enables positioning relative to the parent element's top-left corner.
For example, position({x: 50, y: 50}) will position the child element 50 units from the left and 50 units from the top of the parent.
This approach allows for precise placement of elements within a parent container, creating visually appealing and functional user interfaces.
Handling Diverse Screen Sizes:
One challenge in UI development is ensuring consistent positioning across various screen sizes.
HarmonyOS NEXT provides mechanisms, like LocalizedEdges, to address this challenge by providing localized positioning information, taking into account the diverse screen characteristics.
Example:
TypeScript

@Entry @Component
struct PositionExample1 {
build() {
Column() {
Row() {
// Child element within the Row
}
.position({ x: 50, y: 50 }) // Positioned 50 units from the left and top of the Column
}
.width('100%')
.height('100%')
}
}
Further Considerations:
Relative Layouts:
HarmonyOS NEXT also offers RelativeContainer for more complex relative layouts, where child elements can be positioned based on other child elements or the container itself.
Custom Layouts:
Developers can also create custom layout logic by overriding onMeasureSize and onPlaceChildren in custom components to define precise positioning of child elements.
Component Lifecycle:
Understanding the lifecycle of components, including parent and child components, is crucial for managing data flow and interactions within your UI.
Data Binding:
HarmonyOS NEXT offers mechanisms for data binding, such as the $$ operator, which enables two-way synchronization between component state and underlying data.
Navigation:
When building complex UIs, features like persistent tabs and navigation components can be leveraged to maintain context and improve user experience.

@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: