如果你第一次打开这个示例,别急着看一堆 API。这个项目最值得先搞懂的是一句话:它让底部页签根据用户的握持习惯,自动靠左或靠右,减少大屏设备上的够手成本。

项目地址放这里,后面每篇都会用它做参照:https://gitcode.com/HarmonyOS_Samples/SmartReach/tree/master

先看效果,心里有个画面

手机、折叠屏、平板的运行效果差别不大,核心都是底部悬浮页签,只是屏幕越大,跟手带来的价值越明显。

手机效果

Ink notes style diagram illustrating 'Smart Reach'

折叠屏效果

平板效果

项目到底在做什么

README.md 里说得很直接:本示例基于 HdsTabs 组件,实现智感握姿界面。翻译成小白能懂的话就是:

  • 页面内容用瀑布流展示,像常见的图片流 App;
  • 底部导航不是死贴在屏幕底部,而是悬浮显示;
  • 系统检测到左手握持时,悬浮按钮和交互区域偏左;
  • 检测到右手握持时,它再偏回右侧;
  • 折叠屏和平板这种大屏设备上,体验会明显舒服一些。

这不是一个复杂业务 App,但它特别适合学习 HarmonyOS7 里的“一多适配 + 手势感知 + ArkUI 组件组合”。

入口文件从哪里看

这个项目的主入口在 entry/src/main/ets/pages/MainPage.ets。页面组件大概长这样:

@Entry
@ComponentV2
struct MainPage {
  @Local globalInfoModel: GlobalInfoModel =
    AppStorageV2.connect(GlobalInfoModel, StorageKey.GLOBAL_INFO) ?? new GlobalInfoModel();

  private controller: HdsTabsController = new HdsTabsController();
  private tabsBar: BottomTabBarStyle[] = TabsBarModel.getTabBarByPage() ?? [];

  build() {
    HdsNavigation() {
      RelativeContainer() {
        HdsTabs({ controller: this.controller }) {
          Repeat(this.tabsBar).each((repeatItem: RepeatItem<BottomTabBarStyle>) => {
            TabContent() {
              WaterFlowView({ currentTabIndex: repeatItem.index })
            }
            .tabBar(repeatItem.item)
          })
        }
      }
    }
  }
}

这里别被 HdsNavigationHdsTabsRepeat 吓到。你可以先把它理解成三层:

Ink flowchart showing recommended source code read

HdsNavigation 管标题栏,HdsTabs 管底部页签,WaterFlowView 管每个页签里的内容。

运行前最容易忽略的配置

这个项目不是普通按钮点击示例,它需要动作感知能力,所以 module.json5 里申请了 ohos.permission.DETECT_GESTURE

"requestPermissions": [
  {
    "name": "ohos.permission.DETECT_GESTURE",
    "reason": "$string:gesture_reason",
    "usedScene": {
      "abilities": ["SmartreachAbility"],
      "when": "inuse"
    }
  }
]

如果你把代码复制到自己的项目里,却忘了这段权限,后面的 holdingHandChanged 监听大概率不会按预期工作。

建议你按这个顺序读源码

我不建议一上来从 EntryAbility.ets 逐行啃。更舒服的顺序是:

  1. README.md:先知道它想实现什么;
  2. MainPage.ets:看主页面怎么拼;
  3. TabsBarModel.ets:看底部导航数据怎么生成;
  4. WaterFlowView.ets:看内容区怎么适配;
  5. WindowUtil.ets:看大屏和安全区怎么处理。

这样读,脑子里会先有界面,再有数据,再有系统能力,不会迷路。

写在最后

这篇先不深挖 API,先把项目轮廓搭起来。智感握姿看起来像一个“小功能”,但它背后串了不少 HarmonyOS7 开发里的核心能力。下一篇我们从权限开始讲,因为没有权限,后面的手势监听都是空中楼阁。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐