DEV Community: HarmonyOS

How to Create an Interactive Trivia Wheel on Wearables with mpchart?

HarmonyOS — Thu, 18 Jun 2026 03:40:00 +0000

Read the original article：How to Create an Interactive Trivia Wheel on Wearables with mpchart?

How to Create an Interactive Trivia Wheel on Wearables with mpchart?

Requirement Description

This article describes how to implement an interactive, spinning trivia wheel application on a wearable device. The application, built with ArkUI, utilizes the @ohos/mpchart library to display a pie chart. When a user taps a button, the chart spins and randomly selects a trivia category, which is then displayed on the screen.

Background Knowledge

Wearable devices present unique challenges due to their limited screen size and processing power. Effectively visualizing data and creating engaging user experiences within these constraints is crucial. The @ohos/mpchart library, a port of the popular openharmony library, is an excellent choice for this purpose. It offers a wide range of chart types and customization options, while also being optimized for performance. ArkUI's declarative nature simplifies the UI development process, allowing for the creation of fluid and responsive interfaces.

Implementation Steps

Project Setup: Ensure the @ohos/mpchart dependency is added to your project's oh-package.json5 file.
Chart Initialization: In the aboutToAppear lifecycle hook, an instance of PieChartModel is created. Key properties are configured to disable the description, legend, hole, and user touch interactions, creating a clean, focused visual.
Data Population: The setData method populates the pie chart with data. It creates PieEntry objects for each trivia category, adds them to a PieDataSet, and assigns custom colors to each slice.
Spin Animation Logic: The startGun method handles the spinning animation. It uses the animator module to create a rotation animation with a defined duration and easing curve. This creates a realistic "spin-down" effect.
Result Calculation: Once the animation is complete (onfinish), the final rotation angle is used to determine which pie slice the pointer is aligned with. The currentIndex is calculated to correspond to the selected category from the parties array.
UI Interaction: A button is placed at the center of the pie chart. Tapping this button triggers the startGun method, initiating the spin. The selected topic's name is then displayed, providing instant feedback to the user.

Code Snippet / Configuration

import {
  JArrayList,
  MPPointF,
  PieChart,
  PieChartModel,
  PieData,
  PieDataSet,
  PieEntry
} from '@ohos/mpchart';
import animator, { AnimatorOptions, AnimatorResult } from '@ohos.animator';

@Entry
@Component
export default struct Index {

  model: PieChartModel = new PieChartModel();
  private animatorResult: AnimatorResult | null = null
  @State chooseText: string = 'Spin';
  @State onePartAngle: number = 0;
  @State count: number = 6;
  @State currentIndex: number = 0;
  parties: string[] = ['History', 'Science', 'Art', 'Sports', 'Cinema', 'Music'];
  @State isSpinning:boolean = true;
  @State topic:string = ''
  @State selectedTopic:string = ''

  aboutToAppear(): void {
    this.init();
  }

  build() {
    NavDestination(){
      Column() {
        Stack(){
          Stack() {
            PieChart({ model: this.model })
              .width('99%')
              .aspectRatio(1)
            Text('▼')
              .fontSize(26)
              .fontWeight(FontWeight.Bolder)
              .alignSelf(ItemAlign.Start)
              .height('100%')
              .textAlign(TextAlign.Start)
              .align(Alignment.Top)
              .margin({ top: -15 })


            Button(){
              Text(this.chooseText).fontWeight(FontWeight.Bold)
            }
            .onClick(() => {
              this.startGun();
            })
            .alignSelf(ItemAlign.Center)
            .fontColor(Color.White)
            .fontWeight(FontWeight.Bold)
            .width(75)
            .height(75)
            .borderRadius(200)
            .backgroundColor('#2071ff')
            .align(Alignment.Center)
            .shadow({
              offsetX: 1,
              offsetY: 1,
              color: Color.Black,
              radius: 10
            })


          }.height('100%')

        }.align(Alignment.Bottom)

      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Black)
    }
    .hideTitleBar(true);

  }

  init() {
    this.model.getDescription()?.setEnabled(false);
    this.model.setDrawHoleEnabled(false);
    this.model.getLegend()?.setEnabled(false);
    this.model.disableScroll();
    this.model.setRotationEnabled(true);
    this.model.setHighlightPerTapEnabled(true);
    this.model.setEntryLabelTextSize(14)
    this.model.setEntryLabelColor(Color.White)
    this.model.setTouchEnabled(false);
    this.setData(5);
  }

  private async setData(range: number): Promise<void> {
    let entries: JArrayList<PieEntry> = new JArrayList<PieEntry>();
    for (let i = 0; i < this.count; i++) {
      entries.add(new PieEntry(range,
        this.parties[i % this.parties.length]));
    }

    let dataSet: PieDataSet = new PieDataSet(entries, "Election Results");
    dataSet.setSliceSpace(1);
    dataSet.setIconsOffset(new MPPointF(0, 40));
    dataSet.setSelectionShift(0);
    dataSet.setValueTextColor(Color.White);
    dataSet.setDrawValues(false);

    const customColors: number[] = [
      0x9066bd,
      0xB572CA,
      0xee66bb,
      0xf4777c,
      0xF7AC7C,
      0xFAC166
    ];

    let colors: JArrayList<number> = new JArrayList();
    for (let color of customColors) {
      colors.add(color);
    }

    dataSet.setColorsByList(colors);
    let data: PieData = new PieData(dataSet);
    this.onePartAngle = 360 / this.count;
    this.model.setRotationAngle(-90 - this.onePartAngle / 2);
    this.model.setData(data);
  }

  startGun() {
    this.isSpinning = true
    let currentAngle = this.model.getRotationAngle();
    let randomRotation = Math.floor(Math.random() * 360);
    let end = 7200 + currentAngle + randomRotation;

    let options: AnimatorOptions = {
      duration: 11000,
      easing: "ease",
      delay: 0,
      fill: "forwards",
      direction: "normal",
      begin: currentAngle,
      end: end,
      iterations: 1
    };

    this.animatorResult = animator.create(options);
    this.animatorResult.onframe = (value) => {
      this.model.setRotationAngle(value);
      this.model.invalidate();
    };

    this.animatorResult.onfinish = () => {
      let finalRotation = end % 360;
      let adjustedAngle = finalRotation + 90;
      if (adjustedAngle > 360) {
        adjustedAngle -= 360;
      }
      let index = Math.floor(adjustedAngle / this.onePartAngle);
      this.currentIndex = (this.count - 1) - index;
      this.chooseText = this.parties[this.currentIndex];
      this.isSpinning = false
    };
    this.animatorResult.play();
  }
}

Test Results

The application was successfully tested on a standard HarmonyOS wearable emulator and a real device. The pie chart renders correctly and fills the screen. Tapping the central button triggers a smooth, decelerating spin animation. The selected topic is accurately identified and displayed after the spin ends, confirming the animation and calculation logic work as expected.

Limitations or Considerations

Not applicable to apps targeting API Level < 9.

Written by Muhammet Ali Ilgaz

How to parse the p12 certificate?

HarmonyOS — Thu, 18 Jun 2026 03:36:00 +0000

Read the original article：How to parse the p12 certificate?

Problem Description

How to parse the p12 certificate?

Background Knowledge

The composition of multi-level certificates:
- Root certificate: The root certificate is the most authoritative and confidential certificate in the certificate chain. It is usually stored offline to ensure its security. The root certificate is used to sign one or more intermediate certificates.
- Intermediate certificates: Intermediate certificates are signed by the root certificate and can further sign other intermediate certificates or end-user certificates. The existence of intermediate certificates increases the flexibility and security of
- certificate management. If the intermediate certificate is accidentally lost or leaked, a new intermediate certificate can be reissued without affecting the security of the root certificate or other certificates.
- End-user certificate: The end-user certificate is the last link in the certificate chain and is used to verify the identity of the end user. It is usually signed by an intermediate certificate and contains the user's public key information and other relevant information.
cert.createTrustAnchorsWithKeyStore reads the CA certificate from the P12 file to construct an array of TrustAnchor objects.

  createTrustAnchorsWithKeyStore(keystore: <span>Uint8Array</span>, pwd: string): Promise<<span>Array</span><X509TrustAnchor>>

cert.parsePkcs12 means parsing the certificate, private key and other certificate collections from the P12 file and returning the result.

  parsePkcs12(data: <span>Uint8Array</span>, config: Pkcs12ParsingConfig): Pkcs12Data

Troubleshooting Process

Check Available APIs: Review HarmonyOS’s security and crypto modules to confirm lack of native PKCS#12 support.
Evaluate Third-Party Libraries: Consider using well-established cryptographic libraries which is widely used for PKCS#12 operations.
Manage Security and Performance: Test the parsing process for correctness, error handling (e.g., wrong password), and resource usage.

Solution

createTrustAnchorsWithKeyStore parses multi-level certificates:

  let filePath =  getContext().filesDir+"/client_have_ca_123456.p12";
  let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE);

  fs.stat(filePath).then((stat: fs.Stat) => {
    let buf = new ArrayBuffer(stat.size);
    fs.readSync(file.fd, buf);
    fs.closeSync(file);
    console.info("get file info succeed, the size of file is " + stat.size);

    try {
      cert.createTrustAnchorsWithKeyStore(new Uint8Array(buf),'123456').then((data) => {
        console.log(`createTrustAnchorsWithKeyStore sucess, number of the result is: ${data.length}`);
      }).catch((err : BusinessError) => {
        console.error(`createTrustAnchorsWithKeyStore failed:${err}`);
      })
    } catch (error) {
      console.error(`createTrustAnchorsWithKeyStore failed:${err}`);
    }

  }).catch((err: BusinessError) => {
    console.error("get file info failed with error message: " + err.message + ", error code: " + err.code);
  });

parsePkcs12 parses a single certificate:

  let filePath =  getContext().filesDir+"/client_have_ca_123456.p12";
  let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE);

  fs.stat(filePath).then((stat: fs.Stat) => {
    let buf = new ArrayBuffer(stat.size);
    fs.readSync(file.fd, buf);
    fs.closeSync(file);
    console.info("get file info succeed, the size of file is " + stat.size);

    let conf: cert.Pkcs12ParsingConfig = {
      password: "123456",
      needsCert: false,
      needsPrivateKey: true,
      privateKeyFormat: cert.EncodingBaseFormat.DER,
      needsOtherCerts: false,
    };
    let p12: cert.Pkcs12Data = cert.parsePkcs12(new Uint8Array(buf), conf);
    console.info("parsePKCS12 succeed.");
    if (p12.privateKey) {
      console.info("privateKey:" + p12.privateKey.toString())
    }

  }).catch((err: BusinessError) => {
    console.error("get file info failed with error message: " + err.message + ", error code: " + err.code);
  });

Written by Mucahid Kincir

The scroll bar component ScrollBar jumps when sliding

HarmonyOS — Thu, 18 Jun 2026 03:32:00 +0000

Read the original article：The scroll bar component ScrollBar jumps when sliding

Problem Description

The ScrollBar works with the List component, and lazy loading is used to load the subcomponent ListItem on demand. However, when sliding the ScrollBar, if the ListItem continues to load, the sliding distance of the ScrollBar component will change suddenly.

Background Knowledge

LazyForEach is an interface that iteratively renders array-type data and creates corresponding components during each iteration. Its data source needs to implement IDataSource to manage listeners and notify LazyForEach of data updates.
childrenMainSize : Sets the size information of the child components of the List component in the main axis direction.
ListItemGroup : This component is used to display list item groups. Its width fills the List component by default and must be used with the List component.
ScrollBar : Scroll bar component, used with scrollable components such as ArcList , List , Grid , Scroll , and WaterFlow.

Troubleshooting Process

Check whether LazyForEach is used for lazy traversal: In lazy traversal scenarios, when the heights of ListItemGroup contents vary, the ScrollBar component needs to obtain the height of the ListItemGroup.

Analysis Conclusion

When the heights of the ListItemGroup contents vary during group traversal, LazyForEach cannot determine the height of the child components.

Solution

Use the childrenMainSize API to set the height of the ListItemGroup contents in advance.

Before the page loads, use the splice method provided by the ChildrenMainSize object to batch add, delete, and modify the size information of child components in the main axis direction.

aboutToAppear(): void {
  let childrenSize: Array<number> = []
  LIST_DATA.forEach((data: GroupItemSource) => {
    childrenSize.push(Math.ceil(data.dataArray.length / 4) * this.listItemHeight + this.groupHeaderHeight)
  })
  this.childrenSize.splice(0, 3, childrenSize)
  this.groups.pushInitData(LIST_DATA)
}

Written by Mucahid Kincir

Row component horizontal scrolling abnormality

HarmonyOS — Wed, 17 Jun 2026 03:26:00 +0000

Read the original article：Row component horizontal scrolling abnormality

Problem Description

When using the Scroll component to nest the Row component, the horizontal scrolling function does not take effect.
The problem code is as follows:

@Entry
@Component
struct CheckDemo {
  scrollerForRow: Scroller = new Scroller()
  @State list: string[] = ['1', '1', '1', '1', '1', '1', '1', '1', '1', '1']

  build() {
    Scroll(this.scrollerForRow) {
      Row({ space: 10 }) {
        ForEach(this.list, () => {
          Image($r('app.media.startIcon'))
            .width(80)
            .height(80)
            .borderRadius(5)
        })
      }
      .width('90%')
      .justifyContent(FlexAlign.Start)
      .padding({
        left: 10,
        right: 10
      })
    }
    .scrollable(ScrollDirection.Horizontal)
  }
}

Background Knowledge

Scroll: A scrollable container component. When the layout size of the child component exceeds the size of the parent component, the content can scroll.

Solution

Setting a solid width for the Row component will cause horizontal scrolling to fail. You can choose to remove the width setting or put the width setting on the Scroll component to solve the horizontal scrolling problem.

Solution 1: Remove the width. The code is as follows:

@Entry
@Component
struct CheckDemo {
  scrollerForRow: Scroller = new Scroller()
  @State list: string[] = ['1', '1', '1', '1', '1', '1', '1', '1', '1', '1']

  build() {
    Scroll(this.scrollerForRow) {
      Row({ space: 10 }) {
        ForEach(this.list, () => {
          Image($r('app.media.startIcon'))
            .width(80)
            .height(80)
            .borderRadius(5)
        })
      }
      .justifyContent(FlexAlign.Start)
      .padding({
        left: 10,
        right: 10
      })
    }
    .scrollable(ScrollDirection.Horizontal)
  }
}

The effect is as follows:

Solution 2: Set the width on the Scroll component. The code is as follows:

@Entry
@Component
struct CheckDemo {
  scrollerForRow: Scroller = new Scroller()
  @State list: string[] = ['1', '1', '1', '1', '1', '1', '1', '1', '1', '1']

  build() {
    Scroll(this.scrollerForRow) {
      Row({ space: 10 }) {
        ForEach(this.list, () => {
          Image($r('app.media.startIcon'))
            .width(80)
            .height(80)
            .borderRadius(5)
        })
      }
      .justifyContent(FlexAlign.Start)
      .padding({
        left: 10,
        right: 10
      })
    }
    .width('90%')
    .scrollable(ScrollDirection.Horizontal) 
  }
}

Written by Mucahid Kincir

Progress sliding rating dynamic effect implementation

HarmonyOS — Wed, 17 Jun 2026 03:24:00 +0000

Read the original article：Progress sliding rating dynamic effect implementation

Problem Description

How to customize the pattern to achieve the dynamic effect of sliding rating?

Background Knowledge

ContentModifier supports customizing the content area of a specific component through the style builder.
The Progress bar component is used to display the progress of content loading or operation processing.
PanGesture sliding gesture event, which is triggered when the minimum sliding distance reaches the set minimum value.

Solution

1.Customize the scoring style.

   class MyProgressModifier implements ContentModifier<ProgressConfiguration> {
    // todo: Detailed attribute definition

     applyContent(): WrappedBuilder<[ProgressConfiguration]> {
       return wrapBuilder(myProgress);
     }
   }

2.Draw the left and right scoring paths respectively as the filling standard for the 0.5 score.

   // todo：Path component for drawing pentagram tracks
   @Builder 
   function leftStar(config: ProgressConfiguration, value: number) {

   }

   @Builder
   function rightStar(config: ProgressConfiguration, value: number) {

   }

3.Handle related attribute changes when the gesture slides and render the page.

   Progress({ value: this.currentValue, total: 10 })
     .contentModifier(this.modifier)
     .gesture(
     PanGesture()
       // todo：Progress processing when gesture sliding
       .onActionStart((event: GestureEvent) => {
       })
       .onActionUpdate((event: GestureEvent) => {
       })
     )
     .margin(30)

The effect diagram is as follows:

Complete code:

class MyProgressModifier implements ContentModifier<ProgressConfiguration> {
  color: Color = Color.White;
  outerRadius: number = 300;
  innerRadius: number;
  idList: Array<string> = ['1', '3', '5', '7', '9'];

  constructor(color: Color, outerRadius: number) {
    this.color = color;
    this.outerRadius = outerRadius;
    this.innerRadius = outerRadius * sin(18) / cos(36);
  }

  paintingPath(startX: number, startY: number, isHalf: boolean = false, isLeft: boolean = true) {
    let point1: string = `${startX} ${startY}`;
    let point3: string = `${startX - this.outerRadius * cos(18)} ${startY - (sin(18) - 1) * this.outerRadius}`;
    let point5: string = `${startX - this.outerRadius * cos(54)} ${startY - (-sin(54) - 1) * this.outerRadius}`;
    let point7: string = `${startX + this.outerRadius * cos(54)} ${startY - (-sin(54) - 1) * this.outerRadius}`;
    let point9: string = `${startX + this.outerRadius * cos(18)} ${startY - (sin(18) - 1) * this.outerRadius}`;

    let point2: string =
      `${startX - this.innerRadius * cos(54)} ${startY - this.innerRadius * sin(54) + this.outerRadius}`;
    let point4: string =
      `${startX - this.innerRadius * cos(18)} ${startY + this.innerRadius * sin(18) + this.outerRadius}`;
    let point6: string = `${startX} ${startY + this.innerRadius + this.outerRadius}`;
    let point8: string =
      `${startX + this.innerRadius * cos(18)} ${startY + this.innerRadius * sin(18) + this.outerRadius}`;
    let point10: string =
      `${startX + this.innerRadius * cos(54)} ${startY - this.innerRadius * sin(54) + this.outerRadius}`;
    if (!isHalf) {
      return `M${point1} L${point2} L${point3} L${point4} L${point5} L${point6} L${point7} L${point8} L${point9} L${point10} L${point1} Z`
    }
    if (isLeft) {
      return `M${point1} L${point2} L${point3} L${point4} L${point5} L${point6} `
    }
    return `M${point6} L${point7} L${point8} L${point9} L${point10} L${point1}  `
  }

  applyContent(): WrappedBuilder<[ProgressConfiguration]> {
    return wrapBuilder(myProgress);
  }
}

@Builder
function leftStar(config: ProgressConfiguration, value: number) {
  Path()
    .width(20)
    .height(20)
    .commands((config.contentModifier as MyProgressModifier).paintingPath(35, 0, true, true))
    .fill(config.enabled && config.value >= value ? (config.contentModifier as MyProgressModifier).color :
    Color.White)
    .stroke(Color.Black)
    .strokeLineCap(LineCapStyle.Round)
    .strokeLineJoin(LineJoinStyle.Round)
    .strokeWidth(2)
}

@Builder
function rightStar(config: ProgressConfiguration, value: number) {
  Path()
    .width(20)
    .height(20)
    .commands((config.contentModifier as MyProgressModifier).paintingPath(0, 0, true, false))
    .fill(config.enabled && config.value >= value ? (config.contentModifier as MyProgressModifier).color :
    Color.White)
    .stroke(Color.Black)
    .strokeLineCap(LineCapStyle.Round)
    .strokeLineJoin(LineJoinStyle.Round)
    .strokeWidth(2)
}

@Builder
function myProgress(config: ProgressConfiguration) {
  Column({ space: 30 }) {
    Row() {
      Flex({ justifyContent: FlexAlign.Start }) {
        ForEach((config.contentModifier as MyProgressModifier).idList, (item: string) => {
          leftStar(config, Number(item))
          rightStar(config, Number(item) + 1)
        }, (item: string) => item)
      }
      .width('100%')
      .height(20)
    }
  }.margin({ bottom: 100 })


  Text('Current rating：').fontSize(20)
  Text(`${config.value / 2}`).fontSize(20)
}

@Entry
@Component
struct Index4 {
  @State currentValue: number = 0;
  modifier = new MyProgressModifier(Color.Yellow, 40);
  @State myModifier: (MyProgressModifier | undefined) = this.modifier;
  progressX: number = 0;
  context: UIContext = this.getUIContext()

  build() {
    Column() {
      Progress({ value: this.currentValue, total: 10 })
        .contentModifier(this.modifier)
        .gesture(
          PanGesture()
            .onActionStart((event: GestureEvent) => {
              this.progressX = event.fingerList[0].localX;
              this.currentValue = this.context.vp2px(this.progressX) / 100
            })
            .onActionUpdate((event: GestureEvent) => {
              this.progressX = event.fingerList[0].localX;
              this.currentValue = this.context.vp2px(this.progressX) / 100
            })
        )
        .margin(30)
    }.width('100%').height('100%')
  }
}

function cos(d: number) {
  return Math.cos(d * 3.14 / 180)
}

function sin(d: number) {
  return Math.sin(d * 3.14 / 180)
}

Written by Mucahid Kincir

How to set the semi-modal window height to be adaptive and customize the maximum height

HarmonyOS — Wed, 17 Jun 2026 03:20:00 +0000

Read the original article：How to set the semi-modal window height to be adaptive and customize the maximum height

Problem Description

When using bindSheet with SheetSize.FIT_CONTENT to adapt the content height, the maximum height of the semi-modal page can only be the system-defined value and cannot be customized. How can the height be set based on the content of the semi-modal page, while requiring the maximum height to be set as a percentage, for example, setting it to 80%?
Problem code:

@Entry
@Component
struct SheetDemo {
  @State isShowSheet: boolean = false
  private items : number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  @Builder
  SheetBuilder() {
    Column() {
      List({space:'10vp'}) {
        ForEach(this.items,(item : number) => {
          ListItem() {
            Text(String(item)).fontSize(16).fontWeight(FontWeight.Bold)
          }.width('90%').height('80vp').backgroundColor('#ff53ecd9').borderRadius(10)
        })
      }.alignListItem(ListItemAlign.Center).margin({top:'10vp'}).width('100%')
    }
    .width('90%')
    .height('100%')
    // .height('10%') // Cannot take effect and the interface jumps
    // .constraintSize({maxHeight:'20%'}) // Cannot take effect and the interface jumps
  }
  build() {
    Column() {
      Button('Open Sheet').width('90%').height('80vp')
        .onClick(()=>{
          this.isShowSheet = !this.isShowSheet
        })
        .bindSheet($$this.isShowSheet,this.SheetBuilder(), {
          height: SheetSize.FIT_CONTENT,
          showClose: false,
          preferType: SheetType.BOTTOM,
      })
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

Background Knowledge

Semi-modal transition: Bind a semi-modal page to a component using the bindSheet property. When the component is inserted, you can determine the size of the semi-modal by setting a custom or default built-in height.

Solution

Calculate the proportion of the semi-modal page content height in the window height. If the height exceeds the maximum height, display the maximum height and configure the height in SheetOptions:

import { window } from '@kit.ArkUI'

@Entry
@Component
struct SheetDemo {
  @State sheetHeight: string = '80%'
  @State windowHeight: number = 0
  @State isShowSheet: boolean = false
  private items : number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  private itemHeight: number = 80
  private spaceHeight: number = 10
  private maxHeightPercent: number = 80

  @Builder
  SheetBuilder() {
    Column() {
      List({space:this.spaceHeight}) {
        ForEach(this.items,(item : number) => {
          ListItem() {
            Text(String(item)).fontSize(16).fontWeight(FontWeight.Bold)
          }.width('90%').height(this.itemHeight).backgroundColor('#ff53ecd9').borderRadius(10)
        })
      }.alignListItem(ListItemAlign.Center).margin({top:'10vp'}).width('100%')
    }
    .width('90%')
    .height('100%')
  }
  // Set the height according to the List content, and require the maximum height to be less than 80%
  build() {
    Column() {
      Button('Open Sheet').width('90%').height('80vp')
        .onClick(()=>{
          this.isShowSheet = !this.isShowSheet
          // Calculate the height ratio of elements in the List component in the window
          let height: number = ((this.itemHeight+this.spaceHeight)*this.items.length + this.spaceHeight)/this.windowHeight * 100
          this.sheetHeight = `${Math.min(this.maxHeightPercent, height)}%`
        })
        .bindSheet($$this.isShowSheet,this.SheetBuilder(), {
          height: this.sheetHeight,  // this.sheetHeight is a percentage of string type
          showClose: false,
          preferType: SheetType.BOTTOM,
      })
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
  }

  onPageShow(): void {
    let windowClass: window.Window | undefined = undefined;
    window.getLastWindow(getContext()).then((data)=> {
      windowClass = data;
      try {
        let properties = windowClass.getWindowProperties();
        let rect = properties.windowRect;
        // rect.width: window width; rect.height: window height. Unit: px.
        this.windowHeight = px2vp(rect.height)
      } catch (exception) {
        console.error(`Failed to obtain the window properties. Cause code: ${exception.code}, message: ${exception.message}`);
      }
    })
  }
}

When the list height exceeds the maximum height, the effect is as shown below:

When the list height is less than the maximum height, the effect is as shown below:

Written by Mucahid Kincir

How to accurately count the exposure of items in a list

HarmonyOS — Tue, 16 Jun 2026 02:56:00 +0000

Read the original article：How to accurately count the exposure of items in a list

Problem Description

When a Scroll is nested in a List and the List scrolls along with the Scroll, how can I delay the counting of impressions after the scroll stops? In this case, the List's onScrollStop is not triggered, and if scrolling occurs again during the delayed reporting, it may lead to false reporting of items that are no longer visible.

Background Knowledge

Scroll Component features: The outer Scroll controls the overall scrolling behavior. The nested List does not trigger scroll events independently, and its scrolling state depends on the outer Scroll.

onScrollIndex: Triggered when a List subcomponent (such as ListItem) enters or exits the visible area, returning the first index (firstIndex), last index (lastIndex), and center index (centerIndex) of the current visible area.

onScrollStop: Triggered only once when the List scrolling stops completely. However, you need to ensure that the List does not disable edge effects (such as edgeEffect(EdgeEffect.None)), otherwise the callback may not work properly.

Solution

Continuously update the start and end indexes of the current visible area in the List's onScrollIndex, record the index snapshot at this time in onScrollStop, and set a 500ms timer for verification: If no new scrolling occurs within this time (that is, the current index does not change), it means that the visible area is stable and it is safe to report the exposure; otherwise, cancel the report to avoid misjudgment due to subsequent scrolling.
The steps are as follows:

1.Record the visible index in real time: Update startIndex and endIndex in the onScrollIndex of the List to ensure that these two state variables always reflect the first and last item indexes of the current visible area.

   .onScrollIndex((firstIndex, lastIndex) => {
     this.startIndex = firstIndex; 
     this.endIndex = lastIndex;
   })

2.Start delayed verification after scrolling stops: In onScrollStop of the outer Scroll, save the current startIndex and endIndex as a snapshot (such as upStartIndex), and set a 500ms timer to verify whether a new scroll occurs.

   .onScrollStop(() => {
     let upStartIndex = this.startIndex;
     let upEndIndex = this.endIndex;
     setTimeout(() => {
       if (upStartIndex !== this.startIndex) {
         // Index changes, indicating that the scrolling continues and the report is canceled.
       } else {
         // Index is consistent, visible area is stable, and exposure reporting is performed
       }
     }, 500);
   })

3.Determine whether it is a false alarm through index snapshot: Compare the snapshot index (upStartIndex) saved in the timer with the current index (this.startIndex). If they are consistent, it means that no new scrolling has occurred within 500ms, the visible area is stable, and the report can be submitted. If they are inconsistent, it means that subsequent scrolling has caused the item to become invisible, and the report needs to be canceled.

The complete code is as follows:

@Entry
@Component
struct NestedScroll {
  @State listPosition: number = 0;
  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  private scrollerForScroll: Scroller = new Scroller();
  private scrollerForList: Scroller = new Scroller();
  @State startIndex: number = 0;
  @State endIndex: number = 0;

  build() {
    Flex() {
      Scroll(this.scrollerForScroll) {
        List({ space: 20, scroller: this.scrollerForList }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text('ListItem' + item)
                .width('100%')
                .height('100%')
                .borderRadius(15)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .backgroundColor(Color.White)
            }
            .width('100%')
            .height(100)
          }, (item: string) => item)
        }
        .width('100%')
        .height('50%')
        .edgeEffect(EdgeEffect.None)
        .friction(0.6)
        .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
          this.startIndex = firstIndex;
          this.endIndex = lastIndex;
        })
        .onScrollStop(() => {
          let upStartIndex = this.startIndex;
          let upEndIndex = this.endIndex;

          setTimeout(() => {
            console.info('upStartIndex', upStartIndex);
            console.info('this.startIndex', this.startIndex);

            if (upStartIndex !== this.startIndex) {

              this.getUIContext().showAlertDialog({
                message: 'Output: Not reported',
                autoCancel: true,
              });
            } else {

              this.getUIContext().showAlertDialog({
                message: 'Output: Report',
                autoCancel: true,
              });
            }
          }, 3000);
        })
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding(20)
  }
}

The effect diagram is as follows:

Written by Mucahid Kincir

Flex layout text is not fully displayed when it automatically wraps

HarmonyOS — Tue, 16 Jun 2026 02:50:00 +0000

Read the original article：Flex layout text is not fully displayed when it automatically wraps

Problem Description

In the following code, when the Flex layout uses alignItems: ItemAlign.Stretch for stretching and clip for cropping, some characters will be cropped and not fully displayed.

@Entry
@Component
struct Index {
  @State text: string = '1234567890123456789012345678901234567890123456789012345678901234567890123344';

  build() {
    Column() {
      Column() {
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Stretch }) {
          Column() {
            Text('xxxx')
          }
          .width(96)
          .flexShrink(0)

          Column() {
            Text('yyyy')
            Text('yyyy')
            Text(this.text)
          }
          .flexGrow(1)
          .flexShrink(1)
          .padding(10)
          .borderWidth(1)
          .alignItems(HorizontalAlign.Start)
        }.width('90%')
        .border({
          width: 1,
          color: '#000000'
        })
      }.height('auto').clip(true)
      .justifyContent(FlexAlign.Center)

      Row() {
        Text(this.text)
      }.padding(12)
    }
  }
}

The following is an image showing incomplete characters.

Background Knowledge

Adding the alignSelf property to the components in the Flex container can set the alignment format of the child component on the cross axis of the parent container. The alignment format of all child components on the cross axis of the Flex container is satisfied through the alignItems property.

Solution

You can add the alignSelf property to the Column component in the Flex container. The alignment format of the Text child component on the cross axis of the Column parent component will override its alignItems setting, so that the text content in the Text child component can be fully displayed. Sample code:

@Entry
@Component
struct Index {
  @State text: string = '1234567890123456789012345678901234567890123456789012345678901234567890123344';

  build() {
    Column() {
      Column() {
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Stretch }) {
          Column() {
            Text('xxxx')
          }
          .width(96)
          .flexShrink(0)

          Column() {
            Text('yyyy')
            Text('yyyy')
            Text(this.text)
          }
          .flexGrow(1)
          .flexShrink(1)
          .padding(10)
          .borderWidth(1)
          .alignItems(HorizontalAlign.Start)
          .alignSelf(ItemAlign.Start)
        }.width('90%')
        .border({
          width: 1,
          color: '#000000'
        })
      }.height('auto').clip(true)
      .justifyContent(FlexAlign.Center)

      Row() {
        Text(this.text)
      }.padding(12)
    }
  }
}

Effect preview:

Written by Mucahid Kincir

RAM and disk space info with HDC command

HarmonyOS — Tue, 16 Jun 2026 02:47:00 +0000

Read the original article：RAM and disk space info with HDC command

Question

How can a user obtain RAM and disk space information from a Huawei Smartwatch using HDC commands?

Short Answer

By enabling Developer Options and HDC debugging on the smartwatch, then connecting it to a computer via HDC, users can run commands such as hdc shell cat /proc/meminfo to check RAM and hdc shell df -h to check storage usage.

Applicable Scenarios

Enable Developer Options on the Smartwatch
1. Access Settings: On your Huawei smartwatch, swipe down to access the quick settings menu and tap on the Settings icon.
2. About: Scroll down and tap on About.
3. Software Information: Tap on Software Information.
4. Build Number: Continuously tap on the Build Number until you see a message indicating that developer mode has been enabled.
Ensure hdc tool installed in your computer
Connect the Smartwatch to the Computer
1. Enable HDC Debugging in the developer options on your wearable watch.
2. Activate Debug via Wi-Fi in the developer options. Make a note of the IP address written here.
3. Type the following command to connect to your smartwatch from the hdc console on your computer:hdc tconn <ip adress>
4. Confirm the confirmation warning about trusting your computer that appears on your smartwatch.
5. If you see “Connect OK”, the connection is successful.
Retrieve RAM Information
To view the device's RAM information, execute:
hdc shell cat /proc/meminfo
Retrieve Storage Information
To check the storage usage, execute:
hdc shell df -h

Written by Mucahid Kincir

How to create a timer with start, pause, and reset functions?

HarmonyOS — Mon, 15 Jun 2026 02:40:00 +0000

Read the original article：How to create a timer with start, pause, and reset functions?

Requirement Description

How to create a timer with start, pause, and reset functions?

Background Knowledge

The TextTimer component displays timing information and is controlled in text format. This component is supported since API version 8. Implements a controller for controlling the TextTimer component. A TextTimer component can only be bound to one controller, and the relevant commands can only be called after the component has been created.

Implementation Steps

1) Create the textTimerController and the timer format

2) Create a timer

3) Add play, pause, and reset images and functions.

Code Snippet / Configuration

  textTimerController: TextTimerController = new TextTimerController()
  @State format: string = 'mm:ss.SS'

  @Builder
  Timer() {
    TextTimer({ isCountDown: false, controller: this.textTimerController })
      .format(this.format)
      .fontColor(Color.Gray)
      .margin({ top: 50, bottom: 10 })
      .fontSize(50)
      .onTimer((utc: number, elapsedTime: number) => {
        console.info('textTimer notCountDown utc is: ' + utc + ', elapsedTime: ' + elapsedTime)
      })
      .onAppear(() => {
        this.textTimerController.start()
      })
  }

  build() {
    Flex({ justifyContent: FlexAlign.Center, wrap: FlexWrap.Wrap, alignItems: ItemAlign.Center }) {
      this.Timer()

      Row({ space: 20 }) {
        Image($r('app.media.play')).fillColor(Color.Gray).width('40').onClick(() => {
          this.textTimerController.start()
        })
        Image($r('app.media.pause')).fillColor(Color.Gray).width('40').onClick(() => {
          this.textTimerController.pause()
        })
        Image($r('app.media.reset')).fillColor(Color.Gray).width('40').onClick(() => {
          this.textTimerController.reset()
        })
      }
    }.backgroundColor(Color.Black).width('100%').height('100%')
  }

Test Results

Written by Merve Yonetci

Get an access token after the authorization for the Health Kit

HarmonyOS — Mon, 15 Jun 2026 02:36:00 +0000

Read the original article：Get an access token after the authorization for the Health Kit

Requirement Description

User wants to get health data, but needs an access token to send a request health endpoint. How can the user get an access token?

Background Knowledge

1) Generate an authorization code.

The code is obtained by redirecting the user's browser to the address https://oauth-login.cloud.huawei.com/oauth2/v3/authorize. If an error occurs, please refer to Errors and Troubleshooting.

2) Generate an access token based on the authorization code.

After obtaining the authorization code in the previous step, it can be used to generate an access token by sending a request using the POST method from the app's server to the Huawei OAuth 2.0 authorization service address https://oauth-login.cloud.huawei.com/oauth2/v3/token with some input parameters:

3) After the access token expires, use the refresh token to obtain a new access token.

A refresh token can be used to obtain a new access token by sending a request using the POST method from the app's server to the Huawei OAuth 2.0 authorization service address https://oauth-login.cloud.huawei.com/oauth2/v3/token with some input parameters.

Implementation Steps

1) Define the client_id, client_secret, auth_url, redirect_url to get access token.

2) Send a token request with the authorization code received from the user during the OAuth authentication process, store the received tokens, and provide helper methods for storing the access token.

To obtain an authorization code, the user is redirected to a URL. After the user grants permission, an authorization code is returned.

3) After receiving the authorization code from the user, an access token is obtained using this code. If the token is already stored, the user is redirected directly to the application without needing to authenticate again.

Code Snippet / Configuration

1) We need to define the client_id, client_secret, auth_url, redirect_url to get access token.

export class APIConstants {
  static readonly AUTH_URL: string = 'YOUR_URL'
  static readonly CLIENT_ID: string = 'YOUR_CLIENT_ID'
  static readonly CLIENT_SECRET: string = 'YOUR_CLIENT_SECRET'
  static readonly REDIRECT_URL: string = 'YOUR_REDIRECT_URL'
}

2) This class sends a token request with the authorization code received from the user during the OAuth authentication process, stores the received tokens, and provides helper methods for storing the access token.

To obtain an authorization_code, the user is redirected to a URL. After the user grants permission, an authorization code is returned.

import Preferences from '../common/Preferences';
import { APIConstants } from '../common/Constants';
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { TokenResponse } from '../model/TokenResponse';
import taskpool from '@ohos.taskpool';
import { processRespTask } from '../common/processRespTask';


export class AuthenticationViewModel {
  accessToken: string = '';

  getAccessTokenFromStorage(): string {
    const token = Preferences.instance.getPreference('accessToken');
    this.accessToken = token;
    return token;
  }

  saveTokens(accessToken: string, refreshToken: string) {
    Preferences.instance.putPreference('accessToken', accessToken);
    Preferences.instance.putPreference('refreshToken', refreshToken);
    this.accessToken = accessToken;
  }

  getQueryParameter(url: string, paramName: string): string | null {
    const queryStartIndex = url.indexOf('?');
    if (queryStartIndex === -1) {
      return null;
    }

    const queryString = url.substring(queryStartIndex + 1);
    const params = queryString.split('&');

    for (const param of params) {
      const parts = param.split('=');
      if (parts.length === 2) {
        const key = decodeURIComponent(parts[0]);
        const value = decodeURIComponent(parts[1]);
        if (key === paramName) {
          return value;
        }
      }
    }

    return null;
  }

  async postOAuthToken(code: string): Promise<string | null> {
    const httpRequest = http.createHttp();

    const body =
      'grant_type=authorization_code' +
        `&code=${encodeURIComponent(code)}` +
        `&client_id=${encodeURIComponent(APIConstants.CLIENT_ID)}` +
        `&client_secret=${encodeURIComponent(APIConstants.CLIENT_SECRET)}` +
        `&redirect_uri=${encodeURIComponent(APIConstants.REDIRECT_URL)}`;

    return new Promise((resolve, reject) => {
      httpRequest.request(
        APIConstants.AUTH_URL,
        {
          method: http.RequestMethod.POST,
          header: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          extraData: body,
          expectDataType: http.HttpDataType.STRING,
        },
        async (err: BusinessError, data) => {
          let task = new taskpool.Task(processRespTask, [err, data]);
          await taskpool.execute(task);

          let parsed: TokenResponse | null = null;

          if (typeof data.result === 'string') {
            try {
              parsed = JSON.parse(data.result) as TokenResponse;
            } catch (e) {
              console.error('JSON parse failed:', e);
              resolve(null);
              return;
            }
          } else if (typeof data.result === 'object') {
            parsed = data.result as TokenResponse;
          }

          if (parsed && parsed.access_token && parsed.refresh_token) {
            this.saveTokens(parsed.access_token, parsed.refresh_token);
            resolve(parsed.access_token);
          } else {
            console.error('Token parse error or missing fields:', parsed);
            resolve(null);
          }

        }
      );
    });
  }
}

import { AuthenticationViewModel } from '../viewmodel/AuthenticationViewModel';
import { APIConstants } from '../common/Constants';
import { webview } from '@kit.ArkWeb';
import { router } from '@kit.ArkUI';
import { ButtonComponent } from '../component/ButtonComponent';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
export struct Authentication {
  @State shouldShowWebView: boolean = true;
  @State accessToken: string = '';
  @State activationKey: string = '';
  controller: webview.WebviewController = new webview.WebviewController();
  private viewModel = new AuthenticationViewModel();

  aboutToAppear(): void {
    const storedToken = this.viewModel.getAccessTokenFromStorage();
    if (storedToken.length > 0) {
      this.accessToken = storedToken;
      this.shouldShowWebView = false;
    }
  }

  handleOAuthCode(code: string) {
    this.activationKey = code;
    this.shouldShowWebView = false;

    this.viewModel.postOAuthToken(code).then((token) => {
      if (token) {
        this.accessToken = token;
      }
    }).catch((e: BusinessError) => {
      console.error('Token exchange failed:', e);
    });
  }

  build() {
    Column() {
      if (this.shouldShowWebView) {
        Web({ src: APIConstants.AUTH_URL, controller: this.controller })
          .width('100%')
          .height('100%')
          .onLoadIntercept((event) => {
            if (event) {
              const url = event.data.getRequestUrl();
              console.log('URL:' + url);
              const code = this.viewModel.getQueryParameter(url, 'code');
              if (code) {
                console.info('Code received from redirect: ' + code);
                this.handleOAuthCode(code);
              }
            }
            return false;
          });
      } else {
        Column() {
          Text($r('app.string.access_token'))
            .fontSize(12)
            .height('20%')
            .width('100%')
            .fontWeight(FontWeight.Bold)
            .textAlign(TextAlign.Center);

          Text(this.accessToken)
            .fontSize(12)
            .height('30%')
            .width('100%')
            .fontColor(Color.Red);

          ButtonComponent({ text: $r('app.string.continue') })
            .margin({ bottom: 5 })
            .onClick(() => {
              router.pushUrl({ url: 'pages/HomePage' });
            });

          ButtonComponent({ text: $r('app.string.steps') })
            .margin({ bottom: 5 })
            .onClick(() => {
              router.pushUrl({
                url: 'pages/StepsPage',
                params: { access_token: this.accessToken }
              });
            });
        }
        .height('100%')
        .width('100%');
      }
    }
    .height('100%')
    .width('100%');
  }
}

Test Results

Limitations or Considerations

You need to apply for the Huawei Health application. After approval, you can get data from the Huawei Health.

Written by Merve Yonetci

How to update widget content from another widget?

HarmonyOS — Mon, 15 Jun 2026 02:30:00 +0000

Read the original article：How to update widget content from another widget?

Requirement Description

When users add multiple widgets from the same app, the content should be synchronized.

Background Knowledge

On the widget page, you can trigger a message event via the postCardAction API to launch the FormExtensionAbility. The FormExtensionAbility then notifies the application through the onFormEvent callback. This process enables the functionality of passing messages to the application after a widget is touched.
The widget provider can call updateForm to actively update the widget.

Implementation Steps

Step 1: Create an application.

Step 2: Define data models.

Step 3: Implement preferences to store data.

Step 4: Create a widget with multiple support dimensions

Step 5: Add widgets and see instant synchronization.

Code Snippet

Step 1: Create an application.

Step 2: Define data models.

Mode.ets (Basic enumeration data)

// model/Mode.ets

export enum Mode {
  sad,
  happy
}

ModelData.ets (To transfer data between widgets)

// model/ModeData.ets

import { Mode } from "./Mode";

export interface ModeData {
  mode: Mode,
  method: string
}

Step 3: Implement preferences to store data.

WidgetIdPrefs.ets (To store widget ids)

// util/WidgetIdPrefs.ets

import { Context } from '@kit.AbilityKit';
import { preferences } from '@kit.ArkData';

export default class WidgetIdPrefs {
  static addFormID(context: Context, formID: string) {
    console.log('addFormID', formID);
    let prefs = preferences.getPreferencesSync(context, { name: 'ids' });
    prefs.putSync(formID, formID)
    prefs.flushSync()
  }

  static removeFormID(context: Context, formID: string) {
    console.log('removeFormID', formID);
    let prefs = preferences.getPreferencesSync(context, { name: 'ids' });
    prefs.deleteSync(formID)
    prefs.flushSync()
  }

  static getFormIDs(context: Context): string[] {
    console.log('getFormIDs');
    let prefs = preferences.getPreferencesSync(context, { name: 'ids' });
    return Object.values(prefs.getAllSync())
  }
}

Step 4: Create a widget with multiple support dimensions. Here we will use "1*2" and "2*2" and name it Widget1. For details about how to create a widget, please visit: Creating an ArkTS Widget

Widget1Card.ets

// widget1/pages/Widget1Card.ets

import { Mode } from '../../model/Mode'

let ls = new LocalStorage();

@Entry(ls)
@Component
struct MyModeCard {
  @LocalStorageProp('mode') mode: Mode = Mode.happy

  build() {
    Row({ space: 8 }) {
      Button('😭')
        .fontSize(18)
        .backgroundColor(this.mode === Mode.sad ? Color.Red : Color.Grey)
        .type(ButtonType.Circle)
        .layoutWeight(1)
        .onClick(() => {
          this.changeMode(Mode.sad)
        })
      Button('😊')
        .fontSize(18)
        .backgroundColor(this.mode === Mode.happy ? Color.Green : Color.Grey)
        .type(ButtonType.Circle)
        .layoutWeight(1)
        .onClick(() => {
          this.changeMode(Mode.happy)
        })
    }
    .padding(8)
    .height('100%')
    .backgroundColor($r('sys.color.comp_background_primary'))
    .onClick(() => {
      postCardAction(this, {
        action: 'router',
        abilityName: 'EntryAbility',
      });
    })
  }

  changeMode(newMode: Mode) {
    if (this.mode !== newMode) {
      this.postCardActionCall(newMode)
    }
  }

  postCardActionCall(newMode: Mode) {
    postCardAction(this, {
      action: 'message',
      abilityName: 'EntryAbility',
      params: {
        // function name
        method: 'changeMode',
        // additional parameters
        mode: newMode
      }
    });
  }
}

Modify Widget1FormAbility.ets to add and remove widget IDs and to capture message action.

// widget1formability/Widget1FormAbility.ets

import { formBindingData, FormExtensionAbility, formInfo, formProvider } from '@kit.FormKit';
import { Want } from '@kit.AbilityKit';
import WidgetIdPrefs from '../util/WidgetIdPrefs';
import { ModeData } from '../model/ModeData';
import { vibrator } from '@kit.SensorServiceKit';

export default class Widget1FormAbility extends FormExtensionAbility {
  onAddForm(want: Want) {
    // Called to return a FormBindingData object.
    if (!want || !want.parameters) {
      console.error(`FormAbility onAddForm want or want.parameters is undefined`);
      return formBindingData.createFormBindingData('');
    }

    // store form id
    let formId: string = want.parameters[formInfo.FormParam.IDENTITY_KEY] as string;
    WidgetIdPrefs.addFormID(this.context, formId);

    const formData = '';
    return formBindingData.createFormBindingData(formData);
  }

  onCastToNormalForm(formId: string) {
    // Called when the form provider is notified that a temporary form is successfully
    // converted to a normal form.
  }

  onUpdateForm(formId: string) {
    // Called to notify the form provider to update a specified form.
  }

  onFormEvent(formId: string, message: string) {
    // Called when a specified message event defined by the form provider is triggered.
    let data: ModeData = JSON.parse(message);

    // update widget content
    if (data.method === 'changeMode') {
      vibrator.startVibration({ type: 'time', duration: 200 }, { usage: 'physicalFeedback' })

      const ids = WidgetIdPrefs.getFormIDs(this.context)
      ids.forEach((id: string) => {
        let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(data);
        formProvider.updateForm(id, formInfo)
      })
    }
  }

  onRemoveForm(formId: string) {
    // Called to notify the form provider that a specified form has been destroyed.
    // remove form id
    WidgetIdPrefs.removeFormID(this.context, formId);
  }

  onAcquireFormState(want: Want) {
    // Called to return a {@link FormState} object.
    return formInfo.FormState.READY;
  }
}

Step 5: Add widgets and see instant synchronization.

DEV Community: HarmonyOS

How to Create an Interactive Trivia Wheel on Wearables with mpchart?

How to Create an Interactive Trivia Wheel on Wearables with mpchart?

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Limitations or Considerations

Written by Muhammet Ali Ilgaz

How to parse the p12 certificate?

Problem Description

Background Knowledge

Troubleshooting Process

Solution

Written by Mucahid Kincir

The scroll bar component ScrollBar jumps when sliding

Problem Description

Background Knowledge

Troubleshooting Process

Analysis Conclusion

Solution

Written by Mucahid Kincir

Row component horizontal scrolling abnormality

Background Knowledge

Solution

Written by Mucahid Kincir

Progress sliding rating dynamic effect implementation

Problem Description

Background Knowledge

Solution

Written by Mucahid Kincir

How to set the semi-modal window height to be adaptive and customize the maximum height

Problem Description

Background Knowledge

Solution

Written by Mucahid Kincir

How to accurately count the exposure of items in a list

Problem Description

Background Knowledge

Solution

Written by Mucahid Kincir

Flex layout text is not fully displayed when it automatically wraps

Problem Description

Background Knowledge

Solution

Written by Mucahid Kincir

RAM and disk space info with HDC command

Question

Short Answer

Applicable Scenarios

Written by Mucahid Kincir

How to create a timer with start, pause, and reset functions?

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Related Documents or Links

Written by Merve Yonetci

Get an access token after the authorization for the Health Kit

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Limitations or Considerations

Related Documents or Links

Written by Merve Yonetci

How to update widget content from another widget?

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet

Written by Mehmet Karaaslan