写点什么

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

作者:轻口味
  • 2025-03-11
    北京
  • 本文字数:1928 字

    阅读完需:约 6 分钟

【每日学点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:


@Componentstruct 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@Componentstruct 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@Componentstruct 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%’) }}
@Componentstruct 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.


发布于: 刚刚阅读数: 3
用户头像

轻口味

关注

🏆2021年InfoQ写作平台-签约作者 🏆 2017-10-17 加入

Android、音视频、AI相关领域从业者。 欢迎加我微信wodekouwei拉您进InfoQ音视频沟通群 邮箱:qingkouwei@gmail.com

评论

发布
暂无评论
【每日学点HarmonyOS Next知识】多继承、swiper容器、事件传递、滚动安全区域、提前加载网络图片_HarmonyOS_轻口味_InfoQ写作社区