地图页面半模态交互

场景介绍

地图页面半模态交互是便捷生活类应用中高频使用场景之一，常用于地图导航类应用首页。

本示例基于BindSheet实现了地图应用的半模态交互页面，在页面上拉、下滑时，不影响用户与地图的交互，增强页面的灵活性，提升用户体验。

效果预览

实现思路

• 根据半模态页面内容设置不同高度的档位，保证每个档位都能完整显示半模态页面内容，避免显示不全，影响用户体验。
• 为了使半模态页面的存在不影响用户与地图交互，需将BindSheet的enableOutsideInteractive属性设置为true。
• 在BindSheet组件中实现onWillDismiss方法，避免半模态页面下滑至底部关闭。
• 半模态页面不需要关闭按钮时，需将BindSheet的showClose属性设置为false。
• 在BindSheet组件中实现onDetentsDidChange方法，初始化地图层的显示高度。

MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
  .height(this.mapWindowHeight)
  .margin({top: 0-this.heightVal})
  .bindSheet($$this.isShow, this.SheetBuilder(), {
    detents: [this.detentsMin, this.detentsMedium, this.detentsMax],
    preferType: SheetType.BOTTOM,
    showClose: false,
    enableOutsideInteractive: true,
    onWillDismiss: (() => {
    }),
    onDetentsDidChange: ((heightVal) => {
      if (this.heightVal > 0) {
        return;
      }
      this.heightVal = this.uiContext.px2vp(heightVal);
      if (this.heightVal >= (this.detentsMedium.valueOf() as number)) {
        return;
      }
      this.mapWindowHeight = this.windowHeight - this.heightVal + WINDOW_HEIGHT_OFFSET;
    })
  });

约束与限制

• 本示例支持API Version 20 Release及以上版本。
• 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。

权限说明

• 获取Internet网络权限：ohos.permission.INTERNET。
• 获取设备模糊位置信息权限：ohos.permission.APPROXIMATELY_LOCATION。
• 获取设备精确位置信息权限：ohos.permission.LOCATION。

工程目录

├──entry/src/main/ets                         // 代码区
│  ├──entryability
│  │  └─EntryAbility.ets
│  ├──entrybackupability
│  │  └─EntryBackupAbility.ets
│  ├──pages
│  │  └──MapHome.ets                          // 主页面
│  └──util
│     └──LogUtil.ets                          // 日志工具类
└──entry/src/main/resources                   // 应用资源目录

参考文档

绑定半模态页面(bindSheet)

半模态转场

map（地图显示功能）

开发准备

配置调试签名

代码下载

地图页面半模态交互示例代码