【每日学点HarmonyOS Next知识】重叠次序、对话框位置、事件总线、PageMap ...

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

WebView设置层级显示可以通过z序控制来实现，参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-z-order-V5
zIndex
zIndex(value: number)
设置组件的堆叠次序。
参数：
参数名范例必填说明valuenumber是同一容器中兄弟组件显示层级关系。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。当不涉及新增或减少兄弟节点，动态改变zIndex时会在zIndex改变前层级次序的底子上进行稳定排序。 示例（设置组件堆叠次序）

1. // xxx.ets
2. @Entry
3. @Component
4. struct ZIndexExample {
5.   build() {
6.     Column() {
7.       Stack() {
8.         // stack会重叠组件, 默认后定义的在最上面，具有较高zIndex值的元素在zIndex较小的元素前面
9.         Text('1, zIndex(2)')
10.           .size({ width: '40%', height: '30%' }).backgroundColor(0xbbb2cb)
11.           .zIndex(2)
12.         Text('2, default zIndex(1)')
13.           .size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart)
14.           .zIndex(1)
15.         Text('3, zIndex(0)')
16.           .size({ width: '90%', height: '80%' }).backgroundColor(0xc1cbac).align(Alignment.TopStart)
17.       }.width('100%').height(200)
18.     }.width('100%').height(200)
19.   }
20. }

复制代码

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

参考代码：

1. import window from '@ohos.window'
2. import { data } from '@kit.TelephonyKit'
4. @Entry
5. @Component
6. export struct LightPublishMine {
7.   private window?: window.Window
8.   @State keyboardHeightVp: number = 0
9.   @State navHeight: number = 0
10.   @State safeAreaTop: number = 0
12.   aboutToAppear() {
13.     window.getLastWindow(getContext(this)).then((win) => {
14.       this.window = win
15.       if (this.window) {
16.         this.navHeight = px2vp(this.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
17.           //导航条高度
18.           .bottomRect.height
19.         )
20.         this.safeAreaTop = px2vp(this.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)
21.         this.window.on('keyboardHeightChange', (data) => {
22.           console.info('Succeeded in enabling the listener for keyboard height changes. 键盘 Data: ' + data);
23.           this.keyboardHeightVp = px2vp(data)
24.           console.info('Succeeded in enabling the listener for keyboard height changes. Data: ' + (this.keyboardHeightVp - this.navHeight));
25.           console.info('Succeeded in enabling the listener for keyboard height changes. 导航条Data: ' + this.navHeight);
26.         });
27.       }
28.     })
29.   }
31.   aboutToDisappear() {
32.     if (this.window) {
33.       this.window.off('keyboardHeightChange')
34.       this.window = undefined
35.     }
36.     this.keyboardHeightVp = 0
37.   }
39.   build() {
40.     Row() {
41.       Column() {
42.         TextInput().backgroundColor(Color.White)
43.         Blank().backgroundColor(Color.Red).height(this.keyboardHeightVp - this.navHeight).width('100%')
44.       }.width('100%')
45.     }
46.     .height('100%')
47.     .backgroundColor(Color.Green)
48.     .alignItems(VerticalAlign.Bottom)
49.     .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])
50.   }
51. }

复制代码

1. @Entry
2. @Component
3. struct CustomDialogUser {
4.   dialogController: CustomDialogController = new CustomDialogController({
5.     builder: CommentInputDialog({}),
6.     alignment: DialogAlignment.Bottom,
7.     customStyle: true,
8.     offset: { dx: 0, dy: 100 }
9.   })
10.   build() {
11.     Column() {
12.       Button('click me')
13.         .onClick(() => {
14.           this.dialogController.open()
15.         })
16.     }.width('100%').height('100%').backgroundColor(Color.Red)
17.   }
18. }
19. 可以将customStyle设置为true，并且给弹框内部的Column设置偏移.offset({ x: 0, y: 20})
21. @CustomDialog
22. export struct CommentInputDialog{
23.   private statusBarHeight: number = (AppStorage.get('statusBarHeight') as number);
24.   controller?: CustomDialogController
25.   private commentContent: string = ''
26.   onTap: (content: string) => void = () => {
27.   };
29.   build() {
30.     Column(){
31.       Image($r('app.media.black_close_icon'))
32.         .width(26)
33.         .height(26)
34.         .onClick(() =>{
35.           this.controller?.close();
36.         })
38.       TextArea({ placeholder: '我来说两句...', text: this.commentContent})
39.         .placeholderColor($r('app.color.color909099'))
40.         .backgroundColor($r('app.color.colorF7F8F9'))
41.         .borderRadius(4)
42.         .placeholderFont({
43.           size: '17fp',
44.           family: CommonConstants.SI_YUAN
45.         })
46.         .backgroundColor(Color.White)
47.         .enterKeyType(EnterKeyType.Done)
48.         .defaultFocus(true)
49.         .onChange((value) => {
50.           this.commentContent = value;
51.         }).margin({top: 10, bottom: 10})
52.         .layoutWeight(1)
54.       Text('确认')
55.         .width(60)
56.         .height(30)
57.         .fontColor(Color.White)
58.         .fontSize('14fp')
59.         .fontFamily(CommonConstants.SI_YUAN)
60.         .textAlign(TextAlign.Center)
61.         .backgroundColor($r('app.color.colorF21333'))
62.         .borderRadius(15)
63.         .onClick(() =>{
64.           this.onTap(this.commentContent)
65.         })
66.     }
67.     .width(CommonConstants.FULL_PERCENT)
68.     .height(210 + this.statusBarHeight)
69.     .padding({left: 15, top: 15, right: 15, bottom: 10 + this.statusBarHeight })
70.     .alignItems(HorizontalAlign.End)
71.     .backgroundColor($r('app.color.colorF1F2F3'))
72.     .borderRadius({topLeft: 15, topRight: 15})
73.     .offset({ x: 0, y: 20}) // 设置偏移
74.   }
75. }

复制代码

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（）{}格式，如下：

1. @Builder
2. PagesMap(name: string) {
3.   if (name === 'Page01') {
4.     Page01()
5.   }
6.   else if (name === 'Page02') {
7.     Page02()
8.   }
9.   else if (name === 'Page03') {
10.     Page03()
11.   }
12.   else if (name === 'Page04') {
13.     Page04()
14.   }
15. }

复制代码

5、HarmonyOS 一个列表有超过10种以上的item范例，有什么好的分发处理本领吗？

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

1. if (param.equals(value1)) {
2.   doAction1(someParams);
3. } else if (param.equals(value2)) {
4.   doAction2(someParams);
5. } else if (param.equals(value3)) {
6.   doAction3(someParams);
7. }
8. // ...
9. 可重构为
11. Map<?, Function<?> action> actionMappings = new HashMap<>(); // 这里泛型 ? 是为方便演示，实际可替换为你需要的类型
13. // When init
14. actionMappings.put(value1, (someParams) -> { doAction1(someParams)});
15. actionMappings.put(value2, (someParams) -> { doAction2(someParams)});
16. actionMappings.put(value3, (someParams) -> { doAction3(someParams)});
18. // 省略 null 判断
19. actionMappings.get(param).apply(someParams);

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。