HarmonyOS7 Grid 做九宫格菜单的几个细节：入口别只存一个标题

TimerHero

293人浏览 · 2026-07-14 08:23:27

TimerHero · 2026-07-14 08:23:27 发布

为一篇讲解 HarmonyOS 7 用 Grid 做九宫格菜单细节的中文技术文章生成一张对比图，风格

为一篇讲解 HarmonyOS 7 用 Grid 做九宫格菜单细节的中文技术文章生成一张手绘流程图。

为一篇讲解 HarmonyOS 7 用 Grid 做九宫格菜单细节的中文技术文章生成一张手绘笔记风信

文章目录

前言

九宫格菜单看起来只是把入口排整齐，但它其实承担了首页导航效率。用户要找扫一扫、付款码、账单、客服，第一眼扫不到，就会觉得页面不好用。

HarmonyOS7 里用 Grid 做九宫格很快，几行代码就能铺出来。真正要注意的是：入口有没有稳定身份，角标会不会挤压标题，禁用态是不是只改了颜色。

工具入口不要只存标题，至少要有业务 id、展示文案、状态字段和点击目标。

为什么这个问题经常被写乱

Grid 做九宫格菜单的几个细节这类内容很容易被写成“代码能跑就算讲完了”，但对初学者来说，这恰恰是最不够的地方。真正让人卡住的，往往不是某个组件名记不住，而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。

所以这篇文章不只想给你一个能跑的例子，更想把背后的判断过程讲清楚。你只要把这个判断过程吃透，后面自己改页面、补需求、查问题时，心里会稳很多。

先设计入口数据

我一般不会直接在 GridItem 里写死一个个 Text。入口一多，硬编码很快失控。

更稳的方式是先设计一张配置表：

字段	用途	为什么需要
`id`	稳定身份	做 key、埋点、跳转都能用
`title`	展示文案	运营可改，不影响组件身份
`iconText`	图标占位	示例里用文字代替图标，真实项目可换资源
`badge`	角标	新功能、未读数、活动提示都能表达
`disabled`	是否可点	权限不足或功能未开放时使用

九宫格不是“九个格子”，它更像一张入口配置表。UI 只是把这张表渲染出来。

先把页面目标想清楚

在真正写代码之前，先别急着盯着 API。更有用的做法是先想清楚：这个页面到底想解决什么问题，用户最在意的反馈是什么，哪些状态必须一直保持一致。

当你先把这条主线想明白，再回头看组件和状态设计，很多选择都会顺理成章。对小白来说，这一步尤其重要，因为它能帮你从“照着抄”慢慢过渡到“看得懂、改得动”。

完整 ArkUI 示例

下面这个例子用四列网格展示常用工具，包含角标、灰置入口和点击选中反馈。

interface ToolMenuItem {
  id: number
  title: string
  iconText: string
  badge: string
  disabled: boolean
}

@Entry
@Component
struct ToolGridPage {
  @State selectedId: number = 0
  private menus: ToolMenuItem[] = [
    { id: 1, title: '扫一扫', iconText: '扫', badge: '', disabled: false },
    { id: 2, title: '付款码', iconText: '付', badge: '', disabled: false },
    { id: 3, title: '账单', iconText: '账', badge: '3', disabled: false },
    { id: 4, title: '客服', iconText: '客', badge: '', disabled: false },
    { id: 5, title: '发票', iconText: '票', badge: '', disabled: false },
    { id: 6, title: '积分', iconText: '积', badge: '新', disabled: false },
    { id: 7, title: '会员', iconText: '会', badge: '', disabled: false },
    { id: 8, title: '更多', iconText: '...', badge: '', disabled: true }
  ]

  build() {
    Column({ space: 10 }) {
      Text('常用工具')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .width('100%')

      Grid() {
        ForEach(this.menus, (item: ToolMenuItem) => {
          GridItem() {
            Stack({ alignContent: Alignment.TopEnd }) {
              Column({ space: 8 }) {
                Text(item.iconText)
                  .fontSize(18)
                  .fontWeight(FontWeight.Bold)
                  .fontColor(item.disabled ? '#AAAAAA' : '#1E88E5')
                  .width(42)
                  .height(42)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(item.disabled ? '#F0F0F0' : '#EAF3FF')
                  .borderRadius(12)
                Text(item.title)
                  .fontSize(13)
                  .fontColor(item.disabled ? '#AAAAAA' : '#222222')
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
              }
              .justifyContent(FlexAlign.Center)
              .width('100%')
              .height('100%')

              if (item.badge.length > 0) {
                Text(item.badge)
                  .fontSize(10)
                  .fontColor(Color.White)
                  .padding({ left: 5, right: 5, top: 2, bottom: 2 })
                  .backgroundColor('#E53935')
                  .borderRadius(8)
              }
            }
          }
          .height(92)
          .backgroundColor(this.selectedId === item.id ? '#F1F7FF' : Color.White)
          .borderRadius(10)
          .enabled(!item.disabled)
          .onClick(() => {
            this.selectedId = item.id
          })
        }, (item: ToolMenuItem) => item.id.toString())
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
    }
    .padding(16)
    .backgroundColor('#F6F7FB')
  }
}