DEV Community: HarmonyOS

How to implement single selection after customizing styles through ContentModifier in the Radio component?

HarmonyOS — Wed, 29 Jul 2026 02:27:00 +0000

Read the original article：How to implement single selection after customizing styles through ContentModifier in the Radio component?

How to implement radio buttons after applying custom styles to the Radio component via ContentModifier

Problem Description

When a radio button is assigned a custom style, it transforms into a checkbox and fails to function as a single-selection option.

Background Knowledge

ContentModifier interface: Provides the ability to customize the content area of a drawing component.

Radio: A single-selection radio button providing corresponding user interaction options. contentModifier: A method for customizing the content area on the Radio component. modifier: A content modifier. Developers must implement a custom class that implements the ContentModifier interface. When the value of modifier is undefined, no content modifier is applied.

Troubleshooting Process

After adding a ContentModifier to the Radio component, selecting a radio button only updates the checked state without refreshing the displayed style.

Analysis Conclusion

Currently, when a ContentModifier is applied to the Radio component, the specification dictates that all visual effects must be implemented by the application itself.

Solution

Building upon the ContentModifier, assign a value to the checked property of each Radio using an @State binding. Assign this value within the Radio's onChange event to trigger UI updates, thereby resolving the issue.

The code example is as follows:

class DiRadio implements ContentModifier<RadioConfiguration> {
  applyContent(): WrappedBuilder<[RadioConfiguration]> {
    return wrapBuilder(buildDiRadio)
  }
}

@Builder
function buildDiRadio(config: RadioConfiguration) {
  Column() {
    Image(config.checked ? $r('app.media.startIcon') : $r('app.media.background'))
      .width(24).height(24)
      .onClick(() => {
        if (config.checked) {
          config.triggerChange(false)
        } else {
          config.triggerChange(true)
        }
      })
  }
}

@Entry
@Component
struct Index {
  @State radio1Checked: boolean = true
  @State radio2Checked: boolean = false
  @State radio3Checked: boolean = false

  build() {
    Column() {
      Column() {
        Text('Radio1')
        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(this.radio1Checked)
          .contentModifier(new DiRadio())
          .onChange((isChecked: boolean) => {
            this.radio1Checked = isChecked
            console.info(`Radio1 status is ${isChecked}`)
          })
      }

      Column() {
        Text('Radio2')
        Radio({ value: 'Radio2', group: 'radioGroup' }).checked(this.radio2Checked)
          .contentModifier(new DiRadio())
          .onChange((isChecked: boolean) => {
            this.radio2Checked = isChecked
            console.info(`Radio2 status is ${isChecked}`)
          })
      }

      Column() {
        Text('Radio3')
        Radio({ value: 'Radio3', group: 'radioGroup' }).checked(this.radio3Checked)
          .contentModifier(new DiRadio())
          .onChange((isChecked: boolean) => {
            this.radio3Checked = isChecked
            console.info(`Radio3 status is ${isChecked}`)
          })
      }
    }
    .height('100%')
    .width('100%')
  }
}

Written by Fatih Turan Gundogdu

How to change the background color of the close button in the semi-modal pop-up window?

HarmonyOS — Wed, 29 Jul 2026 02:25:00 +0000

Read the original article：How to change the background color of the close button in the semi-modal pop-up window?

Problem Description

How can I modify the background color of the close button in a semi-modal popup? As shown in the image below:

Background Knowledge

A half-modal transition is implemented by binding a half-modal page to a component using bindSheet. The half-modal page is displayed or hidden based on the isShow property, and the options property is used to configure the related attributes.
The SymbolGlyph component is suitable for displaying standalone icons. Developers can set the font size and weight for the icons. Additionally, the SymbolGlyph component supports custom color rendering strategies, allowing developers to adjust the icon colors according to the application's theme or user preferences. The component also supports animation strategies, enabling the icons to display vivid animation effects when users interact with them.
For details about the icon names, see HarmonyOS Symbol Library.

Solution

The close button style of bindSheet is an inherent attribute. You can hide the close button by setting the showClose parameter in the optional options attribute of bindSheet to false, and then encapsulate a custom close button to display at the corresponding position in the dialog box to customize the close button style. The sample code is as follows:

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

  @Builder
  bindSheetExample() {
    Row() {
      Column() {
        Text('Title')
      }.alignItems(HorizontalAlign.Start)

      Column() {
        SymbolGlyph($r('sys.symbol.xmark'))
          .fontSize(18)
          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
          .fontColor([Color.White, Color.Green, Color.White])
      }
      .borderRadius('100%')
      .padding(5)
      .backgroundColor('#ff165cf3')
      .onClick(() => {
        this.isShow = false
      })
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .width(34)
      .height(34)
    }.width('100%')
    .padding({ top: 20, left: 20, right: 20 })
    .justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Column() {
      Button('open')
        .onClick(() => {
          this.isShow = true
        })
        .bindSheet($$this.isShow, this.bindSheetExample(), {
          height: 100,
          width: '100%',
          showClose: false,
          backgroundColor: Color.Black
        })

        .margin({top:180})
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
  }
}

Verification Result

Written by Fatih Turan Gundogdu

How to Apply for data-group-id for Shared Sandbox (IME Kit)

HarmonyOS — Wed, 29 Jul 2026 02:22:00 +0000

Read the original article：How to Apply for data-group-id for Shared Sandbox (IME Kit)

Context

Custom input methods (IMEs) that use the Shared Sandbox in HarmonyOS need a data-group-id to securely share data between components. Developers must request this identifier before shipping features that rely on shared storage.

Description

Issue: How do you apply for a data-group-id used by a custom input method’s Shared Sandbox?
Answer: Submit an application via email with specific subject/content and required screenshots. Approval is returned by email.

Solution / Approach

Send an email to: agconnect@huawei.com
Email subject format: [Input Method Application for In-App Data Sharing] <Your App Name> Application
Email body (include these fields):
- Application appid: <your appid>
- Application name: <your app name>
- Developer id: <your developer id>
Attach the following:
- Screenshot 1: Your input method app installed and visible in the system’s input method list (Settings).
- Screenshot 2: The InputMethodExtensionAbility configuration from your app’s module.json5.
Review & approval: You’ll receive the result via email after review.

Notes: Processing time may vary; ensure the screenshots clearly show the IME enabled and the exact bundle/module configuration to avoid back-and-forth. If your team uses multiple variants (beta/stable), specify each appid. After approval, store the data-group-id securely and keep it consistent across releases to maintain access to previously written shared data.

Key Takeaways

A data-group-id is required for Shared Sandbox usage in custom IMEs.
Apply by emailing agconnect@huawei.com with the subject format, appid/app name/developer id, and two screenshots.
Approval updates are returned by email.

Written by Fatih Turan Gundogdu

Cloud Debugging & Cloud Testing — Time Quotas (HarmonyOS)

HarmonyOS — Tue, 28 Jul 2026 02:20:00 +0000

Read the original article：Cloud Debugging & Cloud Testing — Time Quotas (HarmonyOS)

Context

When validating HarmonyOS app compatibility across real devices, teams rely on Cloud Debugging and Cloud Testing. If an account has no usage time quota, it’s important to know what (if anything) can still be used without immediate payment.

Description

Cloud Debugging lets you interact with real devices in the cloud to reproduce issues, cover more models, and reduce device procurement/management costs.
Cloud Testing provides one-stop automated testing on popular devices (compatibility, stability, performance, power, UX, security) and returns professional, detailed reports.

Solution / Approach

Cloud Debugging
- Some device models include a discounted usage time of up to 300 minutes per day.
- Other devices require payment to use.
- Single session limit: When using discounted time, each debugging session can last up to 10 minutes.
- As time runs low, you’ll get a prompt:
  - OK: Continue only if you have a paid package balance or account balance. Otherwise, purchase/recharge first.
  - Cancel: The device is released once the 10 minutes of discounted time is consumed; reapply to continue later.
Cloud Testing
- Similar policy: Some devices include 300 discounted minutes per day; other devices are pay-to-use.
- Provides targeted tests (compatibility, stability, performance, power, UX, security) with quick, detailed reports for pre-release quality assurance.
Common FAQs
- Q: Is there a time limit for a single cloud debugging test? A: Yes. With discounted time, a single session is capped at 10 minutes; continuing beyond that requires paid balance.
- Q: Can I test an app package that isn’t signed with a release certificate? A: No. Only packages signed with a release certificate and built in Release mode are supported (see custom testing prerequisites).
- Q: Why can’t the app be found after uploading a signed package? A: Check API level compatibility (e.g., app uses 5.0.1 but cloud device is 5.0.0). Align the app’s API with the cloud device’s API.
- Q: What are the charges for AGC services (cloud hosting/functions/databases/storage/auth)? A: See each service’s billing documentation for free quotas and overage pricing.

Key Takeaways

You can use certain devices without prepaid quota via discounted time (up to 300 min/day); sessions are max 10 minutes each.
To go beyond discounted limits or to use other devices, you’ll need paid package balance or account balance.
Release-signed packages are required for cloud testing, and API versions must match between your app and the cloud device.
AGC services (hosting, functions, DB, storage, auth) have service-specific billing pages detailing free tiers and charges.

Written by Fatih Turan Gundogdu

Bidirectional binding problem

HarmonyOS — Tue, 28 Jul 2026 02:07:00 +0000

Read the original article：Bidirectional binding problem

Context

HarmonyOS font-size setting uses a Slider (standard / large / extra-large) and an Elderly version that requires a confirmation dialog.
On Confirm, switch to Elderly; on Cancel, revert to the last confirmed font size.
UI uses two-way data binding between the Slider value and the backing variable.

Description

Bug: The first time the user selects Elderly and taps Cancel, the Slider correctly reverts. On a second attempt (select Elderly → Cancel), the Slider does not revert to the previous size.
Likely causes: after Cancel, setting v = lastV doesn’t propagate to the Slider value, or a binding/update cycle overwrites it.
Verify the Slider’s value immediately after the second Cancel and confirm that v → value propagation occurs.
Here is problematic code:

  @Entry
  @Component
  struct Index {
    @State v: number = 0;
    lastV: number = 0;

    build() {
      Column() {
        Slider({
          value: this.v,
          min: 0,
          max: 3,
          step: 1,
        })
          .width('100%')
          .showSteps(true)
          .stepSize(40)
          .onChange((value: number, mode: SliderChangeMode) => {
            if (mode === SliderChangeMode.End) {
              if (this.lastV === 3 && value < 3) {
                this.getUIContext().showAlertDialog({
                  title: 'Prompt',
                  message: 'Disable the senior version?',
                  primaryButton: {
                    value: 'Confirm',
                    action: () => {
                      this.lastV = value;
                    }
                  },
                  secondaryButton: {
                    value: 'Cancel',
  // If the user clicks cancel, it needs to revert to the previously set version.
                    action: () => {
                      this.v = this.lastV;
                    }
                  }
                })
              }
  // When a user previously set up a non-senior version and now wants to switch to the senior version, a pop-up prompt should appear asking whether to enable the senior version.
              else if (this.lastV < 3 && value === 3) {
                this.getUIContext().showAlertDialog({
                  title: 'Prompt',
                  message: 'Activate the Elderly Version?',
                  primaryButton: {
                    value: 'Confirm',
                    action: () => {
                      this.lastV = value;
                    }
                  },
                  secondaryButton: {
                    value: 'Cancel',
                    action: () => {
                      this.v = this.lastV;
                    }
                  }
                })
              } else {
                this.lastV = value;
              }
            }

          })
        Flex({ justifyContent: FlexAlign.SpaceBetween }) {
          Text('Standard').fontSize(20)
          Text('Large').fontSize(30)
          Text('Extra Large').fontSize(40)
          Text('Elder').fontSize(50)
        }.margin({ top: 10 })
      }
      .justifyContent(FlexAlign.Center)
      .height('100%')
      .width('100%')
    }
  }

Solution / Approach

Bind the Slider’s value with two-way binding to the state variable ($$this.v) so UI and state remain synchronized.
Keep a single source of truth: v = current selection; lastV = last confirmed selection.
Flow control:
- On attempt to enable Elderly: open the confirmation dialog without changing lastV.
- On Confirm: set v to Elderly, then update lastV = v.
- On Cancel: set v = lastV; two-way binding returns the Slider to the validated state on every cancel.
While the dialog is open, suppress Slider change handling to prevent UI→model race conditions.
Ensure discrete tiers via min/max/step so programmatic reverts always snap to valid values.

  Slider({
    value: $$this.v,
    min: 0,
    max: 3,
    step: 1,
  })

Key Takeaways

Two-way binding ($$this.v) eliminates desynchronization between Slider position and state.
Cancel operations revert to the last confirmed setting; behavior remains idempotent across repeated cancels.
A single source of truth prevents drift from direct UI property mutations.
Dialog gating avoids stale or competing updates during confirmation.
Properly constrained Slider steps ensure reliable, repeatable reversion.

Written by Fatih Turan Gundogdu

Are all the faces in userIAM 3D faces?

HarmonyOS — Tue, 28 Jul 2026 02:00:00 +0000

Read the original article：Are all the faces in userIAM 3D faces?

Problem Description

Currently, 3D facial recognition offers higher security than fingerprint authentication and is more resistant to attacks. Does the data returned via userIAM support facial recognition? Are all returned facial data 3D facial data? Which device models support 3D facial recognition versus standard facial recognition? How can we distinguish between them?

Background Knowledge

Authentication Trust Level (ATL): This is a core concept in the User Authentication Kit. It represents the security strength of an authentication method. The levels range from ATL1 (lowest) to ATL4 (highest). A higher ATL indicates a more secure and spoof-resistant method.
- ATL3: Represents standard 2D facial recognition or a 4-digit PIN password. It is susceptible to spoofing (e.g., using a photo or video).
- ATL4: Represents high-security authentication methods that are highly resistant to spoofing. includes 3D facial recognition (like structured light or TOF systems) and strong passwords (non-4-digit PINs).
3D vs. 2D Facial Recognition:
- 3D Facial Recognition: Uses specialized hardware (e.g., dot projectors, infrared cameras, TOF sensors) to create a depth map of the user's face. This makes it extremely difficult to bypass with a 2D photo or mask, hence its classification as ATL4.
- 2D Facial Recognition: Relies on a standard camera to capture a flat image of the face. It is more vulnerable to spoofing and is therefore classified as ATL3.
userAuth.getAvailableStatus Method: This is the primary API used to query the device's authentication capabilities. By specifying an authentication type (e.g., FACE) and a trust level (e.g., ATL4), developers can programmatically determine what level of security the device's hardware and software support.

Solution

User Authentication Kit: Provides the capability to authenticate user identities based on locally registered lock screen passwords, facial recognition, and fingerprint data on the device. It delivers system-level user authentication functionality and offers a unified system-level authentication control across multiple devices, integrating various authentication methods (facial recognition, fingerprint, password).

userAuth.getAvailableStatus: Used to query whether authentication capabilities of specified types and levels are supported. The authTrustLevel parameter determines the authentication trust level. Note: If the user's registered lock screen password is a 4-digit PIN, its authentication trust level is ATL3. When calling this interface to query whether ATL4-level password authentication is supported, it must return 12500010.

Developers can determine the AuthTrustLevel via userAuth.getAvailableStatus: If ATL returns level ATL4, the facial recognition corresponds to a 3D face. Currently, only the entire MATE 80 series and other MATE series Pro and higher models support 3D facial recognition (foldable screens and P series are not supported at this time)

import { userAuth } from '@kit.UserAuthenticationKit';

try {
  userAuth.getAvailableStatus(userAuth.UserAuthType.FACE, userAuth.AuthTrustLevel.ATL4);
  console.info('current auth trust level is supported');
} catch (error) {
  console.error(`current auth trust level is not supported, error = ${error}`);
}

Note: Iris and ultrasonic fingerprint authentication types are not currently supported.

Written by Fatih Turan Gundogdu

After compressing data using zip.deflate, how can I obtain the length of the encoded data?

HarmonyOS — Mon, 27 Jul 2026 01:48:00 +0000

Read the original article：After compressing data using zip.deflate, how can I obtain the length of the encoded data?

Question

After compressing data with zip.deflate and calling zStream.totalOut, the totalOut value of zStream remains unchanged at 0 even after encoding. How can I obtain the length of the encoded data?

import { zlib } from '@kit.BasicServicesKit';

async function getTotalOutOfzStream() {
  let str = 'hello world!';
  let arrayBufferIn = new ArrayBuffer(str.length);
  let byteArray = new Uint8Array(arrayBufferIn);
  for (let i = 0, j = str.length; i < j; i++) {
    byteArray[i] = str.charCodeAt(i)
  }
  let arrayBufferOut = new ArrayBuffer(100);
  let zStream: zlib.ZStream = {
    nextIn: arrayBufferIn,
    availableIn: arrayBufferIn.byteLength,
    nextOut: arrayBufferOut,
    availableOut: arrayBufferOut.byteLength,
    totalOut: 0
  };
  try {
    let zip = zlib.createZipSync();
    await zip.deflateInit(zStream, zlib.CompressLevel.COMPRESS_LEVEL_BEST_SPEED)
    await zip.deflate(zStream, zlib.CompressFlushMode.FINISH)

    // Use zStream to obtain totalOut
    let totalOut = zStream.totalOut
    console.info('The total out of zStream is ' + totalOut)
  } catch (e) {
    console.error(e)
  }
}

Short Answer

After each operation completes, you must call getZStream() again to obtain the latest status. For reference: Compression and Decompression.

 import { zlib } from '@kit.BasicServicesKit';

async function getTotalOutOfzStream() {
  let str = 'hello world!';
  let arrayBufferIn = new ArrayBuffer(str.length);
  let byteArray = new Uint8Array(arrayBufferIn);
  for (let i = 0, j = str.length; i < j; i++) {
    byteArray[i] = str.charCodeAt(i)
  }
  let arrayBufferOut = new ArrayBuffer(100);
  let zStream: zlib.ZStream = {
    nextIn: arrayBufferIn,
    availableIn: arrayBufferIn.byteLength,
    nextOut: arrayBufferOut,
    availableOut: arrayBufferOut.byteLength,
    totalOut: 0
  };
  try {
    let zip = zlib.createZipSync();
    await zip.deflateInit(zStream, zlib.CompressLevel.COMPRESS_LEVEL_BEST_SPEED)
    await zip.deflate(zStream, zlib.CompressFlushMode.FINISH)

    // Re-execute getZStream() to obtain the latest status, then get totalOut.
    let totalOut = (await zip.getZStream()).totalOut
    console.info('The total out of zStream is ' + totalOut)
  } catch (e) {
    console.error(e)
  }
}

Applicable Scenarios

Here are the applicable scenarios for obtaining the encoded data length using totalOut:

Data Transmission Optimization

When sending compressed data over networks, knowing the exact compressed size allows for proper buffer allocation and efficient bandwidth utilization
Useful for implementing progress tracking during file uploads/downloads of compressed data

Memory Management and Buffer Allocation

Determining the precise size of compressed data before writing to storage or transmission
Avoiding overallocation of buffers by using the actual compressed size rather than estimated maximums

Data Storage Efficiency

When storing compressed data in databases or filesystems, using totalOut ensures only the actual compressed bytes are stored
Calculating compression ratios for monitoring storage optimization effectiveness

Streaming Data Processing

In real-time data compression pipelines, tracking compressed output size for proper chunking and processing
Monitoring compression performance across different data types and sizes

Resource Monitoring and Logging

Logging compression statistics for performance analysis and debugging
Monitoring system resource usage by tracking input vs output data sizes

Written by Fatih Turan Gundogdu

App Update Failure Due to Different Signature (17700073)

HarmonyOS — Mon, 27 Jul 2026 01:47:00 +0000

Read the original article：App Update Failure Due to Different Signature (17700073)

Context

Updating a HarmonyOS app from the market can fail if an app with the same bundle name but a different signing certificate is already present (or its data remains). The system blocks the update to protect users.

Description

In the HarmonyOS system, the installation and updating of applications depend on the package name and signature information. If an application with the same package name but different signature information exists on the device, the system will refuse to install or update the new version of the application to prevent security risks.

Symptom: AppGallery/market update fails with
BusinessError 17700073: Failed to install the HAP because an application with the same bundle name but different signature information exists on the device.
Root cause: The installed app (or leftover data) was signed with a different certificate than the one used by the incoming update.

Solution / Approach

The issue is caused by the presence of an application with the same package name but different signature information on the device, or by an application with the same package name but different signature information that retained data upon uninstallation.

Typically, the following scenarios can lead to signature inconsistency:

The locally installed application was automatically signed through the IDE or command line, and the updated version was installed from the app market, leading to inconsistent signature information.
The locally installed application was installed through the app market, but the developer modified the signature information in the newly released version, causing inconsistent signature information when reinstalling from the app market.

Uninstall the application with the same package name on the device.

If there is an application with the same package name but inconsistent signature information on the device, and data was retained upon uninstallation, please reinstall the application first, and then choose not to retain data upon uninstallation.

Key Takeaways

Error 17700073 = same bundle name, different signature → installation blocked.
Uninstall without keeping data, and ensure no per-user remnants remain.
Standardize on one signing configuration per bundle across dev, test, and release.

Written by Fatih Turan Gundogdu

How to get the width of a web component

HarmonyOS — Mon, 27 Jul 2026 01:42:00 +0000

Read the original article：How to get the width of a web component

Context

Partners want to obtain the width of the front-end web page loaded by the Web component, and also need a method to obtain the width of the Web component. However, the official API only provides the getPageHeight() method to obtain the page height of the current web page, and does not provide an API to obtain the page width.

Description

To get the width of a web component, you can use componentUtils.getRectangleById to get the width of the component in the obtained component information. For reference: Get component information Currently, there is no API for getting the width of a web page. You can only use the front-end method to get it, and then pass it to the application side through jsBridge. For reference: The application side calls the front-end page function

Solution

To get the width of a Web component, you need to first identify the Web component with an id, then get the component information through componentUtils.getRectangleById, and then call size.width under the component information object to get the width. Because it needs to be aligned with the width obtained from the front-end web page, you need to use px2vp to convert pixels (px) to visual pixels (vp). There are many ways to write js on the front end to get the width of the front-end web page, such as:

<script>
    function getWidth(){
    return window.innerWidth;
    }
    getWidth();
</script>

After obtaining the width on the front end, you can call runJavaScript on the application side to obtain the js execution result.

For a complete example, please refer to the following demo:

import { webview } from '@kit.ArkWeb';
import { componentUtils } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  @State webResult: string = '';

  build() {
    Column() {
      // Get component width
      Button('Get Component Width')
        .onClick(() => {
          // Get the component info object, then access size.width from the object
          try {
            let obj: componentUtils.ComponentInfo = componentUtils.getRectangleById('1');
            console.log('width is:', px2vp(obj.size.width));
          } catch (error) {
            // TODO: Implement error handling.
          }
        })
        .margin({ top: 20, left: 10 })
        .fontSize(10)


      Web({ src: 'www.baidu.com', controller: this.controller })
        .onControllerAttached(() => {
          // Set custom user agent string
          this.controller.setCustomUserAgent(
            'Mozilla/5.0 (Linux; Android 9; VRD-AL10; HMSCore 6.3.0.331) AppleWebKit/537.36 ' +
              '(KHTML, like Gecko) Chrome/99.0.4844.88 HuaweiBrowser/12.0.4.1 Mobile Safari/537.36'
          );
        })
        .id('1')
        .onPageEnd(e => {
          // Execute JS in the web page to get its width
          this.controller.runJavaScript(
            'function getWidth(){\n' +
              '    return window.innerWidth;\n' +
              '}\n' +
              'getWidth();',
            // Get the JS execution result in the callback
            (error, result) => {
              if (error) {
                console.error(`run JavaScript error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
                return;
              }
              if (result) {
                this.webResult = result;
                console.info(`The width return value is: ${result}`);
              }
            });
        })
        .domStorageAccess(true)
        .javaScriptAccess(true)
        .fileAccess(true)
        .mixedMode(MixedMode.All)
        .width(200)
    }
  }
}

Common FAQ

Q: Why is the screen width obtained through the getWindowProperties system method inconsistent with the width obtained through window.innerWidth method in the H5 loaded by Web?

A: The width obtained through the getWindowProperties system method is the current window size, i.e., the screen resolution width, with units in px. The width obtained through the window.innerWidth method is the layout viewport height. If width=device-width is added to the viewport’s content in H5, it means the current H5 has adapted to the current device size, and the obtained width is the Web component’s width, with units in vp. If not added, browsers on devices will set their default viewport to 980px or 1024px (or other values, decided by the device itself), with units in px.

If you want to get the screen width in H5, you can use window.screen.width, with units in vp. Using vp2px and px2vp methods, px and vp can be converted to each other.

Constraints and Limitations

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 above for compilation and running.

Key Takeaways

Use getRectangleById with component id to get Web component’s width in px
Convert px to vp using px2vp for consistent units with front-end
Use front-end JavaScript (e.g., document.documentElement.scrollWidth) to get web page width
Pass front-end width to application using runJavaScript method
Understand difference between screen width, window width, and viewport width in web context

Reference Link

Written by Fatih Muti

How to Achieve Width and Height Adaptation of Text Component within a Set Range

HarmonyOS — Fri, 24 Jul 2026 01:47:00 +0000

Read the original article：How to Achieve Width and Height Adaptation of Text Component within a Set Range

Context

This article addresses the issue where Text components in Row layouts exceed their parent container’s boundaries when containing long text, and provides solutions for adaptive sizing within constraints.

Description

In a Row layout, when the left side contains a fixed-size component and the right side contains a Text component’s parent that should occupy the remaining space, excessive text in the Text component may exceed the parent’s designated area.

How to achieve width and height adaptation of the Text component within its parent’s set boundaries to prevent overflow?

The Row component is a horizontal layout container. When nested, outer Row properties may not affect inner child components as expected. For example, setting the constraintSize property on the outer Row can cause the inner Text component to exceed its set range.
The Text component can use the constraintSize property to set dimensional constraints, ensuring it varies freely within defined limits with higher priority than width and height.

Solution

Calculate the maximum width and height of the Text’s parent within the Row container, then use the constraintSize property to constrain the Text component’s maximum dimensions, achieving adaptive sizing within the set range. Implementation steps:

1.Apply constraintSize directly to the Text component to constrain its dimensions. Calculate the maximum size values where Text’s maximum width equals: parent maxWidth - left fixed component width (stableWidth) - parent’s left padding (margin.left) - parent’s right padding (margin.right). Perform calculations in the aboutToAppear lifecycle method:

  aboutToAppear(): void {
    try {
      let screenW = this.getUIContext().px2vp(display.getDefaultDisplaySync().width)
      // Get the screen width and convert it to vp.
      let stableW =
        this.getUIContext()
          .px2vp(this.uiContext?.getHostContext()?.resourceManager.getNumber($r('app.float.page_text_font_size').id));
      // Get the font size of the page and convert it to vp.
      let marginR = Number(this.removeCharater(this.marginRight as string))
      // Remove the numeric characters from the right margin and convert them to numbers.
      let marginL = this.marginLeft as number
      // Left margin directly converted to number
      let marginT = this.getUIContext()
        .px2vp(this.uiContext?.getHostContext()?.resourceManager.getNumber((this.marginTop as Resource).id))
      // Top margin directly converted to vp
      this.maxWidth = screenW - stableW - marginR - marginL - marginT // Calculate the maximum width
      console.info(`this.maxWidth: ${this.maxWidth}`) // Maximum Print Width
    } catch (error) {
    }
  }

2.Obtain the Text’s maximum dimensions in the Row and pass them to the constraintSize property to dynamically set the Text component’s size, preventing text overflow:

 Row() {
          Text(this.str)
            .constraintSize({ maxWidth: this.maxWidth })
            .fontColor(Color.Black)
        }
        .margin({ left: 10, right: 10 })

Complete code example:

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

@Entry
@Component
struct Index {
  @State str: string = '123'
  uiContext = this.getUIContext();
  @State maxWidth: number = 0
  marginRight: Length = '16vp'
  marginLeft: Length = 16
  marginTop: Length = $r('app.float.page_text_font_size')

  removeCharater(str: string) {
    let result = str.replace(/[a-zA-Z]/g, '');
    return result
  }

  aboutToAppear(): void {
    try {
      let screenW = this.getUIContext().px2vp(display.getDefaultDisplaySync().width)
      // Get the screen width and convert it to vp.
      let stableW =
        this.getUIContext()
          .px2vp(this.uiContext?.getHostContext()?.resourceManager.getNumber($r('app.float.page_text_font_size').id));
      // Get the font size of the page and convert it to vp.
      let marginR = Number(this.removeCharater(this.marginRight as string))
      // Remove the numeric characters from the right margin and convert them to numbers.
      let marginL = this.marginLeft as number
      // Left margin directly converted to number
      let marginT = this.getUIContext()
        .px2vp(this.uiContext?.getHostContext()?.resourceManager.getNumber((this.marginTop as Resource).id))
      // Top margin directly converted to vp
      this.maxWidth = screenW - stableW - marginR - marginL - marginT // Calculate the maximum width
      console.info(`this.maxWidth: ${this.maxWidth}`) // Maximum Print Width
    } catch (error) {
    }
  }

  build() {
    Column() {
      TextInput({ text: $$this.str })
      Row() {
        Row() {
          Row().width(50).height(50).backgroundColor('#ff18a2d0')
        }

        Row() {
          Text(this.str)
            .constraintSize({ maxWidth: this.maxWidth })
            .fontColor(Color.Black)
        }
        .margin({ left: 10, right: 10 })
      }
      .backgroundColor('#fff2f5f5')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffeeeaea')
    .justifyContent(FlexAlign.Center)
  }
}

Q: In the aboutToAppear method of the solution, when using getNumber to retrieve data, are the units always in px?

A: Data retrieved via getNumber is always in px. For example, Integer values are raw numbers, while float values without units are raw numbers, and those with “vp” or “fp” units correspond to px values. Refer to the official Resource Management documentation.

Constraints and Limitations

Supported API Version: 19 Release and above
Supported SDK: HarmonyOS 5.1.1 Release and above
Requires DevEco Studio 5.1.1 Release or newer for compilation

Key Takeaways

Use constraintSize on Text components to prevent overflow in Row layouts
Calculate dynamic max dimensions based on parent/container measurements
Perform sizing calculations in aboutToAppear lifecycle for accurate results
Consider unit conversions (px/vp/fp) when retrieving layout data

Reference Link

Written by Fatih Muti

What Can I Do If PersistentStorage Cannot Obtain Persistent Data?

HarmonyOS — Fri, 24 Jul 2026 01:42:00 +0000

Read the original article：What Can I Do If PersistentStorage Cannot Obtain Persistent Data?

What Can I Do If PersistentStorage Cannot Obtain Persistent Data?

Problem Description

When using PersistentStorage to operate on UI state variables, these variables are not correctly persisted. Each time the application is launched, the values are reinitialized. In the following example code, there are three UI state variables in the sample application, managed by LocalStorage, AppStorage, and PersistentStorage respectively. Among them, totalClickCount is managed by PersistentStorage and should be stored persistently. When the application is launched each time, the page should display the persisted data. However, in this example, the data cannot be retrieved properly and is always initialized to 0 upon each launch of the application.

Example code is as follows:

src/main/ets/const/StorageKeyConst.ets.

  export namespace StorageKeyConst {
    // Application-level UI state storage
    export const APP_PROP_KEY: string = 'APP_PROP';

    // Page-level UI state storage
    export const LOCAL_PROP_KEY: string = 'LOCAL_PROP';

    // Persistent UI state storage
    export const PERSIST_PROP_KEY: string = 'PERSIST_PROP';
  }

src/main/ets/entryability/EntryAbility.ets.

   export default class EntryAbility extends UIAbility {
   onWindowStageCreate(windowStage: window.WindowStage): void {
      // Initialize application-level storage
      AppStorage.setOrCreate(StorageKeyConst.APP_PROP_KEY, 0);
      // Initialize application persistent storage
      PersistentStorage.persistProp(StorageKeyConst.PERSIST_PROP_KEY, 0);
      windowStage.loadContent('pages/Index', (err) => {
        if (err.code) {
          // Handling Exceptions
          return;
        }
      });
    }
  }

src/main/ets/pages/Index.ets.

  import { StorageKeyConst } from '../const/StorageKeyConst';
  import { Router } from '@kit.ArkUI';

  let storage: LocalStorage = new LocalStorage();

  @Entry(storage)
  @Component
  struct Index {
    // Page No
    @State pageNo: string = '';
    // Page-level UI status storage (only saved on the current page)
    @LocalStorageLink(StorageKeyConst.LOCAL_PROP_KEY)
    pageClickCount: number = 0;
    // Application-level UI state storage (Saved in the app memory and released after the app exits)
    @StorageLink(StorageKeyConst.APP_PROP_KEY)
    startupClickCount: number = 0;
    // Persistent UI status storage (persistent storage, data retention after an app exits)
    @StorageLink(StorageKeyConst.PERSIST_PROP_KEY)
    totalClickCount: number = 0;
    router: Router = this.getUIContext().getRouter()

    aboutToAppear(): void {
      // Current Page No
      this.pageNo = this.router.getLength()
    }

    build() {
      RelativeContainer() {
        Column() {
          Text(`Current Page No：${this.pageNo}`)
            .margin(20)
          Text(`Number of clicks on the current page：${this.pageClickCount}`)
            .margin(10)
          Text(`Number of clicks in this startup：${this.startupClickCount}`)
            .margin(10)
          Text(`Total Hits：${this.totalClickCount}`)
            .margin(10)
          Button('Click!')
            .margin(10)
            .onClick(() => {
              // Click Count
              this.pageClickCount++
              this.startupClickCount++
              this.totalClickCount++
            })
          Button('New Page')
            .margin(10)
            .onClick(() => {
              this.router.pushUrl({ url: 'pages/Index' })
            })
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
      }
    }
  }

Background Knowledge

LocalStorage: LocalStorage is a page-level UI state storage. Parameters received through the @Entry decorator can share the same LocalStorage instance within a page. LocalStorage supports state sharing among multiple pages within a UIAbility instance.
AppStorage: AppStorage is a global UI state storage for an application. It is bound to the application's process and is created by the UI framework when the application starts, providing a central storage for the application's UI state properties.
PersistentStorage: PersistentStorage is an optional singleton object in an application. This object is used to persistently store selected AppStorage properties to ensure that these properties retain their values after the application is restarted, just as they were when the application was closed. PersistentStorage is associated with a UI instance. Persistence operations can only be performed after the UI instance has been successfully initialized (i.e., when the callback passed to loadContent is called). Since the code in question calls PersistentStorage before this point, it leads to a failure in persistence. Refer to PersistentStorage: Persistently Storing UI State - Limitations.

Solution

There are two scenarios here. For debugging on a real device, you only need to modify the onWindowStageCreate function. However, since some APIs are not supported in the emulator, initializing PersistentStorage in onWindowStageCreate will fail. Therefore, you need to move the initialization code to the home page (Index.ets).

1.For the real device debugging scenario, modify the onWindowStageCreate function in src/main/ets/entryability/EntryAbility.ets:

    export default class EntryAbility extends UIAbility {
    onWindowStageCreate(windowStage: window.WindowStage): void {
       // Initialize application-level storage
       AppStorage.setOrCreate(StorageKeyConst.APP_PROP_KEY, 0);
       // Initialize application persistent storage
       PersistentStorage.persistProp(StorageKeyConst.PERSIST_PROP_KEY, 0);
       windowStage.loadContent('pages/Index', (err) => {
         if (err.code) {
           // Handling Exceptions
           return;
         }
       });
     }
   }

2.In the simulator debugging scenario, move the initialization function stored in the onWindowStageCreate function of src/main/ets/entryability/EntryAbility.ets to the beginning of the file src/main/ets/pages/Index.ets.

   import { StorageKeyConst } from '../const/StorageKeyConst';
   import { Router } from '@kit.ArkUI';

   let storage: LocalStorage = new LocalStorage();

   @Entry(storage)
   @Component
   struct Index {
     // Page No
     @State pageNo: string = '';
     // Page-level UI status storage (only saved on the current page)
     @LocalStorageLink(StorageKeyConst.LOCAL_PROP_KEY)
     pageClickCount: number = 0;
     // Application-level UI state storage (Saved in the app memory and released after the app exits)
     @StorageLink(StorageKeyConst.APP_PROP_KEY)
     startupClickCount: number = 0;
     // Persistent UI status storage (persistent storage, data retention after an app exits)
     @StorageLink(StorageKeyConst.PERSIST_PROP_KEY)
     totalClickCount: number = 0;
     router: Router = this.getUIContext().getRouter()

     aboutToAppear(): void {
       // Current Page No
       this.pageNo = this.router.getLength()
     }

     build() {
       RelativeContainer() {
         Column() {
           Text(`Current Page No：${this.pageNo}`)
             .margin(20)
           Text(`Number of clicks on the current page：${this.pageClickCount}`)
             .margin(10)
           Text(`Number of clicks in this startup：${this.startupClickCount}`)
             .margin(10)
           Text(`Total Hits：${this.totalClickCount}`)
             .margin(10)
           Button('Click!')
             .margin(10)
             .onClick(() => {
               // Click Count
               this.pageClickCount++
               this.startupClickCount++
               this.totalClickCount++
             })
           Button('New Page')
             .margin(10)
             .onClick(() => {
               this.router.pushUrl({ url: 'pages/Index' })
             })
         }
         .width('100%')
         .height('100%')
         .justifyContent(FlexAlign.Center)
       }
     }
   }

Verification Result

This example supports API Version 20 Release and later versions.
This example supports HarmonyOS 6.0.0 Release SDK and later versions.
This example needs to be compiled and run using DevEco Studio 6.0.0 Release or later.

Written by Emrecan Karakas

Scroll Offset Retrieval Method

HarmonyOS — Fri, 24 Jul 2026 01:39:00 +0000

Read the original article：Scroll Offset Retrieval Method

Scroll Offset Retrieval Method

Problem Description

During the scrolling process inside a Scroll container, when the ScrollDirection property is changed, the components inside the container return to their initial positions. How can we record the scrolling position of the internal components so that they do not return to their initial positions when the ScrollDirection property changes?

Background Knowledge

In the Scroll component of HarmonyOS, changing the scroll direction (ScrollDirection) usually causes the positions of the internal components within the container to be reset. This is because a change in scroll direction requires recalculating the layout and positions of the internal components.

Solution

If you want to prevent the internal components' positions from being reset when changing the scroll direction, you can achieve this by following these steps:

Use a listener to record positions: You can record the position of each child component during the scroll event of the Scroll component. For example, you can execute scroller.currentOffset() in the onWillScroll or onDidScroll event to listen to the displacement in real-time, and manually set the scroll offset when the scroll direction changes. When the scroll direction changes, restore the scroll position based on the stored position state. This way, when the scroll direction is changed, you can use the recorded position information to move the child components back to their previous positions.
Customize scroll behavior: Override the default scroll behavior of the Scroll component to customize how the component handles changes in scroll direction.
Use state management: Utilize HarmonyOS's state management mechanism to manage the internal state of the Scroll component, including the scroll position and other related states. When the scroll direction changes, update these states through state management instead of resetting them.

Example code is as follows:

@Entry
@Component
struct TabsExample {
  @State fontColor: string = '# 182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  @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]
      }
    }
  }
  private controller: TabsController = new TabsController()
  private scroller: Scroller = new Scroller()
  private scroller1: Scroller = new Scroller()

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

  build() {
    Column() {
      Row(){
        Button('tabs stop scrolling and store position')
          .width(50).height(30)
          .onClick(() => {
            AppStorage.setOrCreate('this.currentIndex',
              this.currentIndex); // Record the index in the tabs to be switched. Here, index === 1 is used as an example to record the scrolling offset. This.currentIndex can be set to 1.
            AppStorage.setOrCreate('this.curScrollOffset1',
              this.curScrollOffset1); // Use index === 1 as an example to record the scrolling offset.
          })
        Button('Click to scroll to previous position')
          .width(50).height(30)
          .onClick(() => {
            this.currentIndex =
              Number(AppStorage.get('this.currentIndex')) // Obtain the index in the tabs where the record is switched.
            this.curScrollOffset1 =
              Number(AppStorage.get('this.curScrollOffset1')) // Obtain the scrolling offset recorded using index === 1 as an example.
            this.scroller.scrollTo({
              xOffset: 0,
              yOffset: this.curScrollOffset1,
              animation: {
                duration: 100,
                curve: Curve.Ease
              }
            }) // Change yOffset because you can only move up or down.
          })
      }
      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(8)
                      .backgroundColor('#ffeca636')
                      .width('100%')
                      .height('100%')
                      .textAlign(TextAlign.Center)
                  }
                }, (day: string) => day)
              }, (day: string) => day)
            }
            .columnsTemplate('1fr 1fr 1fr 1fr')
            .rowsTemplate('1fr 1fr 1fr 1fr')
            .columnsGap(5)
            .rowsGap(5)
            .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(8)
                      .backgroundColor('#ffa4b4d7')
                      .width('100%')
                      .height('100%')
                      .textAlign(TextAlign.Center)
                  }
                }, (day: string) => day)
              }, (day: string) => day)
            }
            .columnsTemplate('1fr 1fr 1fr 1fr')
            .rowsTemplate('1fr 1fr 1fr 1fr')
            .columnsGap(5)
            .rowsGap(5)
            .width('100%')
            .height('150%')
          }
          .backgroundColor('#00ef2323')
          .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
            this.curScrollOffset1 += yOffset // Slides up or down, only yOffset needs to be recorded.
            console.info('this.curScrollOffset1' + '' + this.curScrollOffset1)
          })
        }
        .tabBar(this.tabBuilder(1, 'blue'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(180)
      .barHeight(28)
      .animationDuration(400)
      .onChange((index: number) => {
        if (index === 0) {
          this.scroller.scrollTo({
            xOffset: 0,
            yOffset: 0,
            animation: {
              duration: 100,
              curve: Curve.Ease
            }
          }) // Data scrolls to the top during index switching.
        } else {
          this.scroller1.scrollTo({
            xOffset: 0,
            yOffset: 0,
            animation: {
              duration: 100,
              curve: Curve.Ease
            }
          })
        }
        this.currentIndex = index
      })
    }
  }
}

If you want to verify whether the offset is correct, you can remove this code segment and record the offset.

this.scroller1.scrollTo({ xOffset: 0, yOffset: 0, animation: { duration: 100, curve: Curve.Ease } });