Multiple Inheritance, Swiper Container, Event Propagation, Scroll Safe Area, Preloading Network Images

[Daily HarmonyOS Next Learning] Multiple Inheritance, Swiper Container, Event Propagation, Scroll Safe Area, Preloading Network Images

1. How does HarmonyOS ArkTS enable a class to inherit capabilities from multiple other classes?

How can an ArkTS class possess capabilities from multiple other classes, similar to multiple inheritance?

• Interfaces support multiple inheritance, while classes only support single inheritance (error: Classes can only extend a single class.).

Multiple inheritance for interfaces:

interface AreaSize {
  calculateAreaSize(): number
}
interface Cal {
  Sub(a: number, b: number): number
}

interface Area extends AreaSize, Cal {
  areaName: string
  length: number
  width: number
}

2. For the HarmonyOS Swiper container, .displayCount(3, true) sets three items per group, but the bottom indicator still shows the total list size. How to set the indicator to list.size/3?

When a Swiper displays 3 or more items per screen, how to ensure the indicator count is array.length/3 instead of the total list size?

To display multiple identical components in the same window, wrap them in an outer component. For example, if the data length is 5, the number of navigation points is 5, and each window shows 3 images:

Swiper(this.swiperController) {
  LazyForEach(this.data, (item: string) => {
    Flex() {
      Image($r('app.media.startIcon'))
      Image($r('app.media.startIcon'))
      Image($r('app.media.startIcon'))
    }.height('20%')
  }, (item: string) => item)
}

3. Best practices for HarmonyOS event propagation?

1. What are the best practices for click events triggered between sibling components or parent components, where child components consume the events?
2. For events distributed from parent components to child components (e.g., page back events), how to handle scenarios where parent components need return values?

Bidirectional communication between parent and child components:

Refer to https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-component-state-management-V5.

Parent component calls child component methods:

@Component
struct Child {
  @State private text: string = 'Initial value'
  private controller: ChildController = new ChildController();

  aboutToAppear() {
    if (this.controller) {
      this.controller.changeText = this.changeText
    }
    console.log('aaa')
  }

  private changeText = (value: string) => {
    this.text = value
    console.log('bbb')
  }

  build() {
    Column() {
      Text(this.text)
    }
  }
}

class ChildController {
  changeText = (value: string) => {
    console.log('11111')
  }
}

export let ChildRef = new ChildController()

@Entry
@Component
struct Parent {
  @State noShow: boolean = false
  build() {
    Column() {
      Text('Access Child\'s exposeMethods!').fontSize('18vp').fontColor(Color.Gray)
      Divider()
      Child({ controller: ChildRef })
      Child()
      Button('Parent calls childer\'s changeText').onClick(() => {
        ChildRef.changeText('Parent calls childer\'s changeText')
      })
    }
  }
}

Child component calls parent component methods:

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Child({
          onClickOK: (): void => {
            console.log('test')
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct Child {
  onClickOK?: () => void;

  build() {
    Row() {
      Column() {
        Button('Event')
        .onClick(() => {
          if (this.onClickOK !== undefined) {
            this.onClickOK()
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

4. HarmonyOS scroll safe area issue?

When the software keyboard is not popped up, the layout and scroll height are normal. When the keyboard pops up, the scroll layout height is incorrect—the scrollable area should not exceed the top title bar.

Use the expandSafeArea attribute under the Column container to avoid conflicts:

.expandSafeArea([SafeAreaType.KEYBOARD]) 

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-expand-safe-area-V5

5. How to preload network images in HarmonyOS and display them via the Image component when needed?

It is recommended to use the third-party library imageknife for image caching capabilities.

Documentation: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fimageknife

ImageKnife is a purpose-built image loading and caching library for OpenHarmony, optimized for efficiency, lightness, and simplicity.