HarmonyOS 6.0网格布局：用「格子游戏」拼出自适应界面

【摘要】本文以HarmonyOS 6.0网格容器（Grid）为核心，生动解析其网格布局功能。Grid通过行列分割形成单元格，实现界面元素的规则排列，适用于九宫格、日历、计算器等常见场景。文章详细介绍了columnsTemplate（列数/列宽）、rowsTemplate（行数/行高）、rowGap/columnGap（间距）4个核心属性，并通过代码示例演示基础三列布局的实现。特别强调GridIte

Coding Sir

1175人浏览 · 2025-10-22 19:38:46

Coding Sir · 2025-10-22 19:38:46 发布

Hello！我是小邢哥——13年编程老炮，实战派技术人，平时爱拆解编程技巧、分享副业心得，记录程序员的进阶路，AI时代陪大家一起稳稳向前。

打开手机里的相册APP，九宫格排列的照片整齐有序；点开日历，日期按行按列精准分布；使用计算器时，数字按键方方正正铺满屏幕——这些我们习以为常的界面布局，全靠HarmonyOS 6.0的网格容器（Grid）“撑腰”。

网格布局就像一款灵活的“格子游戏”，用行和列分割出规则的单元格，再把组件“放”进格子里，就能拼出千变万化的界面。今天咱们就从“玩游戏”的角度，吃透Grid的核心玩法。

一、网格布局：本质是场“格子拼图”

提到“网格”，你肯定会想到笔记本上的方格纸、棋盘上的黑白格子，Grid的核心逻辑和它们如出一辙——

Grid容器就是一张“方格纸”，我们可以先规定这张纸要画多少行、多少列，行与行之间留多大缝隙，列与列之间隔多远。

而GridItem就是“拼图块”，每个拼图块可以占一个格子，也能跨多个格子摆放，最终组合成完整的界面。

比如九宫格照片墙，就是把“方格纸”分成3行3列，每个照片作为一个“拼图块”占一个格子，整齐排列后就成型了。

用一段极简代码感受下“3列网格”的魔力，这是最基础的“格子拼图”：

Grid() {
  // 第一个拼图块（格子1）
  GridItem() {
    Text("1")
      .width("100%")
      .height("100%")
      .backgroundColor("#FFE4E1")
      .textAlign(TextAlign.Center)
  }
  // 第二个拼图块（格子2）
  GridItem() {
    Text("2")
      .width("100%")
      .height("100%")
      .backgroundColor("#E0F7FA")
      .textAlign(TextAlign.Center)
  }
  // 第三个拼图块（格子3）
  GridItem() {
    Text("3")
      .width("100%")
      .height("100%")
      .backgroundColor("#F3E5F5")
      .textAlign(TextAlign.Center)
  }
}
// 核心配置：3列等宽，列间距10
.columnsTemplate("1fr 1fr 1fr")
.columnGap(10)
.width("90%")
.height(150)
.margin({ top: 20 })

运行后你会看到：3个彩色方块并排排列，每块宽度相等，中间还留着均匀的缝隙——这就是Grid最基础的“均分布局”能力，也是它比其他布局更擅长“规则排列”的核心原因。

二、核心技能：4个属性玩转“格子规则”

要玩好“格子游戏”，必须掌握4个核心“规则设定”属性，它们分别负责控制“列数”“行数”“行间距”“列间距”，灵活组合就能实现各种布局需求。

1. columnsTemplate：定“列数”和“列宽占比”

这是Grid的“灵魂属性”，用来规定“方格纸”有多少列，以及每列的宽度占比，格式是用空格分隔的“占比单位”，最常用的单位是fr（fraction，比例单位）。

举几个常见配置场景，一看就懂：

.columnsTemplate("1fr 1fr 1fr")：3列等宽，每列占总宽度的1/3，适合九宫格、三列商品列表。
.columnsTemplate("2fr 1fr")：2列布局，第一列宽度是第二列的2倍，适合“主内容+侧边栏”的界面。
.columnsTemplate("1fr 2fr 1fr")：3列布局，中间列宽度是两侧的2倍，适合中间突出的内容展示。

简单说，fr就像“分蛋糕”，总份数是所有fr值相加，每列占对应份数的比例。比如“2fr 1fr”总份数是3，第一列占2份，第二列占1份。

2. rowsTemplate：定“行数”和“行高占比”

和columnsTemplate对应，用来规定“方格纸”的行数和每行的高度占比，格式完全一致，单位也常用fr。

比如要做一个2行3列的布局，且第一行高度是第二行的2倍，只需添加：

.rowsTemplate("2fr 1fr")
.rowGap(10)

这里rowGap是行与行之间的缝隙，和下面要讲的columnGap对应，用来控制格子间的间距。

3. rowGap & columnGap：控“格子间距”

这两个属性很简单，分别控制“行与行之间的垂直间距”和“列与列之间的水平间距”，单位可以是px、vp等，作用是让格子布局不拥挤，更有呼吸感。

比如做九宫格时，设置.rowGap(10).columnGap(10)，照片之间就会留出10vp的缝隙，不会紧贴在一起，视觉效果更舒适。

三、实战场景：从“九宫格”到“计算器”的万能应用

Grid的“规则排列+灵活占比”特性，让它成为很多场景的“最优解”，这3类经典场景一定要掌握：

1. 九宫格布局：照片/图标墙首选

相册的照片墙、APP的功能图标墙，几乎都是用Grid实现的。核心配置是“3行3列等宽等高”，代码思路如下：

      Grid() {
        // 循环生成9个GridItem（模拟9张照片）
        ForEach(Array.from({ length: 9 }), (n:number, index) => {
          GridItem() {
            Image($r(`app.media.mn`+(index%3+1))) // 模拟照片资源
              .width("100%")
              .height("100%")
              .objectFit(ImageFit.Cover)
              .borderRadius(8)
          }
        })
      }
      .columnsTemplate("1fr 1fr 1fr") // 3列等宽
      .rowsTemplate("1fr 1fr 1fr")    // 3行等高
      .rowsGap(8)
      .columnsGap(8)
      .width("90%")
      .height("90%")

这里用ForEach循环生成9个GridItem，避免重复代码；每张图片都设为“100%父容器大小”，刚好填满格子，再加上圆角和间距，精致感瞬间拉满。

2. 日历布局：复杂行列的精准控制

日历的“星期标题+日期格子”是Grid的典型复杂应用，核心需求是“7列固定（对应星期），行数随月份天数变化”。实现思路如下：

标题行：用一个GridItem包裹“日、一、二...六”的文本，设置.columnsTemplate("1fr 1fr 1fr 1fr 1fr 1fr 1fr")，7列等宽。
日期行：根据当月天数循环生成GridItem，比如31天就生成31个，Grid会自动按“7列一行”的规则换行，无需手动控制行数。
特殊日期：比如今天的日期，只需给对应GridItem设置不同背景色，就能突出显示。

这种“固定列数+动态行数”的模式，正是Grid擅长的场景，比用Row+Column嵌套更简洁高效。

3. 计算器布局：不规则占比的灵活适配

计算器的按键布局是“不规则网格”的代表：数字键是1:1的小格子，“0”键占2个格子，“=”键占1列2行。Grid的“跨列跨行”能力就能轻松实现，核心是给GridItem添加columnSpan（跨列数）和rowSpan（跨行数）属性。

关键代码示例：

@Entry
@Component
struct Test2 {

  build() {
    Column({space:20}) {
      Grid() {
        // 0键：跨2列
        GridItem() { Text("0").textAlign(TextAlign.Center).padding(20) }
        .backgroundColor("#F5F5F5")
        // 小数点键：占1列
        GridItem() { Text(".").textAlign(TextAlign.Center).padding(20)}
        .backgroundColor("#F5F5F5")
        // =键：跨1列2行
        GridItem() { Text("=").textAlign(TextAlign.Center).padding(20) }
        .backgroundColor("#FF9800")
        // 其他数字键...
        ForEach([1,2,3,4,5,6,7,8,9],(n:number,i:number)=>{
          GridItem() { Text(n+"").textAlign(TextAlign.Center).padding(20) }
          .backgroundColor(i%2==0?"#FF9800":"#F5F5F5")
        })
      }
      .columnsTemplate("1fr 1fr 1fr 1fr") // 4列布局
      .columnsGap(5)
      .rowsGap(5)
      .width("90%")
      .height(400)
    }
    .height('100%')
    .width('100%')
  }
}

通过columnSpan和rowSpan，就能让GridItem打破“单个格子”的限制，实现不规则布局，这也是Grid比其他布局更灵活的重要原因。

四、新手避坑：“格子游戏”的4个关键提醒

Grid看似简单，但新手容易在“规则设定”上踩坑，这4个提醒能帮你少走弯路：

columnsTemplate必设，否则布局失效：Grid默认没有列数，不设置columnsTemplate的话，所有GridItem会挤在一行，必须先通过该属性定义列数和占比。
fr单位不与固定单位混用（新手慎试）：虽然可以写.columnsTemplate("200px 1fr")（第一列固定200px，第二列占剩余宽度），但新手容易出现适配问题，建议先熟练使用纯fr布局，再尝试混合单位。
GridItem要“填满”格子：如果GridItem的宽高没设为“100%”或不设置宽高，可能会出现“格子内有空隙”的情况，建议给子组件设.width("100%").height("100%")，确保填满格子。
动态数据用ForEach循环：像九宫格、日历这种需要多个重复GridItem的场景，一定要用ForEach循环生成，避免手写重复代码，提高可维护性。

结语：用“格子思维”搞定规则布局

Grid的核心优势在于“规则性”和“自适应能力”——它把复杂的行列布局拆解成“定义格子+放组件”两个步骤，既保证了界面的整齐有序，又能通过fr单位和跨列跨行实现灵活适配。

如果大家想考取鸿蒙开发者认证的，欢迎加入我的专属考试链接中：https://developer.huawei.com/consumer/cn/training/classDetail/6ce9d5a998724a849ec634f318107d37?type=1?ha_source=hmosclass&ha_sourceId=89000248

记住“Grid是方格纸，GridItem是拼图块，columnsTemplate和rowsTemplate是格子规则”，再结合九宫格、日历等场景多练几次，你会发现：那些看似复杂的规则布局，其实都是“格子游戏”的简单组合。

下次再看到整齐的界面，不妨想一想：“这是不是用Grid拼出来的？”——你离HarmonyOS布局高手又近了一步！