HarmonyOs学习 实验五：Grid 组件实现一个 4x4 的网格布局

一、实验目的

使用 HarmonyOS 的 Grid 组件实现一个 4x4 的网格布局，每个网格项显示文本 "itemX"（X 为 0 到 15 的数字），并设置合适的样式。使用column、row、list、grid组件完成基本属性设置。用循环渲染显示list与grid组件列表项。

二、实验设备与环境

• 开发软件：DevEco Studio
• 操作系统：HarmonyOS
• API版本：API9

三、实验步骤

1.点击Creat Project创建一个项目

2.按图示步骤点击

3.填写项目名、api版本、Model和Node

4.在entry/src/main/resources/base/element下添加以下文件

color.json

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    },
    {
      "name": "grid_background",
      "value": "#007DFF"
    },
    {
      "name": "grid_text",
      "value": "#FFFFFF"
    }
  ]
}

string.json

{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },
    {
      "name": "item",
      "value": "item"
    }
  ]
}

5.最后在entry/src/main/ets/pages/Index.ets文件编写代码

@Entry
@Component
struct GridPage {
  // 创建一个包含 16 个元素的数组，用于渲染网格项
  private items: string[] = Array.from({ length: 16 }, (_, index) => `item${index}`);

  build() {
    Column() {
      Grid() {
        ForEach(this.items, (item: string) => {
          GridItem() {
            Text(item)
              .fontSize(16)
              .fontColor($r('app.color.grid_text'))
              .backgroundColor($r('app.color.grid_background'))
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
              .borderRadius(0)
          }
        }, item => item)
      }.columnsTemplate('1fr 1fr 1fr 1fr') // 设置为 4 列
      .rowsTemplate('1fr 1fr 1fr 1fr') // 设置为 4 行
      .columnsGap(1) // 设置列间距
      .rowsGap(1) // 设置行间距
      .height(300) // 设置网格高度
    }
    .width('100%') // 设置网格宽度
    .padding(12) // 添加内边距
    .backgroundColor(0xF1F3F5) // 设置背景颜色
  }
}

6.实现效果

四、总结

本次实验学习了HarmonyOS中Grid组件的使用方法和布局技巧，可应用到更复杂的界面设计中，为开发高质量HarmonyOS应用打下基础。遇到网格显示错误、资源引用失败等问题，通过检查代码语法、资源路径和属性设置解决。