Popup Components, Object Passing, Obtaining Current Route Component Instances, Irregular Polygon Drawing, and Checkbox Groups

【Daily HarmonyOS Next Knowledge】 Popup Components, Object Passing, Obtaining Current Route Component Instances, Irregular Polygon Drawing, and Checkbox Groups

1. Recommend a Popup Component in HarmonyOS that Can Anchor Below a Specific Component

Is there a recommended popup component that allows setting the position to anchor below a specific component? Can a global custom popup meet this requirement?

Currently, bindPopup can be used. Refer to the link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-popup-V5

Reference demo:

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

  build() {
    Column() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .height('200vp')
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.Start)
      .backgroundColor(Color.Orange)
      .onClick(() => {
        this.handlePopup = !this.handlePopup;
      })
      .bindPopup(this.handlePopup, { 
        message: 'This is a popup with PopupOptions This is a popup with PopupOptions' +
                 ' xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' +
                 ' xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' +
                 ' xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' +
                 ' xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        messageOptions: { 
          textColor: Color.Red,
          font: {
            size: '14vp',
            style: FontStyle.Italic,
            weight: FontWeight.Bolder
          }
        },
        placement: Placement.Bottom,
        enableArrow: false,
        width: '100%',
        radius: 0,
        onStateChange: (e) => {
          console.info(JSON.stringify(e.isVisible));
          if (!e.isVisible) {
            this.handlePopup = false;
          }
        }
      });
    }
    .height('100%');
  }
}

2. How to Use @ObjectLink in HarmonyOS

The page data is an array of ClassA, and ClassA contains an array of ClassB, structured as follows:

@Observed
export class ClassA {
  a: number;
  datas: ClassB[];
}

@Observed
export class ClassB {
  b: number;
  c: number;
}

@Entry
@Component
struct Index {
  @State pageDatas: ClassA[] = [];

  build() {
    Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
      ForEach(this.pageDatas, (page_item: ClassA, page_index: number) => {
        TabContent() {
          PageView({
            page_item: page_item,
          })
        }
      });
    }
  }

  @Component
  export struct PageView {
    @ObjectLink page_item: ClassA;

    build() {
      Column() {
        Text(this.page_item.a + "")
          .onClick((e: ClickEvent) => {
            // Pop up a dialog to select the 'a' value
            this.page_item.a = selecta;
          });

        ForEach(this.page_item.datas, (item: ClassB, index: number) => {
          ItemView({
            page_item: this.page_item,
            item: item
          });
        }, (item: ClassB) => JSON.stringify(item));
      }
    }
  }

  @Component
  export struct ItemView {
    @ObjectLink page_item: ClassA;
    @ObjectLink item: ClassB;

    build() {
      Row() {
        Button("加1")
          .onClick((e: ClickEvent) => {
            this.item.b = this.item.b + 1;
          });

        TextInput({ text: this.item.b === 0 ? '' : this.item.b.toString() })
          .onChange((value: string) => {
            if (value === null || value === undefined || value === '') {
              this.item.b = 0;
            } else {
              this.item.b = parseInt(value);
            }
          });

        Text(this.page_item.a * this.item.b * this.item.c + "m³");
      }
    }
  }
}

Desired effects:

1. Clicking in each page of the Index page pops up a dialog to select the a value, which should update the display of Text(this.page_item.a * item.b * item.c + "m³").
2. Entering values in TextInput should also update the above text.
3. Clicking the Button should update the value in TextInput and the above text.

Solution: Use the @ObjectLink decorator to monitor deep nested object changes. For complex nested objects, refer to:

• Object array usage: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5#%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84
• Cases where nested object property changes fail: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5#%E5%A4%8D%E6%9D%82%E5%B5%8C%E5%A5%97%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E6%9B%B4%E6%94%B9%E5%A4%B1%E6%95%88

3. Can HarmonyOS Obtain the Instance of the Current Route's Page Component?

Application scenario: Encapsulate independent dialog components (e.g., Loading, Toast).

function getCurrentPageInstance() {
  return // Get the instance of the current route's page component
}

@Builder
function XLoadingBuilder(text: string) {
  // ...
}

export class XLoading {
  static show() {
    promptAction.openCustomDialog({
      builder: XLoadingBuilder.bind(getCurrentPageInstance(), '加载中...'),
      alignment: DialogAlignment.Center,
      isModal: true,
      backgroundColor: Color.Transparent,
      maskColor: Color.Transparent,
      autoCancel: true,
    });
  }
}

// Usage:
XLoading.show();

References:

• UIContext: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-UIContext.md#uicontext
• openCustomDialog: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-UIContext.md#opencustomdialog12

4. How to Draw Irregular Polygons and Add Click Events in HarmonyOS

Method: Find an icon on www.iconfont.cn, copy the SVG code, and paste the d attribute from the path tag into the commands property.

Demo:

let d = 'M1016.832 606.208q2.048 12.288-1.024 29.696t-10.24 35.328-17.408 32.256-22.528 20.48-21.504 6.144-20.48-4.096q-10.24-3.072-25.6-5.632t-31.232-1.024-31.744 6.656-27.136 17.408q-24.576 25.6-28.672 58.368t9.216 62.464q10.24 20.48-3.072 40.96-6.144 8.192-19.456 16.896t-29.184 15.872-33.28 11.264-30.72 4.096q-9.216 0-17.408-7.168t-11.264-15.36l-1.024 0q-11.264-31.744-38.4-54.784t-62.976-23.04q-34.816 0-62.976 23.04t-39.424 53.76q-5.12 12.288-15.36 17.92t-22.528 5.632q-14.336 0-32.256-5.12t-35.84-12.8-32.256-17.92-21.504-20.48q-5.12-7.168-5.632-16.896t7.68-27.136q11.264-23.552 8.704-53.76t-26.112-55.808q-14.336-15.36-34.816-19.968t-38.912-3.584q-21.504 1.024-44.032 8.192-14.336 4.096-28.672-2.048-11.264-4.096-20.992-18.944t-17.408-32.768-11.776-36.864-2.048-31.232q3.072-22.528 20.48-28.672 30.72-12.288 55.296-40.448t24.576-62.976q0-35.84-24.576-62.464t-55.296-38.912q-9.216-3.072-15.36-14.848t-6.144-24.064q0-13.312 4.096-29.696t10.752-31.744 15.36-28.16 18.944-18.944q8.192-5.12 15.872-4.096t16.896 4.096q30.72 12.288 64 7.68t58.88-29.184q12.288-12.288 17.92-30.208t7.168-35.328 0-31.744-2.56-20.48q-2.048-6.144-3.584-14.336t1.536-14.336q6.144-14.336 22.016-25.088t34.304-17.92 35.84-10.752 27.648-3.584q13.312 0 20.992 8.704t10.752 17.92q11.264 27.648 36.864 48.64t60.416 20.992q35.84 0 63.488-19.968t38.912-50.688q4.096-8.192 12.8-16.896t17.92-8.704q14.336 0 31.232 4.096t33.28 11.264 30.208 18.432 22.016 24.576q5.12 8.192 3.072 17.92t-4.096 13.824q-13.312 29.696-8.192 62.464t29.696 57.344 60.416 27.136 66.56-11.776q8.192-5.12 19.968-4.096t19.968 9.216q15.36 14.336 27.136 43.52t15.872 58.88q2.048 17.408-5.632 27.136t-15.872 12.8q-31.744 11.264-54.272 39.424t-22.528 64q0 34.816 18.944 60.928t49.664 37.376q7.168 4.096 12.288 8.192 11.264 9.216 15.36 23.552zM540.672 698.368q46.08 0 87.04-17.408t71.168-48.128 47.616-71.168 17.408-86.528-17.408-86.528-47.616-70.656-71.168-47.616-87.04-17.408-86.528 17.408-70.656 47.616-47.616 70.656-17.408 86.528 17.408 86.528 47.616 71.168 70.656 48.128 86.528 17.408z';

@Entry
@Component
struct Index {
  build() {
    Column() {
      Path().width('100%').height('100%')
        .commands(d)
        .stroke('#8a8a8a').strokeWidth(3);
    }
  }
}

5. Can CheckboxGroup in HarmonyOS Reference an Upper-Level CheckboxGroup?

Can CheckboxGroup reference an upper-level CheckboxGroup?

The CheckboxGroup component can associate with other CheckboxGroup components to reference an upper-level group. Implementation steps:

1. Basic functions of CheckboxGroup:

   • CheckboxGroup is a checkbox group component that controls whether checkboxes in the group are fully selected.
   • Each CheckboxGroup has a unique group value; CheckboxGroup and Checkbox with the same group value belong to the same group.

2. Referencing an upper-level CheckboxGroup:

   • Set the group attribute of CheckboxGroup to associate with another CheckboxGroup.
   • Two CheckboxGroups with the same group value are treated as the same group.

3. Example:

   • Suppose there are two CheckboxGroups: CheckboxGroupA and CheckboxGroupB.
   • To make CheckboxGroupB reference CheckboxGroupA, set CheckboxGroupB's group value to CheckboxGroupA's group value.