DEV Community: HarmonyOS

How to solve uneven spacing problem when the text component contains multiple character types and is justified

HarmonyOS — Fri, 17 Apr 2026 01:23:00 +0000

Read the original article：How to solve uneven spacing problem when the text component contains multiple character types and is justified

Requirement Description

Using TextAlign.Justify or TextAlign.Start does not achieve the justified alignment effect; the spacing between different characters is inconsistent. As shown below:

Background Knowledge

In the Text component, the relevant parts of TextAlign and WordBreak are as follows:

TextAlign properties and descriptions

Property	Description
Start	Align horizontally to the start
Center	Align horizontally to the center
End	Align horizontally to the end
JUSTIFY	Justify alignment

WordBreak properties and descriptions

Attribute	Description
NORMAL	CJK (Chinese, Japanese, Korean) text can break lines at any two characters, while Non-CJK text (such as English) can only break lines at whitespace.
BREAK_ALL	For Non-CJK text, line breaks can be made between any two characters. For CJK, the effect is the same as for NORMAL.
BREAK_WORD	Similar to BREAK_ALL, for non-CJK text, a line break can occur between any two characters. When there is a break point (such as a whitespace) in a line of text, the text will prioritize breaking at that point to ensure that words are displayed as complete as possible. If there are no break points in the entire line of text, a line break will occur between any two characters. The effect for CJK is the same as for NORMAL.

Implementation Steps

Chinese characters are always full-width, but numbers, English letters, and special characters can be either full-width or half-width. Generally, numbers, English letters, and special characters use the simplified half-width format. Formatting issues may occur when processing mixed text; however, using a line-breaking rule can automatically convert them into half-width format.

When TextAlign.JUSTIFY or TextAlign.Start does not achieve justified alignment, you can use the line-breaking rule wordBreak to achieve the desired effect.

Combining WordBreak.BREAK_ALL with TextAlign.JUSTIFY allows English words to break by letter and Chinese text by character, helping to control spacing.

Code Snippet / Configuration

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('@@Test@@123456789!@#$%-@@Test@@123456789!@#$%-@@Test@@123456789!@#$%-@@Test@@123456789!@#$%-@@Test@@123456789!@#$%')
        .width('100%')
        .backgroundColor('#87ceeb')
        .textAlign(TextAlign.JUSTIFY)
        .wordBreak(WordBreak.BREAK_ALL) // Combine with TextAlign.JUSTIFY to achieve justified alignment and solve uneven spacing
        .fontSize(14)
    }
    .margin({ left: 20, right: 20, top: 70 })
  }
}

Test Results

Limitations or Considerations

This example supports API Version 19 Release and above.

This example supports HarmonyOS 5.1.1 Release SDK and above.

This example must be compiled and run using DevEco Studio 5.1.1 Release or later.

Written by Bunyamin Akcay

onTouch Global Swipe Event Listener

HarmonyOS — Fri, 17 Apr 2026 01:06:00 +0000

Read the original article：onTouch Global Swipe Event Listener

Requirement Description

How to globally listen for swipe events to control the visibility of the purple subcomponent and achieve the function shown below?

Background Knowledge

onTouch: This callback is triggered when a finger touch occurs. When the left mouse button is pressed, the event is also converted into a touch event and triggers this callback.

Implementation Steps

Create a purple stack component and set the visibility property. Determine the visibility of the component by checking the flag isDirectShowPlayPanel.

Code example:

if (this.isShowPlayPanel) {
  Stack() {

  }
  .width('100%')
  .height(80)
  .hitTestBehavior(HitTestMode.None)
  .backgroundColor('#785694')
  .margin({
    bottom: 50
  })
  .visibility(this.isDirectShowPlayPanel ? Visibility.Visible : Visibility.None)
  .position({ y: 600 })
  .transition(
    TransitionEffect
      .move(TransitionEdge.BOTTOM)
      .animation({
        duration: 500,
        curve: Curve.Friction
      })
  )
}

Use onTouch to listen for global swipe gestures. Obtain the event object, and in the TouchType.Up callback, get the swipe distance and duration to calculate swipe speed.

A positive speed indicates a downward swipe (show the purple component), while a negative speed indicates an upward swipe (hide the purple component).

Note: Up/down swipes control the purple component’s visibility.

Code example:

onTouch((event: TouchEvent) => {
  if (!event) {
    return;
  }
  switch (event.type) {
    case TouchType.Down:
      this.startX = event.touches[0].displayX;
      this.startY = event.touches[0].displayY;
      this.startTime = event.timestamp;
      break;
    case TouchType.Move:
      break;
    case TouchType.Up:
      let endX = event.touches[0].displayX;
      let endY = event.touches[0].displayY;
      console.info('aptx', 'endY=' + endY + ', this.startY=' + this.startY);
      let endTime = event.timestamp;
      let deltaTime = (endTime - this.startTime) / 1000000000;
      let speed = (endY - this.startY) / (deltaTime == 0 ? 1 : deltaTime);
      if (Math.abs(speed) > 800) {
        if (speed < 0) {
          this.isShowPlayPanel = false;
          this.isDirectShowPlayPanel = false;
        } else if (speed > 0) {
          this.isDirectShowPlayPanel = true;
          this.isShowPlayPanel = true;
        }
      }
      break;
  }
})

Code Snippet

Index.ets

   @Entry
   @Component
   struct Index {
     @State message: string = 'Orientation Switch';
     @Provide('pageStack') pageStack: NavPathStack = new NavPathStack()
     @State startX: number = 0
     @State startY: number = 0
     @State startTime: number = 0
     @Provide('isShow') isShowPlayPanel: boolean = false
     @Provide('isDirectShow') isDirectShowPlayPanel: boolean = false

     build() {
       Navigation(this.pageStack) {
         Text(this.message)
           .id('HelloWorld')
           .fontSize(12)
           .margin({top: 25})
           .fontWeight(FontWeight.Bold)

         Text('Go to page1')
           .fontSize(20)
           .fontWeight(FontWeight.Bold)
           .backgroundColor(Color.Pink)
           .onClick(() => {
             this.pageStack.pushPathByName('page1', null, false);
           })

         if (this.isShowPlayPanel) {
           Stack() {

           }
           .width('100%')
           .height(80)
           .hitTestBehavior(HitTestMode.None)
           .backgroundColor('#785694')
           .margin({
             bottom: 50
           })
           .visibility(this.isDirectShowPlayPanel ? Visibility.Visible : Visibility.None)
           .position({ y: 100 })
           .transition(
             TransitionEffect
               .move(TransitionEdge.BOTTOM)
               .animation({
                 duration: 500,
                 curve: Curve.Friction
               })
           )
         }
       }
       .height('100%')
       .width('100%')
       .onTouch((event: TouchEvent) => {
         if (!event) {
           return;
         }
         switch (event.type) {
           case TouchType.Down:
             this.startX = event.touches[0].displayX;
             this.startY = event.touches[0].displayY;
             this.startTime = event.timestamp;
             break;
           case TouchType.Move:
             break;
           case TouchType.Up:
             let endX = event.touches[0].displayX;
             let endY = event.touches[0].displayY;
             console.info('aptx', 'endY=' + endY + ', this.startY=' + this.startY);
             let endTime = event.timestamp;
             let deltaTime = (endTime - this.startTime) / 1000000000;
             let speed = (endY - this.startY) / (deltaTime === 0 ? 1 : deltaTime);
             if (Math.abs(speed) > 100) {
               if (speed < 0) {
                 this.isShowPlayPanel = false;
                 this.isDirectShowPlayPanel = false;
               } else if (speed > 0) {
                 this.isDirectShowPlayPanel = true;
                 this.isShowPlayPanel = true;
               }
             }
             break;
         }
       })
     }
   }

Page1.ets

   @Component
   export struct Page1 {
     @Consume('pageStack') pageStack: NavPathStack
     @Consume('isShow') isShowPlayPanel: boolean
     @Consume('isDirectShow') isDirectShowPlayPanel: boolean

     build() {
       NavDestination() {
         Text('Go to page2')
           .fontSize(20)
           .fontWeight(FontWeight.Bold)
           .backgroundColor(Color.Pink)
           .margin({top: 37})
           .onClick(() => {
             let pathInfo: NavPathInfo = new NavPathInfo('page2', null)
             this.pageStack.pushDestination(pathInfo, false);
           })

         if (this.isShowPlayPanel) {
           Stack() {

           }
           .width('100%')
           .height(80)
           .hitTestBehavior(HitTestMode.None)
           .backgroundColor('#785694')
           .margin({
             bottom: 50
           })
           .visibility(this.isDirectShowPlayPanel ? Visibility.Visible : Visibility.None)
           .position({ y: 150 })
           .transition(
             TransitionEffect
               .move(TransitionEdge.BOTTOM)
               .animation({
                 duration: 500,
                 curve: Curve.Friction
               })
           )
         }
       }
       .width('100%')
       .height('100%')
     }
   }

   @Builder
   export function getPage1RouterMap(): void {
     Page1();
   }

Test Results

Limitations or Considerations

This example supports API Version 19 Release and above.

This example supports HarmonyOS 5.1.1 Release SDK and above.

This example must be compiled and run using DevEco Studio 5.1.1 Release or later.

Written by Bunyamin Akcay

Multi-level Layout: How to Pass Gesture Events from Upper Layers to Lower-level Controls

HarmonyOS — Fri, 17 Apr 2026 01:03:00 +0000

Read the original article：Multi-level Layout: How to Pass Gesture Events from Upper Layers to Lower-level Controls

equirement Description

Due to the need to implement video playback control gestures, the following code cannot control volume, brightness, and progress by swiping on the screen.

 Stack() {
   Column() {
     // Component B
   }
   .gesture(PanGesture()) // Expected to receive the passed gesture here
   Column() {
     // Component C, containing subcomponents D, E, and F; expected to pass the gesture event upward to the component above
     Blank()
       .parallelGesture(null, GestureMask.IgnoreInternal) 
     this.bottom()
   }
   .parallelGesture(null, GestureMask.IgnoreInternal)
 }

The layered layout is shown below: Component B represents lower-level elements such as volume and brightness controls, while D/E/F represent upper-layer components.

Expected result:

Gesture operations on components D, E, and F should be passed through to component B, enabling control of volume, brightness, and progress, without triggering gesture operations in C, D, E, or F.

Actual issue:

Gestures only work on the upper-layer components D, E, and F and cannot be passed down to the target lower-layer component B.

Background Knowledge

You can control the multi-layer gesture event competition process using the hitTestBehavior property.

HitTestMode.Transparent: Responds to touch tests itself, but does not block sibling nodes’ touch tests.
HitTestMode.Block: Responds to touch tests itself and blocks touch tests for child and sibling nodes, preventing their onTouch events and gestures from being triggered.
HitTestMode.None: Does not respond to touch tests and does not block touch controls of child or sibling nodes.

Implementation Steps

To meet the business requirements, organize the UI hierarchy so that the upper-layer components do not handle gesture responses but instead pass them to the lower-layer components for processing.

According to the hitTestBehavior definition, selecting HitTestMode.None ensures that upper layers do not respond, allowing gesture events to pass through to child nodes.

Code Snippet / Configuration

@Entry
@Component
struct Index {
  build() {
    Stack() {
      Column() {
        Column() {
          Text('ColumnB')
        }
        .onTouch(() => {
          console.info('Executing a gesture:ComponentB');
        })
        .gesture(TapGesture({ count: 1 }))
        .backgroundColor(Color.Green)
        .width('90%')
        .height('90%')
      }
      // Component C uses .hitTestBehavior(HitTestMode.None), so it does not respond to touch tests
      ComponentC()
        .onTouch(() => {
          console.info('Executing a gesture:ComponentC');
        })
        .gesture(TapGesture({ count: 1 }))
        .backgroundColor(Color.Blue)
        .width('80%')
        .height('80%')
        .hitTestBehavior(HitTestMode.None)
    }
    .onTouch(() => {
      console.info('Executing a gesture:StackA');
    })
    .gesture(TapGesture({ count: 1 }))
    .backgroundColor(Color.Gray)
    .width('100%')
    .height('100%')
    .hitTestBehavior(HitTestMode.None)
  }
}

@Component
struct ComponentC {
  build() {
    Flex({ direction: FlexDirection.Column }) {
      Column() {
        Text('ColumnD')
      }
      .onTouch(() => {
        console.info('Executing a gesture:ComponentD');
      })
      .gesture(TapGesture({ count: 1 }))
      .backgroundColor(Color.Yellow)
      .height('30%')
      .width('100%')

      // Component E uses .hitTestBehavior(HitTestMode.None), so it does not respond to touch tests
      Column() {
        Text('ColumnE')
      }
      .onTouch(() => {
        console.info('Executing a gesture:ComponentE');
      })
      .gesture(TapGesture({ count: 1 }))
      .backgroundColor(Color.Pink)
      .height('30%')
      .width('100%')
      .hitTestBehavior(HitTestMode.None)

      Column() {
        Text('ColumnF')
      }
      .onTouch(() => {
        console.info('Executing a gesture:ComponentF');
      })
      .gesture(TapGesture({ count: 1 }))
      .backgroundColor(Color.Red)
      .height('30%')
      .width('100%')
    }.width('100%').height('100%')
    .hitTestBehavior(HitTestMode.None)
  }
}

Test Results

Gesture propagation results when touching different colored areas:

Touching area D:
 Executing a gesture:ComponentD
 Executing a gesture:ComponentB

Touching area E:
 Executing a gesture:ComponentB

Touching area F:
 Executing a gesture:ComponentF
 Executing a gesture:ComponentB

Touching area C:
 Executing a gesture:ComponentB

Touching area B:
 Executing a gesture:ComponentB

Touching area A:
 // No related log output

Limitations or Considerations

This example supports API Version 19 Release and above.

This example supports HarmonyOS 5.1.1 Release SDK and above.

Compilation and execution require DevEco Studio 5.1.1 Release or later.

Written by Bunyamin Akcay

Implement placeholder text that scrolls up with the content

HarmonyOS — Thu, 16 Apr 2026 01:25:00 +0000

Read the original article：Implement placeholder text that scrolls up with the content

Problem Description

Set a placeholder text. How to make the placeholder text undeletable and automatically scroll upward as input data increases, as shown below:

Background Knowledge

Stack is a stacking container where child components are stacked in order, with the latter child components overlaying the previous ones.
TextArea is a multi-line text input component that automatically wraps text when content exceeds the component width.
onContentScroll callback is triggered when the TextArea content scrolls, which can be used to make the placeholder text scroll upward with the content.
onWillDelete callback is triggered when the TextArea is about to delete content, which can be used to make the placeholder text undeletable.

Solution

1.Use the Stack component to combine placeholder text and the text input box.

   Stack({ alignContent: Alignment.TopStart }) {
     Column() {
       Text(this.txt)
       // ...
     }

     TextArea({ text: this.text, controller: this.controller })
     // ...
   }

2.In the onContentScroll callback, modify the offsetY property to change the relative vertical offset of the placeholder text, achieving automatic upward scrolling.

   .onContentScroll((totalOffsetX: number, totalOffsetY: number) => {
     if ((this.getUIContext().px2vp(totalOffsetY) - 8) > 0) {
       this.offsetY = 0
     } else if ((this.getUIContext().px2vp(totalOffsetY) - 8) < -16) {
       this.offsetY = -16
     } else {
       this.offsetY = (this.getUIContext().px2vp(totalOffsetY) - 8)
     }
   })

3.In the onWillDelete callback, determine whether the cursor can move backward based on deleteOffset, making the placeholder text undeletable.

   .onWillDelete((info: DeleteValue) => {
     if (info.deleteOffset === 1 || this.text === ' ') {
       return false
     }
     return true;
   })

Complete example is as follows:

@Entry
@Component
struct Index {
  @State txt: string = 'Placeholder Text'
  @State text: string = ' '
  @State textValue: string = ''
  @State txtWidth: number = 0
  @State offsetY: number = 0
  controller: TextAreaController = new TextAreaController()

  build() {
    Row() {
      Column() {
        Stack({ alignContent: Alignment.TopStart }) {
          Column() {
            Text(this.txt)
              .margin({ left: 14 })
              .fontSize(15)
              .fontColor(Color.Blue)
              .onAreaChange((oldValue: Area, newValue: Area) => {
                this.txtWidth = newValue.width as number
              })
              .offset({ x: 0, y: this.offsetY })
          }
          .width(200)
          .height(92)
          .background(Color.White)
          .alignItems(HorizontalAlign.Start)
          .border({ width: 1 })
          .margin({ top: 8 })
          .clip(true)

          TextArea({ text: this.text, controller: this.controller })
            .width(200)
            .height(100)
            .wordBreak(WordBreak.BREAK_ALL)
            .textIndent(this.txtWidth)
            .borderRadius(0)
            .fontColor(Color.Black)
            .onChange((info) => {
              this.text = info
              this.textValue = this.text.trim()
            })
            .backgroundColor(Color.Transparent)
            .onContentScroll((totalOffsetX: number, totalOffsetY: number) => {
              if ((this.getUIContext().px2vp(totalOffsetY) - 8) > 0) {
                this.offsetY = 0
              } else if ((this.getUIContext().px2vp(totalOffsetY) - 8) < -16) {
                this.offsetY = -16
              } else {
                this.offsetY = (this.getUIContext().px2vp(totalOffsetY) - 8)
              }
            })
            .onWillDelete((info: DeleteValue) => {
              if (info.deleteOffset === 1 || this.text === ' ') {
                return false
              }
              return true;
            })
            .onDidDelete((info: DeleteValue) => {
              if (info.deleteOffset === 0) {
                this.text = ' '
              }
            })
            .onTextSelectionChange((selectionStart: number, selectionEnd: number) => {
              if (selectionStart === 0) {
                selectionStart === selectionEnd ? this.controller.caretPosition(1) :
                  this.controller.setTextSelection(1, selectionEnd)
              }
            })
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

Verification Result

Written by Bunyamin Akcay

How to Solve the Issue of Incorrect Color Gradient When Using linearGradient

HarmonyOS — Thu, 16 Apr 2026 01:14:00 +0000

Read the original article：How to Solve the Issue of Incorrect Color Gradient When Using linearGradient

Problem Description

When using linearGradient to set a color gradient effect, the expected result is to set the color 0x00990000 to achieve full transparency. However, in practice, the color appears opaque. Using 0x01990000 can approximately achieve full transparency. As shown in the image:

@Entry
@Component
struct Index {
  build() {
    Column({ space: 5 }) {
      Row()
        .width('75%')
        .height(90)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0x00990000, 0.0], [0x80000000, 1.0]]
        })
      Row()
        .width('75%')
        .height(90)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0x01990000, 0.0], [0x80000000, 1.0]]
        })
    }
    .width('100%')
    .width('100%')
    .padding(25)
    .backgroundColor("#fff")
  }
}

Background Knowledge

For the linearGradient color gradient property, refer to Color Gradient.
A hexadecimal color value (e.g., 0x80FFFF00) consists of the first two digits representing transparency (alpha), followed by two digits each for red, green, and blue.

Transparency has 256 levels, from 0–255, where 0 is fully transparent and 255 is fully opaque, corresponding to hexadecimal values from 00 (transparent) → FF (opaque).

Troubleshooting Process

To reproduce the issue (here red is used to make the difference clearer), since the issue involves fully transparent and fully opaque colors, both 0x and # formats are tested for these cases.

When transparency is set to fully transparent, the colors 0x00990000 and #00990000 show different results:

0x00990000 appears opaque, while #00990000 is fully transparent.

@Entry
@Component
struct Index {
  build() {
    Column({ space: 5 }) {
      Row()
        .width('90%')
        .height(42)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0x00990000, 0.0], [0x80000000, 1.0]]
        })
      Row()
        .width('90%')
        .height(42)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xff990000, 0.0], [0x80000000, 1.0]]
        })
      Row()
        .width('90%')
        .height(42)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [['# 00990000', 0.0], [0x80000000, 1.0]]
        })
      Row()
        .width('90%')
        .height(42)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [['# ff990000', 0.0], [0x80000000, 1.0]]
        })
    }
    .width('100%')
    .width('100%')
    .padding(25)
    .backgroundColor("#fff")
  }
}

Analysis Conclusion

Further analysis of the two formats shows that 0x00990000 appears fully opaque because of the HarmonyOS specification:

In OHOS, the 0x format supports both 8-digit and 6-digit formats.

Therefore, when transparency is set to 0, 0x00 is actually treated as if no transparency was set, and it is processed as a 6-digit value — equivalent to 0x990000.

Solution

When transparency is fully transparent, the 0x00990000 format is not supported.

Change the prefix 0x to the string # — i.e., write it as #00990000 to take effect correctly.

When transparency is not fully transparent (e.g., 0x03), both formats (0x03990000 and #03990000) work as expected.

Written by Bunyamin Akcay

How to Solve the Issue of Empty Screen Position During Drag Gesture

HarmonyOS — Thu, 16 Apr 2026 01:06:00 +0000

Read the original article：How to Solve the Issue of Empty Screen Position During Drag Gesture

Problem Description

When implementing a PanGesture (drag gesture), using two fingers (performing a pinch-zoom gesture without adding a pinch gesture recognizer) can cause an unexpected crash.

Crash log:

Cannot read property displayX of undefined.

@Entry
@Component
struct Index {
  @State touchX: number = 0;
  @State touchY: number = 0;

  build() {
    Column() {
      Column() {
      }
      .width(300)
      .height(500)
      .border({ width: 0.5, color: '#000' })
      .gesture(
        PanGesture()
          .onActionStart((event: GestureEvent | undefined) => {
            if (event && event.fingerList.length > 0) {
              this.touchX = event.fingerList[0].displayX
              this.touchY = event.fingerList[0].displayY
              console.info(`fingerList: ${JSON.stringify(event.fingerList[0])}`)
              // ...
            }
          })
          .onActionUpdate((event?: GestureEvent | undefined) => {
            if (event && event.fingerList.length > 0) {
              this.touchX = event.fingerList[0].displayX
              this.touchY = event.fingerList[0].displayY
              console.info(`fingerList: ${JSON.stringify(event.fingerList[0])}`)
              // ...
            }
          })
      )
    }
    .height('100%')
    .width('100%')
    .padding(24)
  }
}

Background Knowledge

PanGesture is used to trigger drag gesture events. The gesture is recognized when the sliding distance reaches the minimum threshold (default value is 5vp). The event parameter GestureEvent object contains a fingerList array that holds information for all touch points involved in the event.

Troubleshooting Process

According to the error message:

Cannot read property displayX of undefined

It indicates that event.fingerList[0] has no displayX property.

Analysis Conclusion

fingerList[0] may sometimes be undefined. For example, when operating with two fingers: after both the first and second fingers are pressed down, if the first finger is lifted first, fingerList[0] becomes null.

Solution

Add a conditional check to ensure that fingerList[0] is valid before accessing its properties.

Example code:

@Entry
@Component
struct Index {
  @State touchX: number = 0;
  @State touchY: number = 0;

  build() {
    Column() {
      Column() {
      }
      .width(300)
      .height(500)
      .border({ width: 0.5, color: '#000' })
      .gesture(
        PanGesture()
          .onActionStart((event: GestureEvent | undefined) => {
            // Only get screen position when event.fingerList[0] has a value
            if (event && event.fingerList.length > 0 && event.fingerList[0]) {
              this.touchX = event.fingerList[0].displayX
              this.touchY = event.fingerList[0].displayY
              console.info(`fingerList: ${event.fingerList[0]}`)
              // ...
            }
          })
          .onActionUpdate((event?: GestureEvent | undefined) => {
            // Only get screen position when event.fingerList[0] has a value
            if (event && event.fingerList.length > 0 && event.fingerList[0]) {
              this.touchX = event.fingerList[0].displayX
              this.touchY = event.fingerList[0].displayY
              console.info(`fingerList: ${JSON.stringify(event.fingerList[0])}`)
              // ...
            }
          })
      )
    }
    .height('100%')
    .width('100%')
    .padding(24)
  }
}

Written by Bunyamin Akcay

How to Resolve the Issue of TextTimer Failing to Time

HarmonyOS — Wed, 15 Apr 2026 01:49:00 +0000

Read the original article：How to Resolve the Issue of TextTimer Failing to Time

Problem Description

TextTimer displays timing information through text and controls its timer status, enabling flexible implementation of scenarios such as countdowns and sports timing. When using the TextTimer component to achieve these functions, it is common to encounter situations where timing cannot be performed.

Background Knowledge

TextTimer is a component that displays timing information through text and controls its timer status. It is often used in mobile verification code scenarios. After obtaining the verification code, it starts a countdown to determine the validity of the verification code.

The page lifecycle, i.e., the lifecycle of the component decorated with @Entry, triggers the aboutToAppear, onPageShow, and other lifecycle interfaces in sequence when the page is created. At this point, the page object has been created, but the component elements within the page may not have been created.

Timer provides basic timer capabilities and supports executing corresponding functions at specified times.

HarmonyOS has a background operation management mechanism. When an app is in the background for a period of time, the app process will be suspended. After suspension, the app process cannot use software resources (such as public events and timers) and hardware resources (such as CPU, network, GPS, Bluetooth, etc.). If an app wants to perform tasks in the background, it must apply for the corresponding permissions.

When a TextTimer fails to time properly, it's usually due to errors in state management, lifecycle, or configuration. The following are common symptoms:

Problem Phenomenon	Cause Of The Problem
Timer not started after page displayed	onPageShow is the callback when the page is displayed. At this time, the TextTimer may not be created.
The app background countdown is invalid	TextTimer will time normally, but the time change in the background state will not trigger onTimer

Solution

Page loading is an asynchronous process. The page object is created first, followed by the loading of internal component elements. Depending on the complexity of the page, the TextTimer object may not be created when the onPageShow lifecycle function is triggered. There are two scenarios as follows:

Simple page with fewer elements in the component tree and shallow hierarchy: Column->TextTimer. The TextTimer object is already created during the onPageShow lifecycle of the page, and the timer starts successfully.
Complex page with deep hierarchy in the component tree: Column->List->ListItem->TextTimer. The TextTimer object is not yet created during the onPageShow lifecycle of the page, and the timer fails to start.

When the application is in the foreground, changes in the TextTimer countdown will trigger the onTimer callback. However, this event will not be triggered when the device is locked or the application is in the background. To address this, use a setTimeout timer instead of the onTimer event and request background task permissions.

Solution 1:

1.Do not start the timer in the onPageShow of the page. Start it after the TextTimer is mounted to the component tree and displayed. That is, bind the start of the timer to its own lifecycle onAppear. For detailed examples, please refer to Execute timing immediately after creation. The key code is as follows:

TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController })
  .onAppear(() => {
    this.textTimerController.start()
  })

2.Configure the backgroundModes permission in the module.json5 file. When the TextTimer timer starts, set the timer setTimeout to replace the TextTimer onTimer event to implement the countdown end processing operation when the app is in the background.

"module": {
  "abilities": [
    {
     "backgroundModes": ["taskKeeping"] // Configured as required
    }
  ]
}
TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController })
  .onAppear(() => {
    this.textTimerController.start() // Launch Text Timer
    setTimeout(() => {
      // Execute the operation after the 30-second countdown ends.
    }, 30000) // Align with the time set by TextTimer
  })
  // This onTimer does not trigger when in the background.
  .onTimer((utc: number, elapsedTime: number) => {
    // ...
  })

Solution 2: Use onAttach

@Entry
@Component
struct TextTimerExample {
  textTimerController: TextTimerController = new TextTimerController()
  @State format: string = 'mm:ss.SS'

  build() {
    Column() {
      TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController })
        .format(this.format)
        .fontColor(Color.Black)
        .fontSize(50)
        .onTimer((utc: number, elapsedTime: number) => {
          console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
        })
        .onAttach(() => {
          this.textTimerController.start()
        })
    }
  }
}

Solution 3: Use onVisibleAreaChange

@Entry
@Component
struct TextTimerExample {
  textTimerController: TextTimerController = new TextTimerController()
  @State format: string = 'mm:ss.SS'

  build() {
    Column() {
      TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController })
        .format(this.format)
        .fontColor(Color.Black)
        .fontSize(50)
        .onTimer((utc: number, elapsedTime: number) => {
          console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
        })
        .onVisibleAreaChange([0.0, 1.0], (isExpanding: boolean, currentRatio: number) => {
          this.textTimerController.start()
        })
    }
  }
}

Verification Result

This sample supports API version 20 Release and later.
This sample supports HarmonyOS 6.0.0 Release SDK and later.
This sample must be built and run using DevEco Studio 6.0.0 Release or later.

Written by Bunyamin Akcay

How to make ListItem texts in the same row display with the same height

HarmonyOS — Wed, 15 Apr 2026 01:44:00 +0000

Read the original article：Node-API Part-3: Wrapping a Native C++ Object in a Sendable ArkTS ClassHow to make ListItem texts in the same row display with the same height

Requirement Description

When there are multiple ListItems in the same row, the text heights displayed inside each ListItem are inconsistent, resulting in different heights for each ListItem. Since the text length is uncertain, it is not possible to fix the ListItem height using the height property.

Problem preview:

Expected effect preview:

Background Knowledge

The List Component is a list component containing list items of equal width, suitable for displaying similar data in continuous rows and columns. It can be set to multiple columns through properties. You can use onAreaChange to get the area change values of each ListItem, such as component height.
The Flex Component is a flexible container component. By modifying the wrap and alignItems parameters in FlexOptions and adjusting the width of child components, you can display multiple rows and columns to achieve a layout similar to List or Grid.

Implementation Steps

Solution 1: Use the Flex container component. Modify the wrap and alignItems parameters of FlexOptions to achieve a multi-row, multi-column display, with child components stretched and filled along the cross axis.

Solution 2: Use onAreaChange to get the height of each ListItem and determine the maximum height in each row. Then, using state variable changes and if/else conditional statements, refresh the layout and set each component’s height to the row’s maximum height.

Code Snippet

Solution 1:

import { LengthUnit } from '@kit.ArkUI'

export class Area {
  name: string = ''
  heightSize: number = 0

  constructor(name: string) {
    this.name = name
  }
}

const ARR: Area[] = [
  new Area('Tongliang District'), new Area('Tongnan District'), new Area('Rongchang District'), new Area('Kaizhou District'), new Area('Liangping District'), new Area('Shizhu Tujia Autonomous County'),
  new Area('Xiushan Tujia and Miao Autonomous County kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk'),
  new Area('Youyang Tujia and Miao Autonomous County'), new Area('Pengshui Miao and Tujia Autonomous County'),
  // ... (repeated for example)
]

// Child component
@Component
struct TextComponentOne {
  content: string = ''

  build() {
    Column() {
      Text(this.content)
        .fontSize(14)
        .padding(9)
        .width('100%')
        .textAlign(TextAlign.Center)
        .fontColor('#000')
    }
  }
}

@Entry
@Component
struct FlexItemHeight {
  private arr: Area[] = ARR

  build() {
    Scroll() {
      Flex({
        justifyContent: FlexAlign.Center,
        wrap: FlexWrap.Wrap, // Flex container items arranged in multiple rows/columns
        alignItems: ItemAlign.Stretch, // Stretch and fill items along the cross axis
        space: {
          cross: { value: 14, unit: LengthUnit.VP }
        }
      }) {
        ForEach(this.arr, (item: Area) => {
          Column() {
            TextComponentOne({ content: item.name })
          }
          // Formatting, width, border radius, etc., should be set in the Flex item; if set in the child component, stretching may not take effect
          .justifyContent(FlexAlign.Center)
          .width('33%')
          .border({ width: 1, radius: 7 })
        })
      }
    }
    .width('100%')
    .background('#fff')
  }
}

Solution 2:

Step 1: Calculate the height of each ListItem and determine the maximum height in the same row.

// Bubble sort and return the maximum value
sortReturnMax(nums: number[]): number {
  const len: number = nums.length;
  for (let i: number = 0; i < len; i++) {
    for (let j: number = 0; j < len - 1 - i; j++) {
      if (nums[j] > nums[j + 1]) {
        const tmp = nums[j];
        nums[j] = nums[j + 1];
        nums[j + 1] = tmp;
      }
    }
  }
  return nums[nums.length-1]
}

// Determine the maximum height in a row and set each element in arr to that height
reSetHeightSize() {
  for (let i = 0; i < this.arr.length; i += 3) {
    let arrTmp: number[] = []
    arrTmp.push(this.arr[i].heightSize)
    arrTmp.push(this.arr[i+1].heightSize)
    arrTmp.push(this.arr[i+2].heightSize)
    let maxHeight = this.sortReturnMax(arrTmp)
    this.arr[i].heightSize = maxHeight
    this.arr[i + 1].heightSize = maxHeight
    this.arr[i + 2].heightSize = maxHeight
  }
}

Step 2: During the first layout, use onAreaChange to collect and calculate ListItem heights.

@Builder
ListItemChangeRegion() {
  List({ space: 14 }) {
    ForEach(this.arr, (item: Region, index: number) => {
      ListItem() {
        TextComponentTwo({ content: item.name })
          .onAreaChange((oldValue: Area, newValue: Area) => {
             // After traversing all ListItems and collecting heights, call reSetHeightSize to calculate the maximum height per row, then change isBoolean to trigger UI re-rendering
            this.arr[index].heightSize = newValue.height as number
            if (this.flags === this.arr.length - 1) {
              this.isBoolean = false
              this.reSetHeightSize()
            }
            this.flags += 1
          })
      }
    })
  }
  .lanes(3)
}

Step 3: In the second layout, set the component height to the maximum height of the row.

@Builder
ListItemSameHeight() {
  List({ space: 14 }) {
    ForEach(this.arr, (item: Region, index: number) => {
      ListItem() {
        TextComponentTwo({ content: item.name, hgt: item.heightSize })
      }
    }, (item: Region) => JSON.stringify(item))
  }
  .lanes(3)
}

Step 4: Use an if conditional statement and state variable isBoolean to re-render the layout when the variable value changes.

if (this.isBoolean) {
  // First layout: onRegionChange callback triggered to collect and calculate ListItem heights
  this.ListItemChangeRegion()
} else {
  // When isBoolean changes, re-layout enters else branch; now each ListItem height equals the maximum height in the row
  this.ListItemSameHeight()
}

Complete Example Code:

export class Region {
  name: string = ''
  heightSize: number = 0

  constructor(name: string) {
    this.name = name
  }
}

const ARR: Region[] = [
  new Region('Tongliang District'), new Region('Tongnan District'), new Region('Rongchang District'), new Region('Kaizhou District'), new Region('Liangping District'),
  new Region('Shizhu Tujia Autonomous County'),
  new Region('Xiushan Tujia and Miao Autonomous County kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk'),
  new Region('Youyang Tujia and Miao Autonomous County'), new Region('Pengshui Miao and Tujia Autonomous County')
]

// Child component
@Component
struct TextComponentTwo {
  content: string = ''
  hgt: Length = 'auto'

  build() {
    Column() {
      Text(this.content)
        .fontSize(14)
        .padding(9)
        .width('100%')
        .textAlign(TextAlign.Center)
        .fontColor("#000")
    }
    .height(this.hgt)
    .justifyContent(FlexAlign.Center)
    .border({
      width: 1,
      radius: 7
    })
  }
}

@Entry
@Component
struct ListItemHeight {
  private arr: Region[] = ARR
  private flags: number = 0
  @State private isBoolean: boolean = true

  // Bubble sort and return the maximum value
  sortReturnMax(nums: number[]): number {
    const len: number = nums.length;
    for (let i: number = 0; i < len; i++) {
      for (let j: number = 0; j < len - 1 - i; j++) {
        if (nums[j] > nums[j + 1]) {
          const tmp = nums[j];
          nums[j] = nums[j + 1];
          nums[j + 1] = tmp;
        }
      }
    }
    return nums[nums.length - 1]
  }

  // Determine the maximum height in each row and set the height of each element in arr to that maximum value
  reSetHeightSize() {
    for (let i = 0; i < this.arr.length; i += 3) {
      let arrTmp: number[] = []
      arrTmp.push(this.arr[i].heightSize)
      arrTmp.push(this.arr[i + 1].heightSize)
      arrTmp.push(this.arr[i + 2].heightSize)
      let maxHeight = this.sortReturnMax(arrTmp)
      this.arr[i].heightSize = maxHeight
      this.arr[i + 1].heightSize = maxHeight
      this.arr[i + 2].heightSize = maxHeight
    }
  }

  @Builder
  ListItemChangeRegion() {
    List({ space: 14 }) {
      ForEach(this.arr, (item: Region, index: number) => {
        ListItem() {
          TextComponentTwo({ content: item.name })
            .onAreaChange((oldValue: Area, newValue: Area) => {
              // After traversing all ListItems and collecting their heights, call reSetHeightSize to calculate the maximum height of each row,
              // then change the state variable isBoolean to trigger UI re-rendering
              this.arr[index].heightSize = newValue.height as number
              if (this.flags === this.arr.length - 1) {
                this.isBoolean = false
                this.reSetHeightSize()
              }
              this.flags += 1
            })
        }
      })
    }
    .lanes(3)
  }

  @Builder
  ListItemSameHeight() {
    List({ space: 14 }) {
      ForEach(this.arr, (item: Region, index: number) => {
        ListItem() {
          TextComponentTwo({ content: item.name, hgt: item.heightSize })
        }
      }, (item: Region) => JSON.stringify(item))
    }
    .lanes(3)
  }

  build() {
    Column() {
      if (this.isBoolean) {
        // On the first layout, the onRegionChange callback is triggered by component area changes to collect and calculate ListItem heights
        this.ListItemChangeRegion()
      } else {
        // When isBoolean changes, re-layout enters the else branch; at this point, all ListItems have the maximum height in their row
        this.ListItemSameHeight()
      }
    }
    .width('100%')
    .height('100%')
    .padding({ top: 5 })
    .backgroundColor("#fff")
  }
}

Test Results

Limitations or Considerations

This example supports API Version 19 Release and above.
This example supports HarmonyOS 5.1.1 Release SDK and above.
Compilation and execution require DevEco Studio 5.1.1 Release and above.

Written by Bunyamin Akcay

How to Listen for Navigation Route Page Switching Events

HarmonyOS — Wed, 15 Apr 2026 01:39:00 +0000

Read the original article：How to Listen for Navigation Route Page Switching Events

Requirement Description

How can we listen for Navigation page switching events in order to perform custom operations during page transitions — such as obtaining information about the entering and exiting pages, or intercepting the switch itself?

Background Knowledge

@ohos.arkui.observer (Observer) provides the capability to silently observe UI component behavior changes, such as page lifecycle, component visibility, and scroll events. Among them, uiObserver.on('navDestinationSwitch') can listen for Navigation page switching events and execute custom operations.
setInterception: Used to set up a callback for Navigation route interception. Through the setInterception method, route interception can be implemented for unified handling of pre-navigation logic checks (such as login state validation or page state management).

Implementation Steps

Solution 1: Use the uiObserver.on('navDestinationSwitch') method to listen for Navigation page switching events. You can configure a callback function for page switching in the parameters.

Solution 2: Use the setInterception method of the navigation controller NavPathStack. In the parameter NavigationInterception, you can set up callbacks for interception before and after navigation. The example below demonstrates pre-navigation interception.

Code Snippet / Configuration (fontsize: h3)

Solution 1:

import { uiObserver } from '@kit.ArkUI';

function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {
  let from = JSON.stringify(info.from)
  let to = JSON.stringify(info.to)
  console.info(`from:${from} -------- to: ${to}`);
}

@Entry
@Component
struct NavObserverDemo {
  private stack: NavPathStack = new NavPathStack();

  @Builder
  Page(name: string) {
    PageOne()
  }

  aboutToAppear() {
    uiObserver.on('navDestinationSwitch', this.getUIContext(), callBackFunc); // Register listener for page switching
  }

  aboutToDisappear() {
    uiObserver.off('navDestinationSwitch', this.getUIContext(), callBackFunc);
  }

  build() {
    Navigation(this.stack) {
      Button('Back').onClick(() => {
        this.stack.pushPath({ name: 'pageOne' });
      })
    }
    .title('Navigation')
    .navDestination(this.Page)
  }
}

@Component
export struct PageOne {
  build() {
    NavDestination() {
      Text('pageOne')
    }.title('pageOne')
  }
}

Runtime result:

I from:"navBar" -------- to: {"navigationId":"","name":"pageOne","state":0,"index":0,"navDestinationId":"0","mode":0,"uniqueId":17}

I from:{"navigationId":"","name":"pageOne","state":1,"index":0,"navDestinationId":"0","mode":0,"uniqueId":17} -------- to: "navBar"

Solution 2:

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack();

  aboutToAppear(): void {
    this.pathStack.setInterception({
      willShow: (from: NavDestinationContext | 'navBar', to: NavDestinationContext | 'navBar',
        operation: NavigationOperation, animated: boolean) => {
        if (typeof from === 'string') {
          let target = to as NavDestinationContext
          console.info(`from page is navigation home -> ${target.pathInfo.name}`);
        } else if (typeof to === 'string') {
          let target = from as NavDestinationContext
          console.info(`${target.pathInfo.name} -> to page is navigation home`);
        }
      }
    })
  }

  @Builder
  pageMap(name: string) {
    PageOne()
  }

  build() {
    Navigation(this.pathStack) {
      Column({ space: 30 }) {
        Text('PageOne')
        Button('Back')
          .onClick(() => {
            this.pathStack.pushPathByName('PageOne', null, false);
          })
      }
    }.navDestination(this.pageMap)
  }
}

@Component
struct PageOne {
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Column({ space: 30 }) {
        Text('PageOne')
        Button('Back')
          .onClick(() => {
            this.pathStack.pop();
          })
      }
    }.title('PageOne')
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

Runtime result:

I from page is navigation home -> PageOne

I PageOne -> to page is navigation home

Limitations or Considerations

This example supports API Version 19 Release and above.

This example supports HarmonyOS 5.1.1 Release SDK and above.

This example must be compiled and run using DevEco Studio 5.1.1 Release or later.

Written by Bunyamin Akcay

How to encapsulate bindPopup options

HarmonyOS — Tue, 14 Apr 2026 01:27:00 +0000

Read the original article：How to encapsulate bindPopup options

Requirement Description

How to encapsulate the PopupOptions of bindPopup for reuse?

Preview effect:

Background Knowledge

bindPopup can bind a popup window to a component. Its parameter PopupOptions can be encapsulated to improve reusability.

Implementation Steps

Define the popup content, encapsulate its configuration for reuse, and use bindPopup in the component to display it when triggered.

Code Snippet

1.Define the content of the popup window:

   @Builder
   export function csPopupBuilder(title: string | Resource, color: string) {
     Column() {
       Text(title).fontSize(10)
         .padding({
           left: 6,
           right: 6,
           top: 3,
           bottom: 3
         })
         .fontColor(color)
     }
   }

2.Encapsulate the configuration attributes of the popup window:

   export function buildOptionsParams(that: Object, type: number, title: string | Resource): CustomPopupOptions {
     // You can parse skin configurations here, such as title, font color, background color, popup border color, offset, etc.
     return {
       builder: csPopupBuilder.bind(that, 'National Day and Mid-Autumn Festival holidays from October 1st to 8th, total 8 days. All toll roads (including airport expressways, toll bridges, and tunnels) are toll-free for small passenger cars.  ', '#FFFFFF'),
       placement: Placement.Bottom,
       offset: { y: -6 },
       arrowWidth: 10,
       arrowHeight: 6,
       backgroundBlurStyle: BlurStyle.NONE,
       popupColor: '#5291FF',
       onStateChange: (e) => {
         if (!e.isVisible) {
         }
       }
     }
   }

3.Use bindPopup in a component to create a popup window:

   @Entry
   @Component
   struct Index {
     @State message: string = 'Warm Reminder';
     @State isShowSchedulePopupGuide: boolean = false

     build() {
       RelativeContainer() {
         Text(this.message)
           .id('HelloWorld')
           .fontSize(12)
           .fontWeight(FontWeight.Bold)
           .alignRules({
             center: { anchor: '__container__', align: VerticalAlign.Center },
             middle: { anchor: '__container__', align: HorizontalAlign.Center }
           })
           .onClick(() => {
             this.isShowSchedulePopupGuide = !this.isShowSchedulePopupGuide
           })
           .bindPopup(this.isShowSchedulePopupGuide, buildOptionsParams(this, 1, 'Message content'))

       }
       .height('100%')
       .width('100%')
     }
   }

Test Results

Limitations or Considerations

This example supports API Version 19 Release and above.

This example supports HarmonyOS 5.1.1 Release SDK and above.

This example requires DevEco Studio 5.1.1 Release and above for compilation and running

Written by Bunyamin Akcay

How to Draw Text with Different Alignments on Canvas

HarmonyOS — Tue, 14 Apr 2026 01:15:00 +0000

Read the original article：How to Draw Text with Different Alignments on Canvas

Requirement Description

When generating text using the CanvasRenderingContext2D method and drawing filled text with fillText, how can the overall text alignment be achieved? For example, center, right, or left alignment?

Background Knowledge

Canvas provides a canvas component, and the CanvasRenderingContext2D interface allows drawing on the Canvas component using a RenderingContext. The objects that can be drawn include rectangles, text, images, etc.
The fillText method can draw filled text, but it can only draw text within a specified region each time, making it unable to draw text with different alignments all at once.

Implementation Steps

To draw text with different alignments on Canvas, follow the steps below:

1.Create RenderingContextSettings and CanvasRenderingContext2D objects to configure and manage the Canvas rendering context. Define three variables — leftText, centerText, and rightText — to display left-aligned, center-aligned, and right-aligned text respectively. letterSpacing is used to set the character spacing, and lineX marks the horizontal position of the reference line.

   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private leftText: string = 'Left-aligned text'
   private centerText: string = 'Center-aligned text'
   private rightText: string = 'Right-aligned text'
   private letterSpacing: number = 10
   private lineX: number = 200

2.The getTotalWidth method calculates the total width of the specified text by iterating through each character, accumulating the width of each character and the corresponding spacing to obtain the total width of the text.

   getTotalWidth(text: string): number {
     let totalWidth = 0
     for (let i = 0; i < text.length; i++) {
       // Accumulate occupied width
       if (i === text.length - 1) {
         totalWidth += this.context.measureText(text[i]).width;
       } else {
         totalWidth += this.context.measureText(text[i]).width + this.letterSpacing;
       }
     }
     return totalWidth
   }

3.In the onReady event of the Canvas, first set the pen color to blue and draw a reference line as the alignment baseline. Then, in this event handler, calculate the position for drawing the text and use a loop to call fillText to draw the text with different alignments sequentially:

Left Alignment: Determine the starting position for drawing the text by accumulating the width and spacing of each character.

 let leftTotalWidth = this.lineX
 this.context.font = '24vp sans-serif'
 for (let i = 0; i < this.leftText.length; i++) {
   this.context.fillText(this.leftText[i], leftTotalWidth, 50);
   // Accumulate occupied width
   if (i === this.leftText.length - 1) {
     leftTotalWidth += this.context.measureText(this.leftText[i]).width;
   } else {
     leftTotalWidth += this.context.measureText(this.leftText[i]).width + this.letterSpacing;
   }
 }

Center Alignment: Calculate the total text width first, then set the starting position to (lineX - totalWidth / 2) to achieve center alignment.

 let centerTotalWidth = 0
 centerTotalWidth = this.getTotalWidth(this.centerText)
 centerTotalWidth = this.lineX - centerTotalWidth / 2
 for (let i = 0; i < this.centerText.length; i++) {
   this.context.fillText(this.centerText[i], centerTotalWidth, 90);
   // Accumulate occupied width
   if (i === this.centerText.length - 1) {
     centerTotalWidth += this.context.measureText(this.centerText[i]).width;
   } else {
      centerTotalWidth += this.context.measureText(this.centerText[i]).width + this.letterSpacing;
   }
 }

Right Alignment: Calculate the total text width first, then set the starting position to (lineX - totalWidth) to achieve right alignment.

 let rightTotalWidth = 0
 rightTotalWidth = this.getTotalWidth(this.rightText)
 rightTotalWidth = this.lineX - rightTotalWidth
 for (let i = 0; i < this.rightText.length; i++) {
   this.context.fillText(this.rightText[i], rightTotalWidth, 130);
   // Accumulate occupied width
   if (i === this.rightText.length - 1) {
     rightTotalWidth += this.context.measureText(this.rightText[i]).width;
   } else {
     rightTotalWidth += this.context.measureText(this.rightText[i]).width + this.letterSpacing;
   }
 }

Code Snippet

Complete example reference:

@Entry
@Component
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private leftText: string = 'Left-aligned text'
  private centerText: string = 'Center-aligned text'
  private rightText: string = 'Right-aligned text'
  private letterSpacing: number = 0
  private lineX: number = 116

  getTotalWidth(text: string): number {
    let totalWidth = 0
    for (let i = 0; i < text.length; i++) {
      // Accumulate occupied width
      if (i === text.length - 1) {
        totalWidth += this.context.measureText(text[i]).width;
      } else {
        totalWidth += this.context.measureText(text[i]).width + this.letterSpacing;
      }
    }
    return totalWidth
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.context.strokeStyle = '#0000ff'
          this.context.moveTo(this.lineX, 10)
          this.context.lineTo(this.lineX, 160)
          this.context.stroke()

          // Left Alignment
          let leftTotalWidth = this.lineX
          this.context.font = '12vp sans-serif'
          for (let i = 0; i < this.leftText.length; i++) {
            this.context.fillText(this.leftText[i], leftTotalWidth, 50);
            // Accumulate occupied width
            if (i === this.leftText.length - 1) {
              leftTotalWidth += this.context.measureText(this.leftText[i]).width;
            } else {
              leftTotalWidth += this.context.measureText(this.leftText[i]).width + this.letterSpacing;
            }
          }

          // Center Alignment
          let centerTotalWidth = 0
          centerTotalWidth = this.getTotalWidth(this.centerText)
          centerTotalWidth = this.lineX - centerTotalWidth / 2
          for (let i = 0; i < this.centerText.length; i++) {
            this.context.fillText(this.centerText[i], centerTotalWidth, 90);
            // Accumulate occupied width
            if (i === this.centerText.length - 1) {
              centerTotalWidth += this.context.measureText(this.centerText[i]).width;
            } else {
              centerTotalWidth += this.context.measureText(this.centerText[i]).width + this.letterSpacing;
            }
          }

          // Right Alignment
          let rightTotalWidth = 0
          rightTotalWidth = this.getTotalWidth(this.rightText)
          rightTotalWidth = this.lineX - rightTotalWidth
          for (let i = 0; i < this.rightText.length; i++) {
            this.context.fillText(this.rightText[i], rightTotalWidth, 130);
            // Accumulate occupied width
            if (i === this.rightText.length - 1) {
              rightTotalWidth += this.context.measureText(this.rightText[i]).width;
            } else {
              rightTotalWidth += this.context.measureText(this.rightText[i]).width + this.letterSpacing;
            }
          }
        })
    }
    .width('100%')
    .height('100%')
  }
}

Test Results

Limitations or Considerations

Canvas :

supported since API version 8

Supported devices : Phone PC/2in1 Tablet TV Wearable

CanvasRenderingContext2D :

supported since API version 8,

Supported devices : Phone PC/2in1 Tablet TV Wearable

fillText :

supported since API version 8,

Supported devices : Phone PC/2in1 Tablet TV Wearable

Written by Bunyamin Akcay

GestureEvent Coordinate Differences

HarmonyOS — Tue, 14 Apr 2026 01:06:00 +0000

Read the original article：GestureEvent Coordinate Differences

Requirement Description

When using gesture events, handling different coordinates can produce different movement effects. What are the differences between the coordinates in GestureEvent, and how do you choose the correct one?

Background Knowledge

Add Gesture Response: When the user's operation matches the characteristics of a certain gesture, the system recognizes it as that gesture. This process is called gesture recognition. To respond to a specific gesture, a corresponding gesture object must be added to the component so that the system can collect and process it.
GestureEvent Object: Inherits from BaseEvent Object and is a data type object used in HarmonyOS to represent gesture events. This object contains the information needed to handle gesture events, such as event type, target information, etc.

Implementation Steps

Main Differences:

The differences between the coordinates involved in a GestureEvent mainly lie in their reference frames. Due to these differences, various coordinates are suitable for different usage scenarios, as shown in the table below:

Coordinate	Reference Frame	Suitable Usage Scenario
offsetX / offsetY	Gesture starting point	Calculating sliding distance and direction
localX / localY	Top-left corner of the current component’s original area	Component internal interaction, such as Canvas drawing
displayX / displayY	Top-left corner of the physical screen	Global gestures, such as detecting whether a swipe gesture is near the screen edge

Choosing the Right Coordinate Based on Scenario:

For examples of using offsetX/offsetY to calculate sliding distance, refer to PanGesture implements single-finger/two-finger swipe gesture.
Use displayX/displayY to detect whether a swipe gesture is near the screen edge.

Code Snippet

@Entry
@Component
struct EdgeGestureDemo {
  @State edgeTriggered: boolean = false;

  build() {
    Column() {
      Text(this.edgeTriggered ? 'Return gesture triggered' : 'Swipe right from the left edge of the screen')
        .fontSize(20)
        .margin(50)
    }
    .width('100%')
    .height('100%')
    .gesture(
      PanGesture()
        .onActionUpdate((event: GestureEvent) => {
          // Use displayX to detect screen edge
          if (event.fingerList[0].displayX < 60 &&
            event.offsetX > 30) { // Swiped more than 30vp from the edge
            this.edgeTriggered = true;
          }
        })
        .onActionEnd(() => {
          this.edgeTriggered = false;
        })
    )
  }
}

Test Results

Limitations or Considerations

This example supports API Version 19 Release and above.

This example supports HarmonyOS 5.1.1 Release SDK and above.

This example must be compiled and run using DevEco Studio 5.1.1 Release and above.