使用网格

介绍

本工程以ArkUI (C-API)的方式实现使用网格，演示网格容器组件原生节点的创建、布局、懒加载与ETS侧对接。

效果预览

固定行列网格	可滚动网格

使用说明

1. 在主界面，可以点击对应卡片，选择需要参考的组件示例。

2. 进入示例界面，查看参考示例。

3. 通过自动测试框架可进行测试及维护。

工程目录

entry/src/main
+--- cpp
|   ├── ArkUIBaseNode.h
|   ├── ArkUIColumnNode.h
|   ├── ArkUIGridItemNode.h
|   ├── ArkUIGridLayoutOptions.h
|   ├── ArkUIGridNode.h (网格组件C API封装)
|   ├── ArkUINode.h
|   ├── ArkUINodeAdapter.h
|   ├── ArkUITextNode.h
|   ├── CMakeLists.txt
|   ├── GridIrregularIndexesExample.cpp (可滚动网格组件示例)
|   ├── GridIrregularIndexesExample.h
|   ├── GridRectByIndexExample.cpp (固定行列网格组件示例)
|   ├── GridRectByIndexExample.h
|   ├── napi_init.cpp
|   ├── NativeEntry.cpp
|   ├── NativeEntry.h
|   ├── NativeModule.h
|   ├── ScrollableUtils.cpp
|   ├── ScrollableUtils.h
|   └── types
|       └── libentry
|           ├── Index.d.ts
|           └── oh-package.json5
├── ets
|   ├── entryability
|   |   └── EntryAbility.ets
|   ├── entrybackupability
|   |   └── EntryBackupAbility.ets
|   └── pages
|       ├── Index.ets
|       ├── PageGridIrregularIndexes.ets
|       └── PageGridRectByIndex.ets   

具体实现

• 网格组件常用属性接口封装在ArkUIGridNode，源码参考：ArkUIGridNode.h

  • 通过createNode(ARKUI_NODE_GRID)创建网格节点
  • 通过NODE_GRID_ROW_TEMPLATE和NODE_GRID_COLUMN_TEMPLATE设置网格行列数
  • 通过NODE_GRID_ROW_GAP和NODE_GRID_COLUMN_GAP设置网格行列间距
  • 通过NODE_GRID_LAYOUT_OPTIONS设置网格布局选项

• 可滚动网格组件示例参考：GridIrregularIndexesExample.cpp

  • 通过OH_ArkUI_GridLayoutOptions_SetIrregularIndexes设置用于分组的子组件索引
  • 通过ArkUINodeAdapter实现滚动过程中子组件懒加载

• 固定行列网格组件示例参考：GridRectByIndexExample.cpp

  • 通过OH_ArkUI_GridLayoutOptions_RegisterGetRectByIndexCallback设置获取每一个子组件占用行列数的回调，实现自由指定网格子组件的位置和占用的行列数。

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行，支持设备：华为手机。

2.HarmonyOS系统：HarmonyOS 6.0.2 Release及以上。

3.本示例需要使用DevEco Studio 6.0.0 Release (Build Version: 6.0.0.858, built on September 24, 2025)及以上版本才可编译运行。

4.HarmonyOS SDK版本：HarmonyOS 6.0.2 Release及以上。

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo code/DocsSample/ArkUISample/NdkGridSample > .git/info/sparse-checkout
git remote add origin https://gitcode.com/openharmony/applications_app_samples.git
git pull origin master