Web Header Update, State Variable Nested Issue, Custom Popup, Stack Rounded Corners, Flex Line Wrapping Problem

[Daily HarmonyOS Knowledge] Web Header Update, State Variable Nested Issue, Custom Popup, Stack Rounded Corners, Flex Line Wrapping Problem

1. HarmonyOS webview header cannot be updated?

When page A opens webview page B, the first request includes headers. After exiting page B and dynamically updating the header parameters, packet capture shows that the second request from the webview has no headers. Other details: The header parameters are dynamically updated, and debugging shows that prefetchPage or loadUrl updates the headers each time, but the actual request does not reflect the updates and the headers are empty.

Explanation:

prefetchPage caches the same URL for 5 minutes, and there is no way to check if a URL is cached. When prefetchPage is used to request a cached URL again, it does not trigger a real request and does not include headers.

Solution:

Use loadUrl instead. When using onControllerAttached simultaneously, set the web src to an empty string to avoid timing issues with the Web component.

API Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#ZH-CN_TOPIC_0000001847210168__setcustomuseragent10

Example Code:

Web({ src: "", controller: this.webViewController })
  .onLoadIntercept(event => {
    if (event && event.data && event.data.getRequestUrl()) {
      let url = event.data.getRequestUrl()
    }
    return false
  })
  .onControllerAttached(() => {
    console.info("yyyyy onControllerAttached")
    let headers = new Array<webview.WebHeader>()
    headers.push({ headerKey: 'AUTHORIZATION', headerValue: 'test value' })
    // this.webViewController.prefetchPage(this.loadUrl, headers)
    this.webViewController.loadUrl(this.loadUrl, headers)
  })

2. HarmonyOS cannot detect additions of identical data in nested arrays, but can in non-nested arrays?

ArkUI's reactivity is tied to @State variables. While nested array data does change, the UI cannot detect deep changes.

Recommendation:

Modify the code as follows:

@State data5: Array<RequestData4> = []
Text("Original data:\n" + JSON.stringify(this.data5) ?? "2333").padding(10).fontColor(Color.Black)
this.data5 = JSON.parse(JSON.stringify(this.data.data5))

3. How to use a custom popup in a utility class in HarmonyOS?

Defining CustomDialogController in a class and calling it from a component does not trigger the popup. How can CustomDialog be implemented in a utility class for component use with customizable content?

Solution:

CustomDialogController can only be used within @component. For better compatibility, use promptAction.openCustomDialog instead. Future popup features will be based on promptAction.

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

4. HarmonyOS Stack rounded corners not working?

Reference Code:

@Entry
@Component
struct StackExample {
  build() {
    Stack({ alignContent: Alignment.Center }) {
      Text('First child, show in bottom').width('90%').height('80%').backgroundColor(0xd2cab3).align(Alignment.Top)
      Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)
    }.width('100%').height(150).margin({ top: 300 }).borderRadius(33).backgroundColor(Color.Red)
  }
}

5. HarmonyOS Flex component set to nowrap truncates content?

The UI uses a Flex component to display small tags, requiring them to stay on a single line. When FlexWrap.NoWrap is set, tags overflow and get truncated. Setting FlexWrap.Wrap allows wrapping but violates the single-line requirement. How to resolve?

Solution:

Set a fixed height on the parent component and add the clip attribute.

Documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5

Reference Demo:

@Entry
@Component
struct Test66 {
  @State arr: string[] = ['Xi\'an', 'Chengdu22', 'Chengdu33', 'Chengdu44', 'Chengdu55', 'Chengdu66', 'Chongqing', 'Urumqi', 'Beijing', 'Hulunbuir', 'Beijing333'];
  build() {
    Column() {
      Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(this.arr, (item: string) => {
          Text(item)
            .fontSize('16vp')
            .borderWidth('1vp')
            .borderColor('#666666')
            .borderRadius('10vp')
            .padding('3vp')
            .height(100)
        })
      }
    }.width('100%').height(100).backgroundColor(0xDCDCDC).clip(true)
  }
}