鸿蒙5.0开发进阶：舆图大头针选择位置并显示弹窗组件实现案例 ...

往期鸿蒙全套实战文章必看：（文中附带鸿蒙全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
  
• 鸿蒙HarmonyOS NEXT开发技能最全学习门路指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

介绍

本示例提供了大头针选择位置并显示弹窗组件的办理方案。该大头针组件分为三个状态，分别是静止态（舆图移动过程中，大头针无动画）、加载态（舆图制止移动，等待获取所在信息，大头针展示波纹动画表示数据加载中）、显示态（数据加载完成，弹窗显示所在相干信息）。开发者可根据需要直接引入该组件，根据具体使用场景，传入差别的数据，组件根据传入数据的环境显示差别的状态。由于使用场景中，大头针动画需要随时制止，因此选用@ohos.animator实现大头针的波纹和跳动动画。
结果预览图

使用说明
该大头针选择位置并显示弹窗组件入参详细说明如下：

• thumbTackState：用于设置大头针状态，ThumbTackState.EMPTY、ThumbTackState.LOADING、ThumbTackState.SHOWING。
  
• address：组件处于ThumbTackState.SHOWING状态时，需要显示的所在文本；组件处于其他状态时，需设置为null。
  
• tip：组件处于ThumbTackState.SHOWING状态时，需要显示的当前所在的一些提示，组件处于其他状态或无提示文本时，需设置为null。
  
• tipBackgroundColor：组件处于ThumbTackState.SHOWING状态时，提示文本的背景色。
  
• addrImage：组件处于ThumbTackState.SHOWING状态时，要展示的所在实景图，组件处于其他状态或无实景图时，需设置为null。
  
• onImageClickCallback：实景图被点击时回调
  
• onAddrClickCallback：所在被点击时回调
  
• thumbTackWidth：用于设置大头针的宽度
  
• animationFinishCallback：大头针跳动动画结束时回调
  

实现思路

场景：大头针选择位置并显示弹窗组件

• 通过原生组件组合实现大头针图标。
  

1.   RelativeContainer() {
2.     Column()
3.       ...
4.       .zIndex(0)
5.       .alignRules({
6.         bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
7.         middle: { anchor: '__container__', align: HorizontalAlign.Center }
8.       })
9.       .id('invisiblePost')
10.     Column()
11.       ...
12.       .alignRules({
13.         bottom: { anchor: 'invisiblePost', align: VerticalAlign.Top },
14.         middle: { anchor: 'invisiblePost', align: HorizontalAlign.Center }
15.       })
16.       .id('tackPost')
17.     Button()
18.       ...
19.       .alignRules({
20.         center: { anchor: 'tackPost', align: VerticalAlign.Top },
21.         middle: { anchor: 'tackPost', align: HorizontalAlign.Center }
22.       })
23.     if ((this.thumbTackState === ThumbTackState.LOADING)) {
24.       Button()
25.         ...
26.         .id('little1Circle')
27.         .zIndex(this.whiteHatZIdx)
28.         .alignRules({
29.           center: { anchor: 'tackPost', align: VerticalAlign.Top },
30.           middle: { anchor: 'tackPost', align: HorizontalAlign.Center }
31.         })
32.     }
33.   }

复制代码

• 通过@ohos.animator控制大头针的波纹动画及跳动动画。
  

1. // 跳动动画
2.   createVerticalPostAnimation() {
3.     this.postOffsetAnimator = animator.create({
4.       // 100, 大头针针尖位置偏移动画持续时间100ms
5.       duration: 100,
6.       easing: 'fast-out-slow-in',
7.       // 200, 动画延时200ms执行
8.       delay: 200,
9.       fill: 'forwards',
10.       direction: 'alternate',
11.       iterations: 2,
12.       begin: 0,
13.       end: this.thumbTackWidth * ThumbTackCommonConstants.TACK_POST_ANIMATION_OFFSET_RATIO
14.     })
16.     ...
17.    
18.     this.postOffsetAnimator.onFrame = (value) => {
19.       this.tackPostOffset = value;
20.     }
21.     this.postHeightAnimator = animator.create({
22.       // 大头针针柄长度动画持续200ms
23.       duration: 200,
24.       easing: 'fast-out-slow-in',
25.       delay: 0,
26.       fill: 'forwards',
27.       direction: 'alternate',
28.       iterations: 2,
29.       begin: this.thumbTackWidth * ThumbTackCommonConstants.TACK_POST_HEIGHT_RATIO,
30.       end: this.thumbTackWidth * ThumbTackCommonConstants.TACK_POST_ANIMATION_HEIGHT_RATIO
31.     })
32.    
33.     ...
34.    
35.     this.postHeightAnimator.onFrame = (value) => {
36.       this.tackPostHeight = value;
37.     }
38.   }

复制代码

• 通过Path实现所在提示地区的不规则边框。
  

1.   // this.pathCmd = 'M0 0 C' + vp2px(2.5) + ' ' + vp2px(0) + ' ' + vp2px(5.6) + ' ' + vp2px(2.4) + ' '
2.   //  + vp2px(6.2) + ' ' + vp2px(4.9) + ' L' + vp2px(10) + ' ' + vp2px(20) + ' L0 ' + vp2px(20) + 'Z';
3.   Path({
4.     width: AddressPopupCommonConstants.TIP_AREA_HEIGHT,
5.     height: AddressPopupCommonConstants.TIP_AREA_HEIGHT,
6.     commands: this.pathCmd
7.   })
8.     .fill(this.addressTipBackgroundColor)
9.     .strokeOpacity(0)

复制代码

高性能知识点

不涉及
工程结构&模块类型

1. mapthumbtack                                // har类型
2. |---src/main/ets/components
3. |   |---LocationAndPopupComponent.ets       // 视图层-大头针选择位置并显示弹窗组件
4. |   |---AddressPopUpComponent.ets           // 视图层-依赖的地址显示组件
5. |   |---ThumbTackComponent.ets              // 视图层-依赖的大头针组件
6. |---src/main/ets/model
7. |   |---CommonConstants.ets                 // 模型层-通用常量

复制代码

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