Area Change Issues, Navigation Jumps, Input Box Special Symbol Filtering, Inserting Builders in Constructors

#harmonyos #harmonyosnext

【Daily HarmonyOS Next Knowledge】 Area Change Issues, Navigation Jumps, Input Box Special Symbol Filtering, Inserting Builders in Constructors

1. Issues with HarmonyOS getInspectorByKey(id) Method?

You can try using onAreaChange to obtain it.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5

The component area change event refers to an event triggered when changes occur in the component's displayed size, position, etc.

onAreaChange(event: (oldValue: Area, newValue: Area) => void): T

This callback is triggered when the component area changes. It only responds to callbacks caused by layout changes that lead to changes in the component's size or position.

Rendering property changes caused by drawing changes (such as translate, offset) will not trigger the callback. If the component's position is determined by drawing changes (such as bindSheet), it will also not respond to the callback.

2. How to Localize Text for the value Parameter Passed in HarmonyOS Navigation's .menus() Method (Menu Name)?

Currently, attempting to use string resources for the value parameter in Navigation's .menus() method.

Code: value: $r('app.string.Page_close')

Error: Type ‘Resource’ is not assignable to type ‘string’. <ArkTSCheck>

Example Code:

build() {
  Navigation() {
    Web({ src: this.webUrl, controller: this.controller })
      .backgroundColor($r('app.color.start_window_background'))
      .darkMode(this.mode)
      .forceDarkAccess(this.access)
      .overScrollMode(OverScrollMode.ALWAYS)
      .mixedMode(MixedMode.Compatible)
      .onPageBegin((event) => {
        this.pageEnd = false
      })
      .onPageEnd(() => {
        this.pageEnd = true
        if (this.webTitle == '') {
          this.webTitle = this.controller.getTitle()
        }
      })
    if (!(this.pageEnd)) {
      LodingView() 
    }
  }
  .width('100%')
  .height('100%')
  .title(this.NavigationTitle)
  .titleMode(NavigationTitleMode.Mini)
  .hideBackButton(true)
  .menus([{
    value: '上一页', icon: 'resources/base/media/web_back.png', action: () => {
      this.controller.backward()
    }
  },
    {
      value: '下一页', icon: 'resources/base/media/web_next.png', action: () => {
      this.controller.forward()
    }
    },
    {
      value: '刷新', icon: 'resources/base/media/web_refresh.png', action: () => {
      this.controller.refresh();
    }
    },
    {
      value: $r('app.string.Page_close'), icon: 'resources/base/media/web_close.png', action: () => {
      router.back();
    }
    }
  ])
}

Solution: Convert the Resource type to the actual resource value. For example, if a resource is defined in string.json as {"name": "module_desc", "value": "module description"}, you can obtain the Resource via $r('app.string.module_desc') and use methods like getStringByName to get the corresponding string value (i.e., "module description").

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-resource-manager-V5

3. Where to Configure the name Parameter of the pushPath Method in HarmonyOS Navigation's Page Routing (NavPathStack)?

References:

4. How to Set inputFilter in HarmonyOS to Restrict Character Input (Including Numbers, Upper/Lowercase Letters, and All Special Symbols, Both Chinese and English)?

Refer to the following code for inputFilter:

TextInput({ placeholder: '账号', text: this.account })
  .inputFilter('![/^((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!;:@#$%?^&*_-]))([a-zA-Z0-9!;:@#$%?^&*_-])$/]', (e) => {
    console.log(JSON.stringify(e))
  })

5. How to Insert a Builder in a Builder in HarmonyOS?

Refer to the following demo:

@Component
struct activeDialog {
  @Builder
  customBuilder() {
  }

  @BuilderParam customBuilderParam: () => void = this.customBuilder;

  build() {
    Column({ space: 5 }) {
      Text('9998888888')
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

@Entry
@Component
struct Parent {
  @State isShow: boolean = true
  @Builder
  componentBuilder() {
    Text(`Parent builder `)
  }

  build() {
    Column() {
      activeDialog({ customBuilderParam: this.componentBuilder })
    }
    .bindContentCover(this.isShow, this.componentBuilder(), {
      modalTransition: ModalTransition.NONE,
      onAppear: () => {
        console.log("BindContentCover onAppear.")
      },
      onDisappear: () => {
        console.log("BindContentCover onDisappear.")
      }
    })
  }
}

DEV Community