DEV Community: HarmonyOS

How to play video format in wearable device

HarmonyOS — Fri, 29 May 2026 01:40:00 +0000

Read the original article：How to play video format in wearable device

Context

The Video component is used to play a video and control its playback. It is usually used in video players and video list pages within applications. A video automatically plays once fully loaded. When the user clicks the video area, the video is paused and the playback progress bar is displayed. The user can drag the progress bar to the desired position.

Description

Video content is a core part of modern mobile applications, used in areas like education, media streaming, social platforms, advertising, and entertainment. HarmonyOS supports video playback within ArkTS-based applications through a built-in Video component. This enables developers to easily embed and control video playback using a declarative UI approach.

By integrating video into ArkTS apps, developers can deliver rich and engaging multimedia experiences. However, video playback also requires careful handling in terms of performance, resource access, and user controls.

Solution / Approach

// xxx.ets
@Entry
@Component
struct VideoGuide {
  @State videoSrc: Resource = $rawfile('video.mkv')
  @State previewUri: string = 'common/videoIcon.png'
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  @State isAutoPlay: boolean = false
  @State showControls: boolean = true
  @State sliderStartTime: string = ''
  @State currentTime: number = 0
  @State durationTime: number = 0
  @State durationStringTime: string = ''
  controller: VideoController = new VideoController()

  build() {
    Row() {
      Stack() {
        Video({
          src: this.videoSrc,
          previewUri: this.previewUri,
          currentProgressRate: this.curRate,
          controller: this.controller
        }).width('100%').height('100%')
          .controls(false)
          .autoPlay(true)
          .onPrepared((event) => {
            if (event) {
              this.durationTime = event.duration
            }
          })
          .onUpdate((event) => {
            if (event) {
              this.currentTime = event.time
            }
          })
        Row() {
          Text(JSON.stringify(this.currentTime) + 's')
          Slider({
            value: this.currentTime,
            min: 0,
            max: this.durationTime
          })
            .onChange((value: number, mode: SliderChangeMode) => {
              this.controller.setCurrentTime(value);
            })
            .width("60%")
          Text(JSON.stringify(this.durationTime) + 's')
        }
        .opacity(0.8)
        .width("100%").margin({top:'20%'}).justifyContent(FlexAlign.Center)
      }
      .width('100%')
    }
    .height('100%')
  }
}

Key Takeaways

The Video component in ArkTS provides a straightforward and declarative way to embed video playback into HarmonyOS applications.
It supports both local and remote video sources, enabling flexibility for use cases like streaming, tutorials, or media previews.
Developers can utilize a VideoController to manage playback actions such as play, pause, seek, and stop, providing full user control over the video experience.
The component can emit events such as onStart, onPause, onError, and onFinish, which allow developers to track and respond to playback states dynamically.
UI responsiveness and layout adaptability are maintained, meaning the video can be scaled, positioned, or styled to match the overall design of the application.
Performance considerations should be made, especially when streaming high-resolution content or running on devices with limited hardware resources.
When accessing remote video files, always ensure network permissions are granted in the app’s configuration, and use efficient buffering strategies for smoother playback.

Written by Ataberk Celiktas

How to create barcode in wearable device

HarmonyOS — Fri, 29 May 2026 01:38:00 +0000

Read the original article：How to create barcode in wearable device

Context

The barcode image generation capability can convert a string into a barcode image of a custom format.

Description

This capability can convert a string into a 1D code or 2D code of a custom format.

You can use this capability to convert a string into a contact barcode or a phone clone barcode, for example, converting string "HUAWEI" into a barcode.

Solution / Approach

@Entry
@Component
struct Index {
  @State pixelMap: image.PixelMap | undefined = undefined

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('generateBarcode Callback').onClick(() => {
        // Set parameters for generating a barcode image, for example, a QR code image.
        let content = 'huawei';
        let options: generateBarcode.CreateOptions = {
          scanType: scanCore.ScanType.QR_CODE,
          height: 400,
          width: 400
        }
        try {
        // Return a PixelMap-format barcode image.
          generateBarcode.createBarcode(content, options, (error: BusinessError, pixelMap: image.PixelMap) => {
            if (error) {
              hilog.error(0x0001, '[generateBarcode]',
                `Failed to get PixelMap by callback with options. Code: ${error.code}, message: ${error.message}`);
              return;
            }
            this.pixelMap = pixelMap;
          })
        } catch (error) {
          hilog.error(0x0001, '[generateBarcode]',
            `Failed to createBarcode by callback with options. Code: ${error.code}, message: ${error.message}`);
        }
      })
      // Display the obtained barcode image.
      if (this.pixelMap) {
        Image(this.pixelMap).width(300).height(300).objectFit(ImageFit.Contain)
      }
    }
    .width('100%')
    .height('100%')
  }
}

Key Takeaways

The barcode image generation capability supports mobile phones, tablets, smart wearables (supported since 5.1.0(18)), 2-in-1 devices (supported since 5.1.1(19)), and TVs (supported since 5.1.1(19)).
This capability can generate barcodes in 13 formats, and the generation parameters vary depending on the barcode format. The table below describes restrictions for each barcode format.

Written by Ataberk Celiktas

How to add blur effects in your wearable project

HarmonyOS — Fri, 29 May 2026 01:36:00 +0000

Read the original article：How to add blur effects in your wearable project

Context

Animation effects can add detail to your animations and create a sense of realism. For example, blur and shadow effects can lend a 3D look to objects and deliver a more engaging animation experience. ArkUI provides a diverse array of efficient APIs for you to develop exquisite and personalized effects. This topic covers the common blur, shadow, and color effects.

Blur effects add a sense of depth and allow for distinction of hierarchical relationship between elements.

Description

API	Description
backdropBlur	Applies a background blur effect to the component. The input parameter is the blur radius.
blur	Applies a foreground blur effect to the component. The input parameter is the blur radius.
backgroundBlurStyle	Applies a background blur effect to the component. The input parameter is the blur style.
foregroundBlurStyle	Applies a foreground blur effect to the component. The input parameter is the blur style.
motionBlur	Applies a motion blur effect to the component being scaled or moved. The input parameters are the blur radius and anchor point coordinates.

Solution / Approach

Applying Motion Blur with motionBlur

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

@Entry
@Component
struct motionBlurTest {
  @State widthSize: number = 280
  @State heightSize: number = 200
  @State flag: boolean = true
  @State radius: number = 0
  @State x: number = 0
  @State y: number = 0

  build() {
    Column() {
      Column() {
        Image($r('app.media.startIcon'))
          .width(this.widthSize)
          .height(this.heightSize)
          .onClick(() => {
            this.radius = 5;
            this.x = 0.5;
            this.y = 0.5;
            if (this.flag) {
              this.widthSize = 100;
              this.heightSize = 75;
            } else {
              this.widthSize = 280;
              this.heightSize = 200;
            }
            this.flag = !this.flag;
          })
          .animation({
            duration: 2000,
            curve: curves.springCurve(10, 1, 228, 30),
            onFinish: () => {
              this.radius = 0;
            }
          })
          .motionBlur({ radius: this.radius, anchor: { x: this.x, y: this.y } })
      }
    }.width('100%').height('100%').margin({ top: 5 }).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  }
}

Key Takeaways

Blur is most effective when used on static backgrounds, blurred images, or canvas elements where the content underneath does not change rapidly.

Written by Ataberk Celiktas

How to Integrate ndk with ArkUi (ContentSlot with NodeContent)

HarmonyOS — Thu, 28 May 2026 01:34:00 +0000

Read the original article：How to Integrate ndk with ArkUi (ContentSlot with NodeContent)

Context

In HarmonyOS ArkUI, user interfaces often need dynamically changing content. For example, a given area may sometimes display text, sometimes an image, or even a video. To achieve this flexibility, ContentSlot and NodeContent are used together.

Description

ContentSlot defines a “placeholder area” in the UI.
NodeContent manages what components are placed into that area.
ContentSlot only reserves the space, while NodeContent dynamically decides and updates the actual content.

Approach / Solution

import { nativeNode } from 'libNativeNode.so'; // Developer-implemented .so file.
import { NodeContent } from '@kit.ArkUI';

@Entry
@Component
struct Parent {
  private nodeContent: Content = new NodeContent();

  aboutToAppear() {
    // Create a node through the C API and add it to the nodeContent manager.
    nativeNode.createNativeNode(this.nodeContent);
  }

  build() {
    Column() {
      // Display the native components stored in the nodeContent manager.
      ContentSlot(this.nodeContent)
    }
  }
}

Key Takeaway

ContentSlot acts as a flexible placeholder in the UI where content can be dynamically loaded.
NodeContent is the content manager that determines what appears in the slot at runtime.
Together, they allow the same UI area to display different components based on application logic or user state.
This combination makes the interface modular, reusable, and highly adaptable, reducing duplicate code and improving maintainability.
It also enables dynamic user experiences, such as switching between different views, messages, or media types without rebuilding the entire UI.
Overall, using ContentSlot with NodeContent provides developers with a powerful pattern for building responsive, context-aware HarmonyOS applications.

Written by Ataberk Celiktas

How solve 'undefined symbol error has occurred' error

HarmonyOS — Thu, 28 May 2026 01:31:00 +0000

Read the original article：How solve 'undefined symbol error has occurred' error

Question

How to fix undefined error while writing native c (NDK) application ?

Short Answer

The "undefined symbol" error typically indicates that the linker cannot find the definition of a specific symbol. This issue often occurs when source files are not compiled or linked correctly, or when the necessary library files are missing. To locate and rectify this issue, perform the following steps:

Check your CMakeLists.txt file to ensure that all relevant source files are included in the project.

Step 1 ->

Step 2->

Step 3-> Add library in CmakeLists.txt in target_link_libraries

# the minimum version of CMake.
cmake_minimum_required(VERSION 3.5.0)
project(NativeDrawing)

set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})

if(DEFINED PACKAGE_FIND_FILE)
    include(${PACKAGE_FIND_FILE})
endif()

include_directories(${NATIVERENDER_ROOT_PATH}
                    ${NATIVERENDER_ROOT_PATH}/include)

add_library(entry SHARED napi_init.cpp)
target_link_libraries(entry PUBLIC libace_napi.z.so libnative_drawing.so libace_ndk.z.so)

Applicable Scenarios

HarmonyOS 2.0 and above.

Written by Ataberk Celiktas

How can I obtain the signature and SHA1 values for my HarmonyOS app?

HarmonyOS — Thu, 28 May 2026 01:29:00 +0000

Read the original article：How can I obtain the signature and SHA1 values for my HarmonyOS app?

Question

How can I obtain the signature and SHA1 values for my HarmonyOS app?

Short Answer

The payment public key is obtained when activating the in-app payment service on the Huawei Developer Alliance.
Use the Sign.getSignSpec, Sign.update, and Sign.sign methods to generate a data signature.
It is not possible to obtain the SHA1 fingerprint of the app package. Instead, you will get the SHA256 hash value of the app signing certificate (.cer file).

Applicable Scenarios

When enabling in-app payment services and requiring a payment public key.
When generating and verifying RSA signatures using HarmonyOS APIs.
When working with app signing certificates and verifying app identity.

Reference Link

https://developer.huawei.com/consumer/en/doc/harmonyos-guides/crypto-rsa-sign-sig-verify-pss

https://developer.huawei.com/consumer/en/doc/harmonyos-references-V13/js-apis-bundlemanager-bundleinfo-V13#signatureinfo

Written by Arif Emre Ankara

Estimating Distance to BLE Beacons Using RSSI and TxPower in HarmonyOS

HarmonyOS — Wed, 27 May 2026 01:58:00 +0000

Read the original article：Estimating Distance to BLE Beacons Using RSSI and TxPower in HarmonyOS

Requirement Description

The developer needs to estimate the proximity between the user's device and a nearby BLE beacon to enable location-based behaviors (e.g., showing contextual ads, triggering entry/exit events, or indoor positioning). Since GPS is not suitable for short-range indoor detection, the distance must be calculated based on BLE signal strength using RSSI (Received Signal Strength Indicator) and TxPower (transmission power at 1 meter).

Background Knowledge

BLE beacons (especially iBeacon) include a TxPower field in their advertising payloads, representing the expected RSSI value at 1-meter distance. By comparing the actual measured RSSI with the known TxPower, we can estimate how far away the beacon is from the device.

The general formula used in BLE distance estimation is:

distance = 10 ^ ((txPower - rssi) / (10 * n))

Where:

rssi is the measured signal strength,
txPower is the transmission power at 1 meter,
n is the path-loss exponent (typically between 2 and 4, depending on the environment).

This method is not highly accurate but is good enough for approximate proximity grouping like Near (<1m), Mid (1–3m), Far (>3m).

Implementation Steps

Extract txPower and rssi from the BLE scan result.
Choose a reasonable n value depending on your environment (e.g., 2 for open space, 3 for indoor).
Apply the distance estimation formula.
Use distance thresholds to trigger behavior (e.g., notify if within 2 meters).
Optionally, smooth results over time to reduce RSSI fluctuation.

Code Snippet / Configuration

Distance Estimation Utility

export function estimateDistance(rssi: number, txPower: number, n: number = 3): number {
  if (rssi === 0) return -1; // Invalid RSSI
  const ratio = (txPower - rssi) / (10 * n);
  return parseFloat(Math.pow(10, ratio).toFixed(2));
}

Usage in a BLE Manager

const beacon = {
  uuid: '123e4567-e89b-12d3-a456-426614174000',
  major: 1,
  minor: 1,
  txPower: -59,
  rssi: -70,
};

const distance = estimateDistance(beacon.rssi, beacon.txPower);
console.info(`Beacon estimated at ~${distance} meters.`);

Interpreting the Result

function getProximityCategory(distance: number): string {
  if (distance < 1) return 'Immediate';
  if (distance < 3) return 'Near';
  if (distance >= 3) return 'Far';
  return 'Unknown';
}Copy codeCopy code

Test Results

Distance estimation was tested with several beacons placed at known distances (0.5m, 1m, 2m, 3m, 5m). The calculated distance was generally consistent within a ±0.5m range indoors. In real-world conditions (walls, reflections), the results were slightly more variable but still suitable for categorizing proximity into Immediate / Near / Far groups.

Fluctuations in RSSI were observed, so basic filtering (e.g., averaging last 3 readings) was found to improve stability. In low-power scan mode, distance updates arrived every ~1s depending on the beacon interval.

Limitations or Considerations

Factor	Notes
Accuracy	RSSI is very sensitive to orientation, interference, and obstacles.
Environmental Impact	Use a different `n` value depending on indoor vs outdoor usage.
Multiple Beacons	You may receive conflicting distances from overlapping signals.
Smoothing Required	Apply filtering (average, median, Kalman) to reduce jitter.
iBeacon Format Only	TxPower must be parsed from advertisement data (not always available for non-iBeacon formats).

Written by Arif Emre Ankara

Multi Target Product Build in HarmonyOS

HarmonyOS — Wed, 27 May 2026 01:55:00 +0000

Read the original article：Multi Target Product Build in HarmonyOS

Context

Modern mobile apps often need multiple build variants—such as free and premium—from the same codebase. HarmonyOS supports this through a native multi-target system, similar to Android’s product flavors.

Description

HarmonyOS uses a build-profile-based configuration to define and manage multiple app variants (targets) from a single codebase.

Variants can have different bundleName, icons, signing configs, and feature flags.
Configuration is done using build-profile.json5 files at both the project and module levels.
Logic in your ArkTS code can access these build flags at runtime using BuildProfile.

Solution

1.Project-Level Configuration (`build-profile.json5`)

{
    "app": {
        "products": [{ "name": "default", "signingConfig": "default", "runtimeOS": "HarmonyOS" }]
    },
    "modules": [{
        "name": "entry",
        "srcPath": "./entry",
        "targets": [
            { "name": "free", "applyToProducts": ["default"] },
            { "name": "paid", "applyToProducts": ["default"] }
        ]
    }]
}

2. Module-Level Configuration (`entry/build-profile.json5`)

{
    "apiType": "stageMode",
    "buildOptionSet": [
        {
            "name": "free",
            "arkOptions": { "buildProfileFields": { "IS_PREMIUM": "false" } }
        },
        {
            "name": "paid",
            "arkOptions": { "buildProfileFields": { "IS_PREMIUM": "true" } }
        }
    ],
    "targets": [
        { "name": "free" },
        { "name": "paid" }
    ]
}

3. Use in ArkTS Code

import BuildProfile from 'BuildProfile';

if (BuildProfile.IS_PREMIUM === "true") {
    // Premium features
} else {
    // Free version features
}

Key Takeaways

HarmonyOS natively supports multi-target builds using build-profile.json5.
Targets are cleanly defined and linked to products for easy switching.
You can inject build-time constants like IS_PREMIUM for feature gating.
This setup improves scalability, security, and automation in app development.

Addional Resources

https://developer.huawei.com/consumer/en/doc/best-practices/bpta-multi-target

Written by Ahmet Furkan Sevim

How to implement compass functionality with efficient sensor handling

HarmonyOS — Wed, 27 May 2026 01:49:00 +0000

Read the original article：How to implement compass functionality with efficient sensor handling

Context

Compass functionality is a common requirement in navigation, fitness, and outdoor applications. In HarmonyOS, the ROTATION_VECTOR sensor can be used to detect the device's orientation in real-time and calculate the azimuth (the angle between the device's forward direction and magnetic north).

Description

This implementation uses the sensor.SensorId.ROTATION_VECTOR to access device orientation. It computes the azimuth (0°–360°) from quaternion values (x, y, z, w) and updates a UI with this direction. The azimuth value is also used to rotate a compass image accordingly.

The app listens to sensor updates at a defined interval and stops listening when the page disappears. Additionally, permission for the accelerometer must be declared in the app’s configuration.

Solution

Permission Declaration

"requestPermissions": [
    {
      "name": "ohos.permission.ACCELEROMETER"
    }
]

Sensor Setup

sensor.on(sensor.SensorId.ROTATION_VECTOR, (data) => {
  const { x, y, z, w } = data
  const siny_cosp = 2 * (w * z + x * y)
  const cosy_cosp = 1 - 2 * (y * y + z * z)
  const azimuthRad = Math.atan2(siny_cosp, cosy_cosp)
  const azimuthDeg = (azimuthRad * 180 / Math.PI + 360) % 360

  this.azimuth = Math.round(azimuthDeg)
}, {
  interval: 100_000_000 // 100ms
})

Lifecycle Management

aboutToAppear() {
  this.onPageShow()
}

aboutToDisappear() {
  sensor.off(sensor.SensorId.ROTATION_VECTOR)
}

UI Update

Text(`Azimuth: ${this.azimuth}°`)
Image($r('app.media.compass'))
  .rotate({ angle: -this.azimuth })

Key Takeaways

Use ROTATION_VECTOR for smooth compass readings without magnetic field noise.
Convert quaternion values to azimuth using trigonometric formulas.
Use sensor.on() and sensor.off() in lifecycle methods for clean resource usage.
Declare sensor permissions (ACCELEROMETER) in module.json5 to avoid permission errors.

Additional Resources

https://developer.huawei.com/consumer/en/doc/harmonyos-guides/arkui-overview?source=post_page-----ac19ba17e6c0---------------------------------------

Written by Ahmet Furkan Sevim

How to get user location

HarmonyOS — Tue, 26 May 2026 01:44:00 +0000

Read the original article：How to get user location

Context

In a HarmonyOS application, you may need to fetch the user's current GPS location—for example, to show nearby places, track user movement, or personalize content based on their position.

Description

This function demonstrates how to retrieve the user's current location using LocationKit in HarmonyOS. It sends a one-time request for location with a speed-first priority and a 10-second timeout.

Solution

// module.json5
{
  "name": "ohos.permission.APPROXIMATELY_LOCATION",
  "reason": "$string:location_permission",
  "usedScene": {
    "abilities": [
      "EntryAbility"
    ],
    "when": "inuse"
  }
}
// EntryAbility.ets
async onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
  hilog.info(0x0000, "TAG", `EntryAbility onCreate`);
  let atManager = abilityAccessCtrl.createAtManager();
  try {
    atManager.requestPermissionsFromUser(this.context,
      ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'])
      .then((data) => {
        hilog.info(0x0000, TAG, `data: ${JSON.stringify(data)}`);
      })
      .catch((err: BusinessError) => {
        hilog.error(0x0000, TAG, `err: ${JSON.stringify(err)}`);
      })
  } catch (err) {
    hilog.error(0x0000, TAG, `catch err->${JSON.stringify(err)}`);
  }
}
import { geoLocationManager } from '@kit.LocationKit';
import type { BusinessError } from '@kit.BasicServicesKit';

export function getCurrentLocation(): Promise<LocationModel> {
  const request: geoLocationManager.SingleLocationRequest = {
    locatingPriority: geoLocationManager.LocatingPriority.PRIORITY_LOCATING_SPEED,
    locatingTimeoutMs: 10000
  };

  return geoLocationManager.getCurrentLocation(request)
    .then((result: geoLocationManager.Location): LocationModel => {
      return {
        lat: result.latitude,
        lon: result.longitude
      } as LocationModel;
    })
    .catch((error: BusinessError) => {
      throw (error instanceof Error ? error : new Error(JSON.stringify(error)));
    });
}

Key Takeaways

Use geoLocationManager.getCurrentLocation() for one-time GPS queries.
Set locatingPriority to choose between speed, accuracy, or battery optimization.
Always handle errors properly to avoid app crashes and improve user experience.
Wrap results in a domain model (LocationModel) for cleaner integration in ViewModels.

Additonal Resources

https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V13/location-kit-V13

Written by Ahmet Furkan Sevim

How to get the position of the first visible and last visible ListItem

HarmonyOS — Tue, 26 May 2026 01:41:00 +0000

Read the original article：How to get the position of the first visible and last visible ListItem

How to get the position of the first visible and last visible ListItem

Requirement Description

When scrolling a horizontal List component, how to dynamically track the indices of the first fully visible and last fully visible ListItem

Background Knowledge

List: A container for displaying a series of items with uniform width, suitable for presenting homogeneous data (e.g., images and text).
ListItem: Must be used within List to render individual items.
Events:
- onAreaChange: Triggered when component dimensions change, useful for obtaining coordinates and size.
- onScrollIndex: Fired when the first/last visible child index changes during scrolling.
- onScrollStop: Triggered when scrolling stops.
Limitation: onScrollIndex treats ListItemGroup as a single index (ignores inner ListItem indices). Use onVisibleAreaChange for grouped lists.

Implementation Steps

Use onAreaChange to get List width for visibility checks.
Initialize indices via onScrollIndex, then update them in onScrollStop.
Adjust indices for partial visibility:
- If the first item is partially hidden, use the next item.
- If the last item is partially hidden, use the previous item.

Code Snippet / Configuration

@Entry
@Component
struct ListExample {
  private arr: number[] = []
  private scrollerForList: Scroller = new Scroller()
  @State startStr: string = ''
  startIndex = 0  // First visible item
  endIndex = 0    // Last visible item
  initState = true
  listWidth: number = 0  // List width

  // Adjust indices for partial visibility (±3vp tolerance)
  private judgeVisible() {
    this.startStr = ""
    let rect = this.scrollerForList.getItemRect(this.startIndex)
    if (rect.x < -3) this.startIndex++  // Left-clipped item
    rect = this.scrollerForList.getItemRect(this.endIndex)
    if (rect.x + rect.width > this.listWidth + 3) this.endIndex--  // Right-clipped item
    this.startStr = (this.startIndex <= this.endIndex) 
      ? `${this.startIndex},${this.endIndex}` 
      : "No fully visible items"
  }

  aboutToAppear() {
    for (let i = 0; i < 20; i++) this.arr.push(i)
  }

  build() {
    Column({ space: 20 }) {
      Text(this.startStr).fontColor(Color.Red).height(100).width("100%")
      Row() {
        List({ space: 20, initialIndex: 0, scroller: this.scrollerForList }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text('' + item).width('100%').height(100)
            }
            .width(item % 4 == 0 ? 500 : 50).height(200)
          }, (item: number) => item.toString())
        }
        .listDirection(Axis.Horizontal)
        .onAreaChange((_, newValue) => { this.listWidth = newValue.width as number })
        .onScrollIndex((start, end) => {
          this.startIndex = start
          this.endIndex = end
          if (this.initState) { this.judgeVisible(); this.initState = false }
        })
        .onScrollStop(() => {
          const [tmpStart, tmpEnd] = [this.startIndex, this.endIndex]
          this.judgeVisible()
          this.startIndex = tmpStart
          this.endIndex = tmpEnd
        })
      }.width('100%').height('100%')
    }
  }
}

Handling ListItemGroup

ListItemGroup({ header: this.ListGroupHead(itemGroup.title) }) {
  ForEach(this.arr, (item: number) => {
    ListItem() {
      Text(item.toString())
    }
    .onVisibleAreaChange([0, 1], (isVisible: boolean, currRatio: number) => {
      // Logic for visibility changes (e.g., show header button for topmost group)
    })
  })
}

Test Results

Correctly identifies fully visible items in horizontal List.

Limitations

onScrollIndex ignores nested ListItem indices within ListItemGroup.

Requires manual adjustment for partial visibility thresholds (e.g., 3vp tolerance).

Written by Ahmet Furkan Sevim

Using Worker for Multithreaded Concurrency in ArkTS

HarmonyOS — Tue, 26 May 2026 01:34:00 +0000

Read the original article：Using Worker for Multithreaded Concurrency in ArkTS

Requirement Description

The Worker class in ArkTS enables creation of background threads with independent execution contexts. These threads operate outside the UI main thread and are ideal for handling long-running or computationally intensive tasks without freezing the UI.

Background Knowledge

Unlike TaskPool, which handles thread lifecycle automatically, the Worker model grants you full control over the lifecycle of a thread. Each Worker runs in its own context, allowing for data isolation, flexible communication, and customizable initialization.

Worker-based concurrency supports:

Independent message event loop
Separate memory context
Custom termination and control

Implementation Steps

Create a new Worker thread using new Worker(path), where path points to an .ets file containing workerMain.
Use postMessage() to send data from main thread to the worker.
Use onmessage to receive messages in both main and worker threads.
Use terminate() to stop the worker manually.

Note: Worker must be created in an .ets file. The target file must define a global function named workerMain().

Code Snippet / Configuration

main.ets

import worker from '@ohos.worker';

@Entry
@Component
struct Index {
  private myWorker: worker.Worker | undefined = undefined;

  aboutToAppear() {
    this.myWorker = new worker.Worker('worker.ts');
    this.myWorker.onmessage = (data: worker.MessageEvent) => {
      console.info('Main thread received message: ' + data.data);
    }
    this.myWorker.postMessage('Hello from Main Thread');
  }

  aboutToDisappear() {
    this.myWorker?.terminate();
  }

  build() {
    Column() {
      Text('Main UI Thread')
    }
  }
}

worker.ets

import worker from '@ohos.worker';

globalThis.workerMain = function () {
  worker.onmessage = function (event: worker.MessageEvent) {
    console.info('Worker received: ' + event.data);
    worker.postMessage('Hello from Worker');
  }
}

Test Results

Successfully sent and received messages between main thread and worker.
Verified that onmessage event handlers work bidirectionally.
Observed that UI remains responsive while background thread operates independently.

Limitations or Considerations

Worker file must be separate .ets file and contain globalThis.workerMain definition.
UI-related operations (e.g. AppStorage, UI rendering) are not accessible in Worker threads.
Worker threads require manual termination using terminate(); they do not auto-scale.
Data passed between threads must be serializable (no complex or cyclic structures).

DEV Community: HarmonyOS

How to play video format in wearable device

Context

Description

Solution / Approach

Key Takeaways

Written by Ataberk Celiktas

How to create barcode in wearable device

Context

Description

Solution / Approach

Key Takeaways

Written by Ataberk Celiktas

How to add blur effects in your wearable project

Context

Description

Solution / Approach

Key Takeaways

Written by Ataberk Celiktas

How to Integrate ndk with ArkUi (ContentSlot with NodeContent)

Context

Description

Approach / Solution

Key Takeaway

Written by Ataberk Celiktas

How solve 'undefined symbol error has occurred' error

Question

Short Answer

Applicable Scenarios

Written by Ataberk Celiktas

How can I obtain the signature and SHA1 values for my HarmonyOS app?

Question

Short Answer

Applicable Scenarios

Reference Link

Written by Arif Emre Ankara

Estimating Distance to BLE Beacons Using RSSI and TxPower in HarmonyOS

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Distance Estimation Utility

Test Results

Limitations or Considerations

Written by Arif Emre Ankara

Multi Target Product Build in HarmonyOS

Context

Description

Solution

1.Project-Level Configuration (build-profile.json5)

2. Module-Level Configuration (entry/build-profile.json5)

3. Use in ArkTS Code

Key Takeaways

Addional Resources

Written by Ahmet Furkan Sevim

How to implement compass functionality with efficient sensor handling

Context

Description

Solution

Key Takeaways

Additional Resources

Written by Ahmet Furkan Sevim

How to get user location

Context

Description

Solution

Key Takeaways

Additonal Resources

Written by Ahmet Furkan Sevim

How to get the position of the first visible and last visible ListItem

How to get the position of the first visible and last visible ListItem

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Limitations

Related Documents

Written by Ahmet Furkan Sevim

Using Worker for Multithreaded Concurrency in ArkTS

1.Project-Level Configuration (`build-profile.json5`)

2. Module-Level Configuration (`entry/build-profile.json5`)