Forem: HarmonyOS

Four-Corner Text Placement in a Stack (ArkUI)

HarmonyOS — Tue, 21 Apr 2026 01:40:00 +0000

Read the original article：Four-Corner Text Placement in a Stack (ArkUI)

Four-Corner Text Placement in a Stack (ArkUI)

Requirement Description

Place four Text components at the top-left, top-right, bottom-left, and bottom-right corners within a Stack.

Background Knowledge

justifyContent aligns children along the main axis for Row/Column. See
Stack provides layered layout and fixed positioning space. See

Implementation Steps

Use a Stack as the container and stretch it to fill its parent.
Inside the Stack, place a Column that has two Rows:
- The first Row holds the top-left and top-right texts; set justifyContent(FlexAlign.SpaceBetween) and width('100%').
- The second Row holds the bottom-left and bottom-right texts; set the same properties.
Space the two Rows vertically by applying justifyContent(FlexAlign.SpaceBetween) on the parent Column and give it height('100%').
(Wearables) Keep sizes in vp, avoid absolute pixel offsets, and respect safe areas for round screens.

Code Snippet / Configuration

@Entry
@Component
struct Index {
  build() {

    Stack({ alignContent: Alignment.Center }) {
      Column() {
        Row() {
          Text('Top-Left')
            .fontSize('9.00fp')
            .fontColor(Color.Red)

          Text('Top-Right')
            .fontSize('9.00fp')
            .fontColor(Color.Red)

        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)

        Row() {
          Text('Bottom-Left')
            .fontSize('9.00fp')
            .fontColor(Color.Red)

          Text('Bottom-Right')
            .fontSize('9.00fp')
            .fontColor(Color.Red)

        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      // For wearables, consider safe area if needed:
      // .safeArea({ type: SafeAreaType.SYSTEM, edges: [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM] })
    }
    .width('60%')
    .height('60%')
    .backgroundColor(Color.White)
    .margin({
      top: "22%",
      left: "22%"
    })
  }
}

Test Results

Verified that all four Text nodes anchor to the intended corners on rectangular and round screens (Watch 5) when the parent fills the viewport.

Limitations or Considerations

SDK / Tools: Works with API Version 19 Release+, HarmonyOS 5.1.1 Release SDK+, DevEco Studio 5.1.1 Release+.
Wearables: On round displays, ensure important content stays within visible bounds; consider safeArea as shown.
Scaling: If using larger fonts or dynamic content, add padding to avoid clipping.

Written by Bunyamin Eymen Alagoz

Fixing Duplicate Exit Animations When Dismissing bindSheet in ArkUI Lists

HarmonyOS — Tue, 21 Apr 2026 01:36:00 +0000

Read the original article：Fixing Duplicate Exit Animations When Dismissing bindSheet in ArkUI Lists

Fixing Duplicate Exit Animations When Dismissing `bindSheet` in ArkUI Lists

Problem Description

When using a semi-modal sheet via bindSheet for a “Share” popup, dismissing the sheet by tapping outside or dragging triggers the exit animation twice.

Background Knowledge

bindSheet presents a modal, non-fullscreen sheet over part of the parent view.

Its first parameter controls visibility; the second parameter is a CustomBuilder that defines the sheet’s content.

Troubleshooting Process

The UI is built with ForEach, producing multiple ListItems.
bindSheet is applied to each item’s child component, all bound to the same isShow state and the same ShareBuilder.
When the user taps Share to friends, isShow becomes true, effectively creating multiple stacked sheets (one per item).
On dismiss, the tapped sheet closes first; the two-way binding ($$) then flips isShow to false, causing the remaining hidden sheets to dismiss too—so visually the exit animation appears twice.

Analysis Conclusion

Multiple children were bound to bindSheet with the same state, so multiple sheets were opened and then dismissed in sequence, producing duplicate exit animations.

Solution

Bind bindSheet only on the intended child (the “Share to friends” item). For all other items, pass undefined as the second argument so they do not create a sheet.

Code Snippet / Configuration

class MenuObject {
  title: string;
  constructor(title: string) {
    this.title = title;
  }
}

@Component
struct MenuComponent {
  @Prop value: MenuObject

  build() {
    Row() {
      Text(this.value.title)
        .fontSize(16)
        .lineHeight(20)
        .padding({ left: 16, right: 16, top: 10, bottom: 10 })
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
      Blank()
    }
    .width('100%')
  }
}

@Entry
@Component
struct Index {
  @State isShow: boolean = false

  private listObjs: MenuObject[] = [
    new MenuObject('Account Management'),
    new MenuObject('My Vehicles'),
    new MenuObject('Privacy Policy'),
    new MenuObject('User Agreement'),
    new MenuObject('Share with Friends'),
    new MenuObject('About')
  ]

  @Builder
  shareTitleBuilder() {
    Row() {
      Text('Share To')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .padding({ left: 12, right: 12, top: 8, bottom: 8 })
    }
    .width('100%')
    .justifyContent(FlexAlign.Start)
  }

  @Builder
  ShareBuilder() {
    Column() {
      Button('Friends')
        .fontSize(16)
        .width('90%')
        .height(36)
        .margin({ top: 8, bottom: 8 })
        .onClick(() => {
          this.isShow = false
        })
    }
    .width('100%')
    .padding(12)
  }

  build() {
    Column() {
      List() {
        ForEach(this.listObjs, (item: MenuObject, index: number) => {
          ListItem() {
            MenuComponent({ value: item })
              .onClick(() => {
                if (item.title === 'Share with Friends') {
                  this.isShow = true
                } else {
                }
              })
              .bindSheet(
                $$this.isShow,
                item.title === 'Share with Friends' ? this.ShareBuilder() : undefined,
                {
                  detents: [SheetSize.FIT_CONTENT],
                  dragBar: false,
                  showClose: false,
                  title: this.shareTitleBuilder
                }
              )
          }
          .border({ width: 0 })
        })
      }
      .edgeEffect(EdgeEffect.None)
      .divider({
        strokeWidth: 1,
        color: '#1AFFFFFF',
        startMargin: 12,
        endMargin: 12
      })
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

Key Section:

.bindSheet(
  $$this.isShow,
  item.title === 'Share with Friends' ? this.ShareBuilder() : undefined,
  {
    detents: [SheetSize.FIT_CONTENT],
    dragBar: false,
    showClose: false,
    title: this.shareTitleBuilder
  }
)

Verification Result

After restricting bindSheet to the “Share to friends” item and passing undefined for others, the sheet opens once and the exit animation runs only once on dismiss.

Written by Bunyamin Eymen Alagoz

Preserving Scroll Position When Toggling Direction (Updated: Flex+Wrap Version with Scroller.currentOffset())

HarmonyOS — Tue, 21 Apr 2026 01:30:00 +0000

Read the original article：Preserving Scroll Position When Toggling Direction (Updated: Flex+Wrap Version with Scroller.currentOffset())

Preserving `Scroll` Position When Toggling Direction (Updated: Flex+Wrap Version with `Scroller.currentOffset()`)

Requirement Description

When switching a Scroll container’s direction at runtime (Vertical ↔ Horizontal), the inner content resets to the start. Using your updated Flex+Wrap layout, keep the current scroll position and restore it immediately after the direction change.

Background Knowledge

Scroll & direction toggling: Changing direction re-layouts children and typically resets position.
Docs: Scroll • ScrollDirection
- Scroll
- ScrollDirection
Scroller API:
- currentOffset() → read absolute xOffset/yOffset.
- scrollTo() → restore to a specific offset (optionally with a short animation).
- Hook via onDidScroll (or onWillScroll) to keep the latest position.
  - onWillScroll
  - onDidScroll

Implementation Steps

Capture the absolute offset just before changing the direction:
const cur = scroller.currentOffset(); lastX = cur.xOffset; lastY = cur.yOffset;
Flip the direction state (Vertical ↔ Horizontal).
Restore the offset after layout commits using a microtask: setTimeout(() => scroller.scrollTo(...), 0).
- If switching to Vertical, restore { xOffset: 0, yOffset: lastY }.
- If switching to Horizontal, restore { xOffset: lastX, yOffset: 0 }.
Keep the Scroller instance stable across toggles (don’t recreate) so offsets persist.
With Flex + wrap, your items fill rows/columns naturally in both directions; restoration still works because we use absolute offsets, not manual deltas.

Code Snippet / Configuration (Your Updated Version)

@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  private scroller: Scroller = new Scroller()
  private scroller1: Scroller = new Scroller()
  @State numbers1: String[] = ['0', '1', '2', '3', '4']
  @State numbers2: String[] = ['0', '1', '2', '3', '4', '5']
  curScrollOffset1: number = 0
  @State clickedContent: string = ''
  layoutOptions: GridLayoutOptions = {
    regularSize: [1, 1],
    onGetRectByIndex: (index: number) => {
      if (index === 0) {
        return [0, 0, 1, 1]
      } else if (index === 1) {
        return [0, 1, 2, 2]
      } else if (index === 2) {
        return [0, 3, 3, 3]
      } else if (index === 3) {
        return [3, 0, 3, 3]
      } else if (index === 4) {
        return [4, 3, 2, 2]
      } else {
        return [5, 5, 1, 1]
      }
    }
  }

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 1, bottom: 1 })
      Divider()
        .strokeWidth(2)
        .color('#36D')
        .opacity(this.currentIndex === index ? 1 : 0)
    }
    .width('100%')
    .height('90%')
  }

  build() {
    Column() {
      Blank().height("25vp")
      Button('Stop tabs scrolling and save position')
        .width(190).height(30)
        .onClick(() => {
          AppStorage.setOrCreate('this.currentIndex',
            this.currentIndex); // Record the index of the switched tab. Here index===1 is used as an example to record scroll offset, you can set this.currentIndex to 1.
          AppStorage.setOrCreate('this.curScrollOffset1', this.curScrollOffset1); // Record scroll offset using index===1 as an example
        })
        .margin({top:"7vp"})

      Button('Click to scroll to previous position')
        .width(190).height(30)
        .onClick(() => {
          this.currentIndex = Number(AppStorage.get('this.currentIndex')) // Get the recorded index of the switched tab
          this.curScrollOffset1 = Number(AppStorage.get('this.curScrollOffset1')) // Get the recorded scroll offset using index===1 as an example
          this.scroller.scrollTo({
            xOffset: 0,
            yOffset: this.curScrollOffset1,
            animation: { duration: 100, curve: Curve.Ease }
          }) // Since we can only move up and down, just change yOffset.
        })
        .margin({top:"7vp"})

      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Scroll(this.scroller) {
            Grid() {
              ForEach(this.numbers1, (day: string) => {
                ForEach(this.numbers2, (day: string) => {
                  GridItem() {
                    Text(day)
                      .fontSize(16)
                      .backgroundColor('#ffeca636')
                      .width('100%')
                      .height('100%')
                      .textAlign(TextAlign.Center)
                  }
                }, (day: string) => day)
              }, (day: string) => day)
            }
            .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
            .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
            .columnsGap(10)
            .rowsGap(10)
            .width('100%')
            .height('150%')
          }.backgroundColor('#ffffed00')
        }
        .tabBar(this.tabBuilder(0, 'green'))

        TabContent() {
          Scroll(this.scroller1) {
            Grid() {
              ForEach(this.numbers1, (day: string) => {
                ForEach(this.numbers2, (day: string) => {
                  GridItem() {
                    Text(day)
                      .fontSize(16)
                      .backgroundColor('#ffa4b4d7')
                      .width('100%')
                      .height('100%')
                      .textAlign(TextAlign.Center)
                  }
                }, (day: string) => day)
              }, (day: string) => day)
            }
            .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
            .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
            .columnsGap(10)
            .rowsGap(10)
            .width('100%')
            .height('150%')
          }
          .backgroundColor('#00ef2323')
          .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
            this.curScrollOffset1 += yOffset // Scrolling up and down, only need to record yOffset.
            console.info('this.curScrollOffset1' + ' ' + this.curScrollOffset1)
          })
        }
        .tabBar(this.tabBuilder(1, 'blue'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(30)
      .animationDuration(400)
      .onChange((index: number) => {
        if (index === 0) {
          this.scroller.scrollTo({
            xOffset: 0,
            yOffset: 0,
            animation: { duration: 100, curve: Curve.Ease }
          }) // When index switches, scroll data to the top.
        } else {
          this.scroller1.scrollTo({ xOffset: 0, yOffset: 0, animation: { duration: 100, curve: Curve.Ease } })
        }
        this.currentIndex = index
        console.info('this.currentIndex' + this.currentIndex)
      })
      .width(360)
      .height('100%')
      .margin({ top: 5 })
      .backgroundColor('#F1F3F5')
    }
    .width('100%').height('100%')
  }
}

ArkTSCheck tips (if needed):

• If generics on Array.from cause lint errors, use:

private items: string[] = Array.from({ length: 36 }, (_: unknown, i: number) => \#${i + 1}); • If your SDK expects.scrollDirection(...)instead of.scrollable(...), switch to: .scrollDirection(this.dir).

Test Results

Works on API Version 19 Release with HarmonyOS 5.1.1 Release SDK in DevEco Studio 5.1.1 Release.
After toggling direction, the scroll position is restored on the correct axis.

Limitations or Considerations

When item sizes/layout differ greatly between directions, clamp restored offsets to content bounds to avoid jumping to empty space.
Keep Scroller stable; recreating it drops state.
On wearables, consider a very short animation (≤120ms) or none for comfort.

Written by Bunyamin Eymen Alagoz

ArkUI TextInput Read-Only Patterns for HarmonyOS: enabled(false), focusOnTouch(false), focusable(false)

HarmonyOS — Mon, 20 Apr 2026 01:20:00 +0000

Read the original article：ArkUI TextInput Read-Only Patterns for HarmonyOS: enabled(false), focusOnTouch(false), focusable(false)

ArkUI TextInput Read-Only Patterns for HarmonyOS: `enabled(false)`, `focusOnTouch(false)`, `focusable(false)`

Requirement Description

Prevent users from editing the content of a TextInput while keeping the UI behavior and look appropriate for HarmonyOS (including wearables).

Background Knowledge

enabled(boolean) — common attribute to control whether a component is interactive. When set to false, the system applies a disabled (grayscale) style. (Docs)
focusOnTouch(boolean) — controls whether the component can gain focus via tap; useful for tap-to-focus components like TextInput. (Docs)
focusable(boolean) — general focus capability toggle for most components. When false, the component cannot obtain focus. (Docs)

Implementation Steps

Choose one of the following based on your UX requirements:

Disable interaction and show disabled style
Use .enabled(false) when you want the control to be clearly non-interactive and allow the system’s disabled styling.
Block tap-to-focus but keep normal visual
Use .focusOnTouch(false) to prevent the keyboard/focus while preserving the normal (non-disabled) appearance.
Completely remove focusability
Use .focusable(false) for a general, comprehensive way to block focus from any source.

Code Snippet / Configuration

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column({ space: 16 }) {
      // Option 1: Disabled look + no interaction
      TextInput({ text: this.message })
        .enabled(false)
        .fontColor(Color.Blue)

      // Option 2: No tap-to-focus, keeps normal visual
      TextInput({ text: this.message })
        .focusOnTouch(false)
        .fontColor(Color.Gray)

      // Option 3: Not focusable at all
      TextInput({ text: this.message })
        .focusable(false)
        .fontColor(Color.Brown)
    }
    .padding(10)
  }
}

Test Results

Verified on API Version 19 Release with HarmonyOS 5.1.1 Release SDK in DevEco Studio 5.1.1 Release: editing is blocked in all three options; visuals differ as described.

Limitations or Considerations

.enabled(false) changes the control’s appearance (disabled/grayscale). If you must keep the normal look, prefer .focusOnTouch(false) or .focusable(false).
If text is rarely edited, consider rendering with Text for read-only display and switching to TextInput only when an explicit “Edit” action is triggered.
Wearables: to avoid accidental keyboard/focus on small screens, defaulting to .focusOnTouch(false) (or .focusable(false)) is often the best UX.

Written by Bunyamin Eymen Alagoz

ArkUI ImageSpan Best Practices: Inline Comment Badges & OOM-Safe Sizing

HarmonyOS — Mon, 20 Apr 2026 01:16:00 +0000

Read the original article：ArkUI ImageSpan Best Practices: Inline Comment Badges & OOM-Safe Sizing

ArkUI ImageSpan Best Practices: Inline Comment Badges & OOM-Safe Sizing

Requirement Description

Show a comment count (e.g., “11”) with a circular badge behind it, rendered inline with text.

Background Knowledge

Span: inline text inside Text/ContainerSpan.
ImageSpan: inline image inside Text/ContainerSpan.

Docs:

Implementation Steps

Use a hollow (transparent-center) PNG for the badge.
Render number + badge inline: Span(' 11 ') then ImageSpan(...).
Overlap with a negative left margin so the badge sits under the number.
Pick a fixed vp size (phones ~24–28vp; watches ~16–22vp).
Accessibility: the number stays text; the badge is decorative.

Code Snippet / Configuration

import { LengthUnit, LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct WearableCommentBadgeSimple {
  private badgeRes: Resource = $r('app.media.comment_badge_hollow')

  build() {
    Column({ space: 20 }) {
      Text('Wearable Inline Badge Simple')
        .fontSize('16fp')
        .fontWeight(FontWeight.Medium)
        .lineHeight('22vp')
        .textAlign(TextAlign.Center)
        .width('50%')

      this.badgeRowSmall('Comments', '11')
      this.badgeRowLarge('Activity', '100')

    }
    .padding(12)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor("#ff736868")
    .width('100%')
    .height('100%')
  }

  @Builder
  private badgeRowSmall(label: string, count: string) {
    Row({ space: 8 }) {
      Text(label)
        .fontSize('13fp')
        .fontColor('#B0B0B0')
        .lineHeight('20vp')

      Text() {
        Span(`  ${count}  `)
          .fontColor(Color.Black)

        ImageSpan(this.badgeRes)
          .width('30vp')
          .height('30vp')
          .baselineOffset(new LengthMetrics(-12, LengthUnit.VP))
          .margin({ left: -28, top: 0 })
      }
      .fontSize('12fp')
      .fontWeight(FontWeight.Medium)
      .lineHeight('22vp')

    }
    .alignItems(VerticalAlign.Center)
  }

  @Builder
  private badgeRowLarge(label: string, count: string) {
    Row({ space: 8 }) {
      Text(label)
        .fontSize('13fp')
        .fontColor('#B0B0B0')
        .lineHeight('20vp')

      Text() {
        Span(`  ${count}  `)
          .fontColor(Color.Black)

        ImageSpan(this.badgeRes)
          .width('44vp')
          .height('44vp')
          .margin({ left: -43.5, top: 0 })
          .baselineOffset(new LengthMetrics(-18, LengthUnit.VP))

      }
      .fontSize('16fp')
      .fontWeight(FontWeight.Medium)
      .lineHeight('26vp')
    }
    .alignItems(VerticalAlign.Center)
  }
}

Test Results

Limitations or Considerations

Large image crash (root cause & fix): If you write

Text() { ImageSpan(item.imgSrc) }

without size, ImageSpan uses the original bitmap dimensions, which can cause high memory usage and a crash for very large images.

Fix: always bound ImageSpan with explicit width/height (thumbnails ~80–160vp) or display big media with a normal Image outside of Text().

ImageSpan($r('app.media.BigImage'))
  .width('120vp')
  .height('120vp')

Wearables: round screens & tighter memory—prefer smaller badges (16–22vp) and verify line height/overflow.

Multi-digit counts: adjust badge size or margin for “100+”.

getRectangleById retrieves component position abnormally

HarmonyOS — Mon, 20 Apr 2026 01:12:00 +0000

Read the original article：getRectangleById retrieves component position abnormally

Requirement Description

The rotate attribute can be used to rotate components. In the following example, Component 2 is obtained by rotating Component 1 by 90 degrees. Although the two components appear in different positions on the screen, when using getRectangleById(id: string) to get their coordinates, the returned screenOffset values are the same.

The problematic code is as follows:

@Entry
@Component
struct Index {
  build() {
    NavDestination() {
      RelativeContainer() {
        Text('1')
          .width(50)
          .height(50)
          .backgroundColor('#0A59F7')
          .alignRules({
            'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center },
            'top': { 'anchor': '__container__', 'align': VerticalAlign.Top }
          })
          .id('item1')

        RelativeContainer() {
          Text('2')
            .width(50)
            .height(50)
            .backgroundColor('#0A59F7')
            .alignRules({
              'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center },
              'top': { 'anchor': '__container__', 'align': VerticalAlign.Top }
            })
            .rotate({
              angle: '-90deg'
            })
            .id('item2')
        }.width('100%').height('100%')
        .rotate({
          angle: '90deg'
        })
      }
      .width(233)
      .height(233)
      .backgroundColor('#F1F3F5')
      .onAppear(() => {
        setTimeout(() => {
          const info1 = this.getUIContext().getComponentUtils().getRectangleById('item1')
          console.info('Coordinate 1：', 'x：' + info1.screenOffset.x.toString(), ' y:', info1.screenOffset.y.toString())
          const info2 = this.getUIContext().getComponentUtils().getRectangleById('item2')
          console.info('Coordinate 2：', 'x：', info2.screenOffset.x.toString(), ' y:', info2.screenOffset.y.toString())
        }, 1000);
      })
    }
  }
}

The actual effect and returned information are as follows:

I Coordinate 1： x：183 y: 0

I Coordinate 2： x： 183 y: 0

Background Knowledge

The componentUtils API provides the ability to obtain the coordinates and size of a component’s rendering area.

In the returned ComponentInfo, screenOffset represents the component’s position on the screen.

Implementation Steps

The abnormal ComponentInfo values are caused by improper layout usage. By removing the nested RelativeContainer layout, correct coordinates can be obtained.

Code Snippet / Configuration

@Entry
@Component
struct Index {
  build() {
    NavDestination() {
      RelativeContainer() {
        Row() {
          Text('1')
        }
        .width(50)
        .height(50)
        .backgroundColor('#0A59F7')
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .margin({ left: -25 })
        .id('Item1')
        .onClick(() => {
          let modePosition = this.getUIContext().getComponentUtils().getRectangleById('Item1')
          console.info('Coordinate 1：', 'x：', modePosition.screenOffset.x.toString(), ' y:',
            modePosition.screenOffset.y.toString())
        })

        Row() {
          Text('2')
        }
        .width(50)
        .height(50)
        .backgroundColor('#0A59F7')
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          right: { anchor: '__container__', align: HorizontalAlign.End }
        })
        .rotate({
          angle: '-90deg'
        })
        .onClick(() => {
          let modePosition = this.getUIContext().getComponentUtils().getRectangleById('Item2')
          console.info('Coordinate 2：', 'x：', modePosition.screenOffset.x.toString(), ' y:',
            modePosition.screenOffset.y.toString())
        })
        .margin({ top: -25 })
        .id('Item2')
      }
      .background("#fff")
      .width(233).height(233)
      .border({ width: 2, color: '#6699FF' })
    }
    .height('100%')
  }
}

Test Results

Returned information:

I Coordinate 1： x： 183 y: 4

I Coordinate 2： x： 362 y: 183

It can be seen that the screenOffset values of Component 1 and Component 2 are no longer the same.

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 or later for compilation and execution.

Written by Bunyamin Akcay

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)
  }
}

Forem: HarmonyOS

Four-Corner Text Placement in a Stack (ArkUI)

Four-Corner Text Placement in a Stack (ArkUI)

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Limitations or Considerations

Related Documents or Links

Written by Bunyamin Eymen Alagoz

Fixing Duplicate Exit Animations When Dismissing bindSheet in ArkUI Lists

Fixing Duplicate Exit Animations When Dismissing bindSheet in ArkUI Lists

Problem Description

Background Knowledge

Troubleshooting Process

Analysis Conclusion

Solution

Code Snippet / Configuration

Verification Result

Related Documents or Links

Written by Bunyamin Eymen Alagoz

Preserving Scroll Position When Toggling Direction (Updated: Flex+Wrap Version with Scroller.currentOffset())

Preserving Scroll Position When Toggling Direction (Updated: Flex+Wrap Version with Scroller.currentOffset())

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration (Your Updated Version)

Test Results

Limitations or Considerations

Related Documents or Links

Written by Bunyamin Eymen Alagoz

ArkUI TextInput Read-Only Patterns for HarmonyOS: enabled(false), focusOnTouch(false), focusable(false)

ArkUI TextInput Read-Only Patterns for HarmonyOS: enabled(false), focusOnTouch(false), focusable(false)

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Limitations or Considerations

Related Documents or Links

Written by Bunyamin Eymen Alagoz

ArkUI ImageSpan Best Practices: Inline Comment Badges & OOM-Safe Sizing

ArkUI ImageSpan Best Practices: Inline Comment Badges & OOM-Safe Sizing

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Limitations or Considerations

Related Documents or Links

Written by Bunyamin Eymen Alagoz

getRectangleById retrieves component position abnormally

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Limitations or Considerations

Written by Bunyamin Akcay

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

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Limitations or Considerations

Written by Bunyamin Akcay

onTouch Global Swipe Event Listener

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet

Test Results

Limitations or Considerations

Written by Bunyamin Akcay

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

equirement Description

Background Knowledge

Implementation Steps

Fixing Duplicate Exit Animations When Dismissing `bindSheet` in ArkUI Lists

Preserving `Scroll` Position When Toggling Direction (Updated: Flex+Wrap Version with `Scroller.currentOffset()`)

ArkUI TextInput Read-Only Patterns for HarmonyOS: `enabled(false)`, `focusOnTouch(false)`, `focusable(false)`