DEV Community

Cover image for Screenshot Component for Lists, Toggle Component, Web Component Request Headers, List Selection Popup
kouwei qing
kouwei qing

Posted on

Screenshot Component for Lists, Toggle Component, Web Component Request Headers, List Selection Popup

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Screenshot Component for Lists, Toggle Component, Web Component Request Headers, List Selection Popup, Game Acceleration

1. How does HarmonyOS handle screenshotting components that exceed the screen, such as lists and scrollable content, using componentSnapshot?

The official componentSnapshot currently does not support capturing ultra-long images of components beyond the screen. For details, refer to: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentsnapshot-V5

This module provides the ability to capture screenshots of components, including both loaded and unloaded components. Component screenshots can only capture the area within the component's size. If the component or its child components are drawn beyond their defined areas, the content outside the component's area will not appear in the screenshot. Sibling nodes stacked within the component's area will not be displayed in the screenshot.

Alternative solutions:

  1. When capturing the screen, control the scroll coordinates of the list or scrollable content to take multiple screenshots, then stitch the images together.
  2. Draw all UI components in the view onto a canvas, then capture the entire canvas to obtain the image.

2. When switching dark mode within the onChange callback of the HarmonyOS Toggle component, the callback triggers twice with opposite states. How to handle this?

Clicking the Toggle switch on the page correctly switches the page to dark mode, but the switch state of the button remains unchanged. Investigation shows the callback triggers twice with conflicting states. How to ensure callback correctness in this scenario?

Reference demo:

@Entry
@Component
struct TogglePage2 {
  @State isDarkMode: boolean = false
  build() {
    Column() {
      Toggle({ type: ToggleType.Switch, isOn: this.isDarkMode }) // Do not omit the isOn property when the page refresh is triggered.
        .onChange((isOn: boolean) => {
          console.log('Toggle.onChange2： isOn', isOn)
          this.isDarkMode = isOn
          getContext(this).getApplicationContext().setColorMode(this.isDarkMode ? 0 : 1) // Triggers secondary rendering. If isOn is not assigned, the default value (false) will cause incorrect state.
        })
    }.width("100%").height("100%").padding(32)
  }
}
Enter fullscreen mode Exit fullscreen mode

Note: Do not omit the isOn property of Toggle in scenarios that trigger secondary rendering. Secondary rendering reads the default value, and omitting isOn will use the default value (false), leading to incorrect toggle states.

3. How to attach request headers to the HarmonyOS Web component?

Write the loadUrl method within the Web component's lifecycle:

Web({ src: "", controller: this.controller })
  .onControllerAttached(() => {
    this.controller.loadUrl("xxxxxxxxx", header)
  })
Enter fullscreen mode Exit fullscreen mode

4. How to customize the style of the HarmonyOS list selection popup (ActionSheet)?

ActionSheet does not provide a custom style interface. For custom styles, use the CustomDialog component: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5

Display custom popups using the CustomDialogController class. Custom popups are preferred for easier style and content customization.

5. Does HarmonyOS support game loading with the TBS (X5) kernel?

You can try using the system's native webview component.

Top comments (0)