Swiper Style, WaterFlow, Clipboard, Manual Tracing

【Daily HarmonyOS Next Knowledge】Swiper Style, WaterFlow, Clipboard, Manual Tracing

1. Conflict when setting both the indicator style and visibility in HarmonyOS Swiper?

When setting code in Swiper to control both the visibility of the indicator and its style, it was found that the style set later would override the visibility logic. How can we achieve both?

Refer to the following implementation:

.indicator( // Set the dot navigation style
  this.data.totalCount()>1?
  new DotIndicator()
    .itemWidth(15)
    .itemHeight(15)
    .selectedItemWidth(15)
    .selectedItemHeight(15)
    .color(Color.Gray)
    .selectedColor(Color.Blue)
    : false
)

2. WaterFlow nested in a List causes full data loading in HarmonyOS?

It was found that nesting a WaterFlow inside a List causes all data in the WaterFlow to be loaded at once, which impacts performance.

If the WaterFlow does not have a height set and the parent component imposes infinite constraints in the main axis direction, the WaterFlow will adapt to the size of its child nodes, loading all data. Setting a height for the WaterFlow, such as 100%, resolves this.

3. System clipboard returns empty data in HarmonyOS?

The system clipboard returns empty data.

Refer to this demo:

import pasteboard from '@ohos.pasteboard'
import promptAction from '@ohos.promptAction'

@Entry
@Component
export struct CopyText {
  private textContent: string = "Copy Me"

  build() {
    Column() {
      Button(this.textContent)
        .fontSize($r("sys.float.ohos_id_text_size_body3"))
        .borderRadius(9)
        .borderWidth(1)
        .padding({ left: 8, right:8})
        .fontColor($r('sys.color.ohos_id_color_text_primary'))
        .fontWeight(FontWeight.Medium)
        .opacity($r("sys.float.ohos_id_alpha_content_secondary"))
        .onClick(() => copyText("www.huawei.com"))
    }
  }
}

function copyText(text: string) {
  const pasteboardData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text)
  const systemPasteboard = pasteboard.getSystemPasteboard()
  systemPasteboard.setData(pasteboardData) // Place data into clipboard
  systemPasteboard.getData().then((data) => {
    if (data) {
      promptAction.showToast({ message: "Copy Success" })
    } else {
      promptAction.showToast({ message: "Copy Failed" })
    }
  })
}

4. How to set custom images for selected and unselected states of Swiper indicators in HarmonyOS?

How can custom images be set for the selected and unselected states of Swiper indicators?

Swiper's built-in indicator does not support custom images. You can create a custom UI for the indicator and bind animations using the onAnimationStart, onAnimationEnd, and onGestureSwipe event callbacks. Alternatively, you can use third-party libraries. Refer to: https://gitee.com/openharmony-sig/ohos_banner

5. How to manually add traces to code in HarmonyOS?

Refer to: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/dfx/hitracemeter-guidelines-arkts.md

HiTraceMeter provides system performance tracing APIs. Developers can effectively track process trajectories and view system performance by calling HiTraceMeter APIs at key code positions.

HiTraceMeter Tag: The category for tracing data is called a HiTraceMeter Tag. Generally, each software subsystem corresponds to one tag. The hitrace command-line tool only collects tracing data for specified tags. The tag for HiTraceMeter in applications is HITRACE_TAG_APP, corresponding to "app" in the tag list displayed by the hitrace -l command.

1. The application uses HiTraceMeter function interfaces to insert trace points. HiTraceMeter inputs tracing data into the kernel's ftrace buffer via kernel sysfs file interfaces.
2. The hitrace command-line tool reads tracing data from the kernel ftrace buffer and outputs it to device files.