【每日学点 HarmonyOS Next 知识】重叠顺序、对话框位置、事件总线、PageMap 显示、多表多 item 类型

2025-03-13
北京
本文字数：3481 字
阅读完需：约 11 分钟

1、HarmonyOS WebView 布局带输入框，底部文案被顶起布局重叠？

WebView 设置层级显示可以通过 z 序控制来实现，参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-z-order-V5

zIndexzIndex(value: number)设置组件的堆叠顺序。

参数：

示例（设置组件堆叠顺序）

// xxx.ets@Entry@Componentstruct ZIndexExample {  build() {    Column() {      Stack() {        // stack会重叠组件, 默认后定义的在最上面，具有较高zIndex值的元素在zIndex较小的元素前面        Text('1, zIndex(2)')          .size({ width: '40%', height: '30%' }).backgroundColor(0xbbb2cb)          .zIndex(2)        Text('2, default zIndex(1)')          .size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart)          .zIndex(1)        Text('3, zIndex(0)')          .size({ width: '90%', height: '80%' }).backgroundColor(0xc1cbac).align(Alignment.TopStart)      }.width('100%').height(200)    }.width('100%').height(200)  }}

复制代码

2、HarmonyOS 自定义 Dialog 居于页面底部，弹出的软键盘和 dialog 有很大间隙？

参考代码：

import window from '@ohos.window'import { data } from '@kit.TelephonyKit'
@Entry@Componentexport struct LightPublishMine {  private window?: window.Window  @State keyboardHeightVp: number = 0  @State navHeight: number = 0  @State safeAreaTop: number = 0
  aboutToAppear() {    window.getLastWindow(getContext(this)).then((win) => {      this.window = win      if (this.window) {        this.navHeight = px2vp(this.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)          //导航条高度          .bottomRect.height        )        this.safeAreaTop = px2vp(this.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)        this.window.on('keyboardHeightChange', (data) => {          console.info('Succeeded in enabling the listener for keyboard height changes. 键盘 Data: ' + data);          this.keyboardHeightVp = px2vp(data)          console.info('Succeeded in enabling the listener for keyboard height changes. Data: ' + (this.keyboardHeightVp - this.navHeight));          console.info('Succeeded in enabling the listener for keyboard height changes. 导航条Data: ' + this.navHeight);        });      }    })  }
  aboutToDisappear() {    if (this.window) {      this.window.off('keyboardHeightChange')      this.window = undefined    }    this.keyboardHeightVp = 0  }
  build() {    Row() {      Column() {        TextInput().backgroundColor(Color.White)        Blank().backgroundColor(Color.Red).height(this.keyboardHeightVp - this.navHeight).width('100%')      }.width('100%')    }    .height('100%')    .backgroundColor(Color.Green)    .alignItems(VerticalAlign.Bottom)    .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])  }}

复制代码

@Entry@Componentstruct CustomDialogUser {  dialogController: CustomDialogController = new CustomDialogController({    builder: CommentInputDialog({}),    alignment: DialogAlignment.Bottom,    customStyle: true,    offset: { dx: 0, dy: 100 }  })  build() {    Column() {      Button('click me')        .onClick(() => {          this.dialogController.open()        })    }.width('100%').height('100%').backgroundColor(Color.Red)  }}可以将customStyle设置为true，并且给弹框内部的Column设置偏移.offset({ x: 0, y: 20})
@CustomDialogexport struct CommentInputDialog{  private statusBarHeight: number = (AppStorage.get('statusBarHeight') as number);  controller?: CustomDialogController  private commentContent: string = ''  onTap: (content: string) => void = () => {  };
  build() {    Column(){      Image($r('app.media.black_close_icon'))        .width(26)        .height(26)        .onClick(() =>{          this.controller?.close();        })
      TextArea({ placeholder: '我来说两句...', text: this.commentContent})        .placeholderColor($r('app.color.color909099'))        .backgroundColor($r('app.color.colorF7F8F9'))        .borderRadius(4)        .placeholderFont({          size: '17fp',          family: CommonConstants.SI_YUAN        })        .backgroundColor(Color.White)        .enterKeyType(EnterKeyType.Done)        .defaultFocus(true)        .onChange((value) => {          this.commentContent = value;        }).margin({top: 10, bottom: 10})        .layoutWeight(1)
      Text('确认')        .width(60)        .height(30)        .fontColor(Color.White)        .fontSize('14fp')        .fontFamily(CommonConstants.SI_YUAN)        .textAlign(TextAlign.Center)        .backgroundColor($r('app.color.colorF21333'))        .borderRadius(15)        .onClick(() =>{          this.onTap(this.commentContent)        })    }    .width(CommonConstants.FULL_PERCENT)    .height(210 + this.statusBarHeight)    .padding({left: 15, top: 15, right: 15, bottom: 10 + this.statusBarHeight })    .alignItems(HorizontalAlign.End)    .backgroundColor($r('app.color.colorF1F2F3'))    .borderRadius({topLeft: 15, topRight: 15})    .offset({ x: 0, y: 20}) // 设置偏移  }}

复制代码

3、HarmonyOS ArkTS 项目有全局通知的类似 vue 的事件总线 eventbus 的方法吗？

调用 router.back()方法后，页面不会数据渲染，想要使用事件总线来调用页面数据更新，并且事件总线不与生命周期绑定，只要触发总线方法任何定义的地方都会被调用，无需在生命周期里才能调用

关于全局通知下面的文档有相关内容

通知服务公共事件定义链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-commoneventmanager-V5#commoneventmanagerpublish通知接口文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-notificationmanager-V5#notificationmanagerpublish

4、HarmonyOS navDestionation 函数中 Builder 的超过 3 个不能显示？

使用 Navigation，navDestination(this.PageMap)，这个 PageMap 只能显示第一和第二的 component，排在第三个位置的页面跳转后显示不出来。

可以尝试一下使用 if（）{} else if（）{}格式，如下：

@BuilderPagesMap(name: string) {  if (name === 'Page01') {    Page01()  }  else if (name === 'Page02') {    Page02()  }  else if (name === 'Page03') {    Page03()  }  else if (name === 'Page04') {    Page04()  }}

复制代码

5、HarmonyOS 一个列表有超过 10 种以上的 item 类型，有什么好的分发处理手段吗？

可以尝试表驱动的方法：对于逻辑表达模式固定的 if…else 代码，可以通过某种映射关系，将逻辑表达式用表格的方式表示；再使用表格查找的方式，找到某个输入所对应的处理函数，使用这个处理函数进行运算。

适用场景逻辑表达模式固定的 if…else

实现与示例：

if (param.equals(value1)) {  doAction1(someParams);} else if (param.equals(value2)) {  doAction2(someParams);} else if (param.equals(value3)) {  doAction3(someParams);}// ...可重构为
Map<?, Function<?> action> actionMappings = new HashMap<>(); // 这里泛型 ? 是为方便演示，实际可替换为你需要的类型
// When initactionMappings.put(value1, (someParams) -> { doAction1(someParams)});actionMappings.put(value2, (someParams) -> { doAction2(someParams)});actionMappings.put(value3, (someParams) -> { doAction3(someParams)});
// 省略 null 判断actionMappings.get(param).apply(someParams);