【每日学点HarmonyOS Next知识】多继承、swiper容器、事件传递、滚动安全区域、提前加载网络图片

1、HarmonyOS ArkTS如何让一个类可以具备其他多个类的能力？

ArkTS如何让一个类可以具备其他多个类的能力，类似于多继承。

接口支持多继承。类不支持，其只支持单继承。 （报错：Classes can only extend a single class. ）

接口多继承：

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

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

2、HarmonyOS swiper 容器的.displayCount(3,true) 设置为每组显示三个，但是底部的指示器还是 list.size的数量。怎么设置指示器也是对应的 list.size/3的个数？

swiper 一屏显示3个或者多个，如何保证 指示器的数量不是lis.size的数量，而是数组/3的个数。

若是想在同一个窗口显示多个相同组件，可以在组件外层加一层组件实现，如：data长度未5时导航点个数即为5，每个窗口显示3张图片

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、HarmonyOS 事件传递最佳实践咨询？

1. 点击事件在兄弟组件、或父组间触发，子组件消费的场景，是否有最佳实践；
2. 父组间分发给子组件的事件（比如 page 的 back），如果父组间需要返回值，有没有什么好的做法？

父子组件间双向通信可参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-component-state-management-V5

父组件调用子组件方法，

参考demo：

@Component
struct Child {
  @State private text: string = '初始值'
  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 {
  // ChildRef = new ChildController()
  @State noShow: boolean = false
  build() {
    Column() {
      Text('获取Child的exposeMethods!').fontSize('18vp').fontColor(Color.Gray)
      Divider()
      Child({ controller: ChildRef })
      Child()
      Button('Parent调用childer的changeText').onClick(() => {
        ChildRef.changeText('Parent调用childer的changeText')
      })
    }
  }
}

子组件调用父组件方法可参考demo：
@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('事件')
        .onClick(()=>{
          if (this.onClickOK !== undefined) {
            this.onClickOK()
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

4、HarmonyOS scroll安全区域问题？

当没输入弹出软件盘的时候 布局正常 scroll 高度正常，当软键盘弹起来时候scroll布局高度产生问题 理论上scroll滑动区域不应该超过 顶部的titlebar

可以在Column容器下使用expandSafeArea属性实现避让。

参考代码如下：

.expandSafeArea([SafeAreaType.KEYBOARD]) 

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-expand-safe-area-V5

!\[Pasted image 20250128205440.png]

5、HarmonyOS 如何提前加载网络图片然后再需要的时候通过image组件显示？

建议使用三方库imageknife实现图片缓存的能力，说明文档地址如下：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fimageknife

ImageKnife is a specially crafted image loading and caching library for OpenHarmony, optimized for efficiency, lightness, and simplicity.