文章目录前言先分清两大家族方案一Grid 数据网格代码实现方案二GridRow 响应式栅格核心代码我踩过的坑决策清单常见误区小白必踩完整可运行示例九宫格图片墙完整示例写在最后前言做界面绕不开网格。相册九宫格、设置项列表、计算器按键全都是网格。但 HarmonyOS 里网格相关的组件不止一个有Grid、有GridRow/GridCol、还有上篇说的Flex伪网格。这几种到底怎么选我自己项目里全用过踩过坑也尝过甜头。这篇文章我直接上对比给你一个闭眼选的决策表。先分清两大家族HarmonyOS 的网格其实分两套思路方案适合场景核心特点GridGridItem数据驱动的格子图片墙、通讯录像列表一样ForEach自动按列数排GridRowGridCol响应式页面骨架按屏宽换列数基于 12 栅格能断点Flex模拟简单固定几宫格最轻量但响应式弱一句话记要展示一堆同构数据用Grid要页面整体响应式排版用GridRow临时凑几个格子用Flex就行。方案一Grid 数据网格Grid必须配合GridItem使用最爽的地方是它能像列表一样ForEach。代码实现Grid(){ForEach(this.photos,(p:string){GridItem(){Image(p).width(100%).height(100%).objectFit(ImageFit.Cover)}},(p:string)p)}.columnsTemplate(1fr 1fr 1fr)// 三列每列平分.rowsGap(4).columnsGap(4).width(100%).aspectRatio(1)// 整体正方形保证格子是方的逐行说重点.columnsTemplate(1fr 1fr 1fr)定义列模板1fr表示一份剩余空间三个1fr就是三等分。想两列就写1fr 1fr。rowsGap/columnsGap行列间距做出来的九宫格才有缝隙。.aspectRatio(1)让整个 Grid 保持正方形配合三列每个格子自然就是方的图片不会被拉变形。方案二GridRow 响应式栅格GridRow是 12 栅格系统最大卖点是断点——屏幕宽窄不同列数自动变。核心代码GridRow({columns:12,gutter:8}){GridCol({span:{sm:12,md:6,lg:4}}){Text(这块在手机占满平板占一半大屏占三分之一).height(60).backgroundColor(#E8F0FE)}}.width(100%)columns: 12总栅格数 12。span里sm/md/lg是断点sm手机占 12 格即整行md平板占 6 格即半行lg大屏占 4 格即三分之一。一套代码适配三种设备这才是真正的响应式。我踩过的坑坑 1Grid里忘了给高度或aspectRatio结果格子高度为 0啥也看不见。Grid 默认不会自己撑高要么父容器有固定高要么用aspectRatio撑。坑 2拿Grid做只有 4 个固定按钮的布局纯属杀鸡用牛刀Flex三行代码搞定。坑 3GridRow的span写反了断点手机上显示成三列挤成一团。断点是sm md lg别搞混顺序。决策清单相册、商品墙、通讯录 →Grid页面整体要在手机/平板/大屏表现不同 →GridRow就四五个固定格子 →Flex 足矣常见误区小白必踩误区说明给 Grid 不撑高度Grid 默认不会自己长高要么父容器有固定高要么用aspectRatio撑否则格子高度为 0 啥也看不见。拿 Grid 做固定四宫格就四个固定按钮用 Flex 三行代码搞定杀鸡别用牛刀。把断点顺序搞反sm md lg手机用sm、平板md、大屏lg写反了手机上挤成一团。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例九宫格图片墙Grid 最适合这种「等宽等距网格」。下面用GridItem铺一个 3 列相册。完整示例// Grid 三列网格适合相册 / 菜单 / 图标墙EntryComponentstruct PhotoGrid{privatephotos:number[][1,2,3,4,5,6,7,8,9]build(){Grid(){ForEach(this.photos,(p:number){GridItem(){Text(图p).width(100%).height(100).textAlign(TextAlign.Center).backgroundColor(#F2F3F5)}})}.columnsTemplate(1fr 1fr 1fr)// 三列等宽.rowsGap(8).columnsGap(8).padding(8)}}你会看到什么3 列 × 3 行的整齐网格每格是一个浅灰方块中间写着「图1」到「图9」格与格之间横竖都有 8vp 空隙。动手改一改把columnsTemplate(1fr 1fr 1fr)改成1fr 2fr 1fr中间一列会变宽。把.rowsGap(8)改成.rowsGap(20)行距变大。把GridItem里的Text换成Image($r(app.media.icon))就能显示真实图片。写在最后别被网格俩字吓到本质上就是按行列摆东西。我的经验是能用Grid就别手写Flex循环能用断点就别写两份布局。先把这篇文章的对比表存下来下次选型直接查省得每次都纠结。试试把Grid例子里的1fr 1fr 1fr改成1fr 2fr 1fr看看中间那列是不是变宽了——fr就是按配比分空间很好玩。