Implementing RTL Direction Layout and Sliding Effects for List Components

Read the original article：Implementing RTL Direction Layout and Sliding Effects for List Components

Implementing RTL Direction Layout and Sliding Effects for List Components

Requirement Description

Developers need to implement a horizontally arranged List component with RTL (Right-to-Left) direction layout and sliding effects, where content is aligned to the right side of the screen.

Background Knowledge

The List component in HarmonyOS contains a series of list items with the same width, suitable for continuous, multi-row presentation of similar data such as images and text. Key properties for this implementation include:

• listDirection: Sets the arrangement direction of the List component
• initialIndex: Sets the item index value for the starting position of the display area when the List is first loaded
• scrollSnapAlign: Sets the alignment effect when list items finish scrolling

Implementation Steps

1. Configure the List component's listDirection property for horizontal arrangement
2. Use the reverse() method to reverse the data source array
3. Set the initialIndex parameter to start display from the last item, enabling RTL direction layout and sliding
4. Apply scrollSnapAlign property to achieve right-aligned content display

Code Snippet / Configuration

@Entry
@Component
struct ListExample {
  private arr: number[] = []
  private scrollerForList: Scroller = new Scroller()

  // Initialize data when page loads
  aboutToAppear() {
    for (let i = 0; i < 25; i++) {
      this.arr.push(i)
    }
  }

  build() {
    Column() {
      // Set initial display list item index (display from back to front)
      List({ 
        space: 20, 
        initialIndex: this.arr.length - 1, 
        scroller: this.scrollerForList 
      }) {
        // Reverse the data source array
        ForEach(this.arr.reverse(), (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
          }
          .borderRadius(10)
          .backgroundColor(0xFFFFFF)
          .width('10%')
          .height('10%')
        }, (item: number) => JSON.stringify(item))
      }
      .chainAnimation(true)
      .edgeEffect(EdgeEffect.Spring)
      .listDirection(Axis.Horizontal) // Set component horizontal arrangement
      .height('100%')
      .scrollSnapAlign(ScrollSnapAlign.END) // Last item in view aligns at list end
      .borderRadius(10)
      .backgroundColor(0xDCDCDC)
      .lanes(1)
    }
    .alignItems(HorizontalAlign.End)
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 10 })
  }
}

RTL IMAGE and PUSH

Test Results

The implementation successfully creates a horizontally scrolling List component with RTL behavior:

• Content displays from right to left
• Initial view shows the last items in the data array
• Smooth sliding animation with spring edge effects
• Proper alignment and spacing between list items

System Requirements:

• API Version 19 Release and above
• HarmonyOS 5.1.1 Release SDK and above
• DevEco Studio 5.1.1 Release and above

Limitations or Considerations

Common Issue: initialIndex Not Working for Dynamic Content

When initialIndex is set to the last page index of a scrollable list, it may fail to navigate properly. This occurs because:

• The initialIndex property only takes effect during the initial creation of the List component
• When List content changes dynamically (such as through asynchronous data loading), the initialIndex setting becomes ineffective
• This is particularly common when List elements are loaded through asynchronous functions

Solution: After loading all data, use the scrollToIndex method to manually scroll to the desired position. This ensures the view scrolls to the correct location even after dynamic content changes.

// Example of using scrollToIndex for dynamic content
this.scrollerForList.scrollToIndex(this.arr.length - 1)

Key Implementation Points:

• Reverse the data source array arrangement
• Set initial display position to the last data item
• Handle dynamic content loading scenarios appropriately

Related Documents or Links

• List Component Documentation
• ScrollToIndex API Reference

Written by Emincan Ozcan