【OpenHarmony】 鸿蒙 UI开发之 ohos_highlightguide

<hr> 往期笔录记录：

鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

记录一场鸿蒙开发岗位面试履历~

一连更新中……

<hr> 介绍

基于OpenHarmony的高亮型新手引导组件，通过高亮地区与蒙版背景的明暗度对比，利用户快速锁定重点功能，快速掌握应用根本利用方法。

下载安装

1.安装

1. ohpm install @ohos/high_light_guide

复制代码

2.在需要利用的页面导入引导页组件，如Index.ets:

1. import { HighLightGuideBuilder,HighLightGuideComponent,Controller,GuidePage,HighLightShape,RectF} from '@ohos/high_light_guide'

复制代码

利用说明

1. // 引入引导页
2. import { Controller, GuidePage, HighLightGuideBuilder, HighLightGuideComponent, RectF } from '@ohos/high_light_guide'
4. private builder: HighLightGuideBuilder | null = null;
5. private controller: Controller | null = null;
7. // 初始化引导页构建类
8. aboutToAppear() {
9.   this.builder = new HighLightGuideBuilder()
10.     .setLabel('guide1')
11.     .alwaysShow(true)
12.     .addGuidePage(GuidePage.newInstance()
13.       .addHighLight('Simple')
14.       .addHighLight(new RectF(0, 310, 200, 360))
15.       .setHighLightIndicator(this.SimpleIndicator))
16. }
18. build() {
19.   Column() {
20.     Stack() {
22.       // 添加引导页布局
23.       HighLightGuideComponent({
24.         highLightContainer: this.HighLightComponent, // 引导页覆盖时的内容布局插槽
25.         currentHLIndicator: null, // 引导页的引导层插槽
26.         builder: this.builder, // 引导页的通用配置构建类
27.         onReady: (controller: Controller) => { // 引导页准备好的回调，获取引导页控制器
28.           this.controller = controller;
29.         }
30.       })
31.     }
32.   }
33.   .width('100%')
34. }
36. @Builder
37. private HighLightComponent() {
38.   Column() {
39.     ... // 布局内容
40.   }.alignItems(HorizontalAlign.Start)
41.   .width('100%')
42.   .height('100%');
43. }
45. @Builder
46. private SimpleIndicator() {
47.   ... // 引导层内容
48. }

复制代码

接口说明

HighLightGuideBuilder
引导页组件的通用设置项构建类。
setLabel
public setLabel(label: string): HighLightGuideBuilder;
为引导页设置label标签，用于生存引导页的已显示次数。
参数：
    参数名   范例   必填   说明         label   string   是   引导页的标签名称。   返回值：
    范例   说明         HighLightGuideBuilder   引导页通用设置项的构建类。   setShowCounts
public setShowCounts(count: number): HighLightGuideBuilder;
配合引导页label标签，限制引导页组件的显示次数，显示次数需要设置为正整数，alwaysShow为true时失效。
参数
    参数名   范例   必填   说明         count   number   是   引导页的显示次数。   返回值：
    范例   说明         HighLightGuideBuilder   引导页通用设置项的构建类。   alwaysShow
public alwaysShow(isAlways: boolean): HighLightGuideBuilder;
设置组件是否永久显示，优先级高于setShowCounts方法，设置为true时，setShowCounts方法失效。
    参数名   范例   必填   说明         isAlways   boolean   是   引导页是否永久显示。   返回值：
    范例   说明         HighLightGuideBuilder   引导页通用设置项的构建类。   addGuidePage
public addGuidePage(page: GuidePage): HighLightGuideBuilder;
为引导页组件添加引导页设置。
    参数名   范例   必填   说明         page   GuidePage   是   引导页设置。   返回值：
    范例   说明         HighLightGuideBuilder   引导页通用设置项的构建类。   setOnGuideChangedListener
public setOnGuideChangedListener(listener: OnGuideChangedListener | null): HighLightGuideBuilder;
为引导页组件添加显示/移除监听。
参数：
    参数名   范例   必填   说明         listener   OnGuideCh  
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。