宫格导航 -- 纯血鸿蒙组件库 AUI
摘要：
宫格导航(A_GirdNav)：可设置导航数据，建议导航项超过 16 个，可设置“更多”图标指向的页面路由。最多显示两行，手机每行最多显示 4 个图标，折叠屏每行最多 6 个图标，平板每行最多 8 个图标。多余图标通过“更多”图标跳转。
一、组件调用方式
宫格导航组件的调用非常简单，只需要输入 A_GirdNav ，然后给属性 data（导航数据）和 moreRouter（“更多”图标指向的页面路由）赋值即可。在 data 当中需要给文字、图标和跳转的路由赋值。如下图所示：
页面调用代码如下：
本地模拟器下浅色模式和深色模式运行效果如下：
二、在线排版
在会员页面或管理后台的页面当中选择一个页面，比如“首页”，然后点击“页面设计”。如下图所示：
现在“首页”是一个空页面，还没有任何组件。展开左侧组件库中的“导航组件”分组，将“宫格导航组件”拖拽到页面中，如下图所示：
选择右侧“组件设置”下的“宫格导航”组件，点击“配置数据”按钮，可以根据自己的业务需要，新增、删除或修改每一项配置，如下图所示：
现在，切换到代码魔法页面，我们可以在侧栏菜单这里选择“纯血鸿蒙”，（可以切换为深色模式，看代码更舒适），然后点击“生成代码”，如下图所示：
在生成的鸿蒙项目中，展开特性层（features）,选择 home 模块，找到 /src/main/ets/view 目录下的 HomeView.ets 页面，查看生成的代码，如下图所示：
三、源码解析
宫格导航组件支持两个属性，一个是 data（导航数据，建议导航项超过 16 个），另外一个是 moreRouter（“更多”图标指向的页面路由）：
卡片导航数据 data 是一个数组 Array<NavigationModel>，其中导航 Model 的数据结构如下，含三个字段：导航的文字（text）、导航图标（icon）和跳转页面的路由（router）。
继续分析宫格导航组件 A_GirdNav 的源码，在 aboutToAppear() 这个生命周期当中，对设备为折叠屏、平板和手机时的导航数据做了差异化的处理，以实现“一多”适配。其中，设备为折叠屏时，一行最多显示 6 个图标，最多显示两行。当总的图标数（每个图标对应一项导航数据）小于等于 6 个时，将所有图标放入一组数据；当总图标数大于 6 个时分为两组数据，第一组数据取前六项导航数据，第二组数据分两种情况：当总图标数大于 12 个时（超过两行），则将第 7-11 个图标放入第二组数据，然后加上一个“更多”图标；如果总图标数不超过 12 个图标，则将第 7 个到最后的图标放入第二组数据。如下图所示：
设备为平板时，一行最多显示 8 个图标，最多显示两行。当总的图标数小于等于 8 个时，将所有图标放入一组数据；当总图标数大于 8 个时分为两组数据，第一组数据取前八项导航数据，第二组数据分两种情况：当总图标数大于 16 个时（超过两行），则将第 9-15 个图标放入第二组数据，然后加上一个“更多”图标；如果总图标数不超过 16 个图标，则将第 9 个到最后的图标放入第二组数据。如下图所示：
设备为手机时，一行最多显示 4 个图标，最多显示两行。当总的图标数小于等于 4 个时，将所有图标放入一组数据；当总图标数大于 4 个时分为两组数据，第一组数据取前四项导航数据，第二组数据分两种情况：当总图标数大于 8 个时（超过两行），则将第 5-7 个图标放入第二组数据，然后加上一个“更多”图标；如果总图标数不超过 8 个图标，则将第 5 个到最后的图标放入第二组数据。如下图所示：
最后，将原始导航数据中的图标数据做了预处理，变为符合鸿蒙资源命名规则的方式，如下代码所示：
使用自定义构建函数 buildGirdNavigation 展示两组导航数据，如下图所示：
ArkUI 提供了一种轻量的 UI 元素复用机制 @Builder，其内部 UI 结构固定，仅与使用方进行数据传递，开发者可以将重复使用的 UI 元素抽象成一个方法，在 build 方法里调用。为了简化语言，我们将 @Builder 装饰的函数也称为“自定义构建函数”。使用 @Builder 装饰自定义构建函数 buildGirdNavigation，通过 ForEach 循环每一组导航数据，内部通过 Image 组件包装图标，Text 组件包装文字，使用点击事件实现页面路由跳转，如下图所示：
还未添加个人签名 2025-04-29 加入
还未添加个人简介
评论