升级你的HarmonyOS体验：一窥功能引导与拖拽交换的独家本领 ...

媒介

在当今的移动应用开辟范畴，为了提供更加友好和直观的用户体验，开辟者们通常会集成多种交互功能来增强应用的互动性和易用性。在这些功能中，有两个功能显得尤为重要，它们分别是功能引导和元素拖拽交换。功能引导帮助用户快速熟悉应用的各种操纵和特性，而元素拖拽交换则允许用户以直观的方式对界面元素进行个性化排序和布局。本文将深入探讨在HarmonyOS平台上怎样实现这两个关键功能。

项目目次布局

2. ├── main
3. │   ├── ets
4. │   │   ├── entryability
5. │   │   │   └── EntryAbility.ets
6. │   │   ├── model
7. │   │   │   ├── AttributeModifier.ets         //  声明GridItem动态属性
8. │   │   │   ├── GridItemDeletionCtrl.ets      // gridItem删除管理
9. │   │   │   ├── headerIcon.ets                // icon 布局区域
10. │   │   │   └── iconInfo.ets
11. │   │   └── pages
12. │   │       └── Index.ets                     // 入口区域

复制代码

开辟流程

主要步调解说

• 导入模块：代码首先导入了<font style="color:rgb(26, 32, 41);">@ohos/high_light_guide</font>模块中的多个类，用于创建和管理高亮引导，以及<font style="color:rgb(26, 32, 41);">@ohos.animator</font>模块中的动画参数设置。同时，还导入了自定义的<font style="color:rgb(26, 32, 41);">HeaderApp</font>模子和<font style="color:rgb(26, 32, 41);">promptAction</font>用于表现对话框。
  
• 常量定义：定义了动画的持续时间、延迟、迭代次数、开始和结束的状态等常量。
  
• 组件定义：使用<font style="color:rgb(26, 32, 41);">@Entry</font>和<font style="color:rgb(26, 32, 41);">@Component</font>装饰器定义了一个名为<font style="color:rgb(26, 32, 41);">Index</font>的布局体组件。
  
• 成员变量：定义了用于构建和管理高亮引导的变量，以及动画参数、监听器等。
  
• **<font style="color:rgb(26, 32, 41);">aboutToAppear</font>**方法：在这个方法中，初始化了高亮引导构建器<font style="color:rgb(26, 32, 41);">HighLightGuideBuilder</font>，并设置了多个引导页面<font style="color:rgb(26, 32, 41);">GuidePage</font>，包括提示文本、高亮形状、动画效果等。
  
• **<font style="color:rgb(26, 32, 41);">build</font>**方法：构建了组件的UI布局，使用<font style="color:rgb(26, 32, 41);">Stack</font>布局包裹了一个<font style="color:rgb(26, 32, 41);">HighLightGuideComponent</font>，并设置了其属性和回调函数。
  
• 布局构建器：定义了多个布局构建器方法（如<font style="color:rgb(26, 32, 41);">highLightComponent</font>、<font style="color:rgb(26, 32, 41);">firstHigh</font>、<font style="color:rgb(26, 32, 41);">secondHigh</font>、<font style="color:rgb(26, 32, 41);">thirdHigh</font>、<font style="color:rgb(26, 32, 41);">endHigh</font>），用于创建具体的引导页面布局和交互逻辑。
  
• **<font style="color:rgb(26, 32, 41);">endHigh</font>**方法：在最后一个引导页面表现时，通过<font style="color:rgb(26, 32, 41);">promptAction.showDialog</font>表现一个对话框，用户确认后移除高亮引导。
  

关键配置

项目中我们使用了高亮插件<font style="color:rgb(64, 72, 91);">ohos_highlightguide</font> ， 在终端输入 指令
   ohpm install @ohos/high_light_guide
  来下载依赖， 并进行相关配置， 如下图所示

Index.ets 页面解说

Index 页面主要做的是高光处理 在页面加载的时间设定高光组件

1.   aboutToAppear() {
3.     // 设定高光组件
4.     this.builder = new HighLightGuideBuilder()
5.       .setLabel('guide')
6.       .alwaysShow(true)// 总是显示，调试时可以打开
7.       .setOnGuideChangedListener(this.visibleChangeListener)
8.       .setOnPageChangedListener(this.pageChangeListener)
9.       .addGuidePage(GuidePage.newInstance()// 第一处提示 点击编辑
10.         .setEverywhereCancelable(true)// 允许点击任意处关闭
11.         .addHighLight('edit')
12.         .setHighLightIndicator(this.firstHigh)
13.         .setExitAnimation(this.exitAnimatorParam))
14.       .addGuidePage(GuidePage.newInstance() // 设定第二处提示
15.         .setEverywhereCancelable(true)// 允许点击任意处关闭
16.         .addHighLight( 'high', HighLightShape.OVAL , 20)
17.         .setHighLightIndicator(this.secondHigh)
18.         .setExitAnimation(this.exitAnimatorParam))
19.       .addGuidePage(GuidePage.newInstance()// 设定第三处提示
20.         .setEverywhereCancelable(false)// 要求用户点击"我知道了"才能关闭提示
21.         .setHighLightIndicator(this.thirdHigh)
22.         .setEnterAnimation(this.enterAnimatorParam)
23.         .setExitAnimation(this.exitAnimatorParam))
24.       .addGuidePage(GuidePage.newInstance()// 设定第四处提示 移除高亮引导
25.         .setEverywhereCancelable(false)
26.         .setHighLightIndicator(this.endHigh));
27.   }

复制代码

代码中 addGuidePage 指代的是每一个高光插件， 通过setHighLightIndicator  来引用我们的高光的组件
高光组件相关

本次项目中主要用了 四个高光组件 ， 每个组件都进行了不同的定义 ， 从而来进行不同的高光展示

1. @Builder
2.   firstHigh(){
3.      Column(){
4.        Image($r("app.media.first_high_icon")).width(20).height(30).margin({right:'20', bottom:'10'})
5.        Text($r('app.string.first_high_tip'))
6.          .textAlign(TextAlign.Center)
7.          .fontColor(Color.White)
8.          .textAlign(TextAlign.Start)
9.          .onClick(() => {
10.            if (this.controller) {
11.              this.controller.showPage(1);
12.            }
13.          })
14.      }
15.      .justifyContent(FlexAlign.End)
16.      .alignItems(HorizontalAlign.End)
17.      .width('50%')
18.      .margin({ left: $r('app.string.first_high_margin'),
19.        top:'50'
20.      })
21.   }
23.   @Builder
24.   secondHigh() {
25.     Column() {
26.       Text('长按可拖动')
27.         .textAlign(TextAlign.Center)
28.         .fontColor(Color.White)
29.         .width('70%')
30.         .onClick(() => {
31.           if (this.controller) {
32.             this.controller.showPage(2);
33.           }
34.         })
35.          Image($r("app.media.second_high_icon"))
36.         .width($r('app.integer.sort_order_width'))
37.         .height($r('app.integer.sort_order_width'))
38.            .margin({top:10})
39.            .onClick(() => {
40.           if (this.controller) {
41.             this.controller.showPage(2);
42.           }
43.         })
44.     }
45.     .width($r('app.string.percent_one_hundred'))
46.     .margin({top:10})
47.     .alignItems(HorizontalAlign.Center)
48.     // position坐标是以页面顶部中心为原点，不包括系统状态栏
49.     // .position({ x: this.PosX, y: this.PosY})
50.   }
52.   @Builder
53.   thirdHigh() {
54.     Column() {
55.       Text($r('app.string.third_high_tip'))
56.         .fontColor(Color.Black)
57.         .backgroundColor($r('app.color.module_back_ground'))
58.         .textAlign(TextAlign.Center)
59.         .width($r('app.integer.first_indicator_width'))
60.         .height($r('app.integer.first_indicator_height'))
61.         .borderRadius($r('app.integer.border_radius'))
62.    Button($r('app.string.third_high_btn'))
63.         .fontColor(Color.Black)
64.         .margin($r('app.integer.common_margin'))
65.         .fontSize($r('app.integer.access_font_size'))
66.         .backgroundColor($r('app.color.first_direct_background'))
67.         .border({ width: 1, color: Color.White })
68.         .width($r('app.integer.high_light_button_width'))
69.         .onClick(() => {
70.           if (this.controller) {
71.             this.controller.showPage(3);
72.           }
73.         })
74.     }
75.     .width($r('app.string.percent_one_hundred'))
76.     .height($r('app.string.percent_one_hundred'))
77.     .alignItems(HorizontalAlign.Center)
78.     .justifyContent(FlexAlign.Center)
79.   }
81.   @Builder
82.   endHigh() {
83.     Column()
84.       .onAppear(() => {
85.         promptAction.showDialog({
86.           message: $r("app.string.end_high_tip"),
87.           buttons: [
88.             {
89.               text: $r('app.string.confirm_btn'),
90.               color: $r('app.color.toast_success_back_ground')
91.             }
92.           ],
93.           isModal: false
94.         }).then(() => {
95.           if (this.controller) {
96.             this.controller.remove();
97.           }
98.         })
99.       })
101.   }

复制代码

HeaderApp

在HeaderApp 组件中主要实现的是元素切换功能 ，核心代码如下

1.   Grid() {
2.         ForEach(this.AppDataArr, (item: AppInfo, index: number) => {
3.           GridItem() {
4.             IconWithNameView({ app: item })
5.           }
6.           .id(this.AppDataArr.indexOf(item) === SELECT_INDEX ? 'high' : '')
7.           .onAreaChange((oldValue: Area, newValue: Area) => {
8.             this.itemAreaWidth = Number(newValue.width);
9.           })
10.           .onTouch((event: TouchEvent) => {
11.             if (event.type === TouchType.Down) {
12.               this.movedItem = this.AppDataArr[index];
13.             }
14.           })
15.           .attributeModifier(this.GridItemDeletion.getModifier(item))
16.           .onClick(() => {
17.             if (!this.isEdit) {
18.               return;
19.             }
20.             this.GridItemDeletion.deleteGridItem(item, this.itemAreaWidth);
21.           })
22.         }, (item: AppInfo) => JSON.stringify(item))
23.       }
24.       .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
25.       .width($r('app.string.grid_title_width'))
26.       .layoutWeight(1)
27.       .supportAnimation(true)
28.       .editMode(this.isEdit)
29.       .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
30.         // 在onItemDragStart函数返回自定义组件，可在拖拽过程中显示此自定义组件。
31.         return this.pixelMapBuilder();
32.       })
33.       .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
34.         //  执行gridItem切换操作
35.         if (isSuccess && insertIndex < this.AppDataArr.length) {
36.           this.changeIndex(itemIndex, insertIndex);
37.         }
38.       })

复制代码

代码中定义的id 属性 主要为了高光时的元素查找
通过 onItemDragStart 和 onItemDrop 来实现元素的切换效果
同时 IconWithNameView 定义的是每个组件相关的展示内容，代码如下

1. @Component
2. struct IconWithNameView {
3.   private app: AppInfo = new AppInfo();
4.   @Consume isEdit: boolean;
6.   build() {
7.     Column() {
8.       Stack({ alignContent: Alignment.TopEnd }) {
9.         Image(this.app.icon)
10.           .width($r('app.string.icon_width'))
11.           .height($r('app.string.icon_height'))
12.           .interpolation(ImageInterpolation.High)
13.           .syncLoad(true)
14.           .draggable(false)
15.         if (this.isEdit) {
16.           Image($r('app.media.del_icon'))
17.             .width($r('app.string.del_icon_width'))
18.             .height($r('app.string.del_icon_height'))
19.             .markAnchor({ x: '-40%', y: '40%' })
20.             .draggable(false)
21.         }
22.       }
24.       Text(this.app.name)
25.         .width($r('app.string.icon_name_width'))
26.         .fontSize($r('app.string.icon_name_font_size'))
27.         .maxLines(1)
28.         .fontColor(Color.Black)
29.         .textAlign(TextAlign.Center)
30.         .margin({ top: 1 })
31.     }
32.     .width($r('app.string.icon_item_width'))
33.     .height($r('app.string.icon_item_height'))
34.     .justifyContent(FlexAlign.Center)
35.   }
36. }

复制代码

好了， 以上就是该项目标核心内容解说啦
总结

在harmonyos 逐渐强大的道路上每一份案例的支持都是尤为重要的， 等待每一位鸿蒙爱好者都贡献一份力量，共同美满harmonyos 的建设

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