【关键字】
低代码平台、AGC、API6、网格布局、数据模型
【写在前面】
正式开工之前，先来说一下今天要实现的内容，今天会实现一个网格布局的展示，我会创建一个数据模型，然后网格列表的数据从数据模型中获取，从而实现一个动态展示的效果。
在实现之前，先来简单说一下什么是数据模型？
在使用低代码平台时我们会现在AppGallery Connect上面创建一个项目，然后在低代码平台的应用管理中创建元服务，之后就可以创建相应的数据模型提供给该元服务使用，通过这样一个流程我们就可以完成一个简单低代码元服务的开发了。在这个过程中创建的数据模型是一种云侧资源，简单理解就是云数据库，我们在云数据库中创建了相关数据表，表中定义相关字段，通过管理数据可以给数据表预置数据，在低码页面组件上绑定相关字段，从而展示带有数据的UI效果。
OK，废话不多说，开始具体实现吧。
1、页面布局
外层拖拽一个“网格布局”组件，设置宽100%，高200vp，在属性里面设置2行4列，行列间距都是10vp：
然后在网格布局内部拖拽一个“网格布局内容项”组件，设置宽高都是80vp：
然后在内部拖拽一个“垂直容器”，设置宽高为100%，填充父组件：
然后在垂直容器内部拖拽一个“图片”组件和一个“文本”组件，实现上图下文的排布，设置图片宽高为35vp，边框宽度为1vp，边框样式为实线，边框颜色为蓝色，边框圆角半径为10vp：
设置文本宽度100%，高30vp，字体大小为15fp：
完整的页面布局效果如下：
2、创建数据模型
创建一个数据模型“功能菜单测试”：
数据模型的相关字段定义如下：
通过管理数据预置了8条数据，实际开发中通过修改数据，我们就可以实现可配置的效果了：
3、绑定数据模型
回到低代码平台的编辑页面，点击页面左上角的“变量管理”---“新建变量”，自定义一个变量来获取数据模型中的数据：
创建完成之后变量管理的列表中就有刚刚的变量了：
然后选中编辑页面左下角组件树中的“网格布局内容项”组件，找到右侧“属性”面板的最下方，在“渲染”---“循环渲染”中选择刚刚创建的变量，记得选到records的这一层：
然后在组件树中选中“图片”组件，在右侧属性面板的“数据源”选项中切换到选择变量的模式，选择变量中“数据字段”item1中的icon字段：
同理，“文本”组件我们选择name字段：
OK，到这里数据获取及绑定我们就搞定了，最后打包运行一下，看看最后的效果如何。
4、效果展示
最后实现的效果如下：
今天的内容就这么多，下期再会！
标签：创建,布局,网格,HarmonyOS,组件,页面,数据模型,加载 From： https://www.cnblogs.com/mayism123/p/17669097.html