Global Font Adjustment, H5 Checkbox Unchecking Issue, Margin Ineffectiveness, Length Conversion, @Prop vs @Link Comparison

[Daily HarmonyOS Knowledge] Global Font Adjustment, H5 Checkbox Unchecking Issue, Margin Ineffectiveness, Length Conversion, @prop vs @link Comparison

1. Is there a way to uniformly adjust the global font size in HarmonyOS?

A unified method for adjusting global font size exists. You can use dynamic attributes and customize a class that implements the AttributeModifier interface to define fixed styles for text, then apply it to Text components across the page.

Reference Document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-attribute-modifier-V5

Dynamic attribute setting for components supports if/else syntax and polymorphic style configurations as needed.

2. In a HarmonyOS Web component, after dynamically setting the checked attribute of an H5 checkbox, it cannot be unchecked by clicking. How to fix this?

For H5 confirm events, listen via the Web component's onConfirm callback. Refer to the following code:

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({
        src: '',
        controller: this.controller
      })
        .overScrollMode(OverScrollMode.NEVER)
        .width('100%')
        .height('100%')
        .onControllerAttached(() => {
          this.controller.setCustomUserAgent('Mozilla/5.0 (Phone; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile Variflight/6.1.0')
          this.controller.loadUrl('https://openapi.variflight.com/html/module/cs/index.html#/detail?id=323')
        })
        .onConfirm((event) => {
          if (event) {
            console.log("event.url:" + event.url)
            console.log("event.message:" + event.message)
            AlertDialog.show({
              title: 'onConfirm',
              message: 'text',
              primaryButton: {
                value: 'cancel',
                action: () => {
                  event.result.handleCancel()
                }
              },
              secondaryButton: {
                value: 'ok',
                action: () => {
                  event.result.handleConfirm()
                }
              },
              cancel: () => {
                event.result.handleCancel()
              }
            })
          }
          return true
        })
        .mixedMode(MixedMode.All)
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .overScrollMode(OverScrollMode.NEVER)
    }
  }
}

3. In HarmonyOS, when setting left and right margins for a parent component, the right margin does not take effect, but padding works. Why?

• When using margin (outer margin), the child component's width percentage is calculated based on the entire screen width, and then positioned using margins. If the sum of child component widths reaches 100%, additional margins may shift the components beyond the screen bounds.
• When using padding (inner padding), the child component's width is calculated as (screen width - left/right padding) × percentage, ensuring proper display within the parent container.

4. How to convert a HarmonyOS Length to a specific numeric value?

Use the onAreaChange callback to obtain the Length and convert it to a number:

.onAreaChange((oldValue: Area, newValue: Area) => {
  let num: number = 0
  num = newValue.width as number  // Type assertion
  console.log(num.toString())
  num = Number(newValue.width)     // Explicit conversion
  console.log(num.toString())
})

5. What is the memory and performance comparison between HarmonyOS @Prop and @Link? Does @Link have lower overhead than @Prop for deep copying large data?

Key Differences Between @Prop and @Link:

1. Data Synchronization:

   • @Prop: Initialized with a parent component's @State variable. Changes only refresh the current component's UI, not the parent's.
   • @Link: Also initialized with a parent @State variable. Changes trigger UI refreshes for both the current component and the parent, enabling two-way data binding.

2. Underlying Mechanism of @Link:

   • Initial Rendering: The parent component's @State variable initializes the child's @Link variable, establishing bidirectional synchronization.
   • Update Process: When the parent's @State updates, it notifies all dependent components (including @Link in children). When a child's @Link updates, it calls the parent's @State setter to sync back, triggering UI refreshes for both.

3. Overhead Comparison:

   • @Prop has lower overhead than @Link because it does not involve bidirectional synchronization or parent UI refreshes.
   • Neither supports deep copying of data. For large datasets, @Prop is more efficient due to its unidirectional nature.

Reference Document: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-link-V5