网格布局是移动端最经典的排版方式之一。从照片墙到应用抽屉从商品列表到图标菜单等分网格承载了大量信息展示任务。HarmonyOS NEXT ArkUI 提供了 Grid 组件通过columnsTemplate属性灵活定义列数与列宽配合GridItem渲染子元素轻松实现各种网格效果。本文将深入讲解 Grid 组件的核心 API并通过一个动态照片画廊实战案例展示列数切换、选中高亮和多选管理等功能。关键词HarmonyOS、ArkUI、Grid、网格布局、照片画廊、动态列数一、Grid 组件概览Grid 是 ArkUI 容器组件家族中专门用于网格布局的成员。与 List线性列表、WaterFlow瀑布流和 Scroll自由滚动相比Grid 的核心特征在于等分列——所有子元素按固定的列数排列行高一致视觉整齐统一。组件排列方式典型场景List单列线性消息列表、设置选项Grid多列等分照片墙、应用抽屉、图标菜单WaterFlow多列不等高图片流、商品发现Scroll自由排布内容页面Grid 的优势在于规整——当你的内容需要以 N 列的方式整齐排列时Grid 是最合适的选择。二、Grid 核心 API2.1 构造函数与列模板Grid 的列定义通过columnsTemplate属性控制使用类似 CSS Grid 的语法Grid(){ForEach(this.items,(item){GridItem(){/* 内容 */}})}.columnsTemplate(1fr 1fr 1fr)// 3 等分列columnsTemplate支持以下格式1fr 1fr— 2 等分列每列占 50% 宽度1fr 1fr 1fr— 3 等分列每列占 33.3% 宽度1fr 1fr 1fr 1fr— 4 等分列每列占 25% 宽度120vp 1fr— 混合模式第一列固定 120vp第二列占剩余宽度fr是fraction unit分数单位的缩写1fr表示占 1 份可用空间。如果有 3 个1fr则每列各占 1/3 宽度。2.2 间距控制Grid(){...}.columnsGap(8)// 列间距.rowsGap(8)// 行间距列间距和行间距独立控制通常设为相同值以保持视觉统一。2.3 动态构建列模板在实际项目中列数往往需要根据用户偏好动态调整。由于columnsTemplate接受字符串我们可以动态构建buildTemplate(cols:number):string{lett1fr;for(leti1;icols;i){tt.concat( 1fr);}returnt;}// 使用Grid(){...}.columnsTemplate(this.buildTemplate(this.colCount))当colCount变化时columnsTemplate字符串更新Grid 自动重新排版。2.4 GridItem每个网格单元必须包裹在GridItem()中ForEach(this.photos,(photo:PhotoItem){GridItem(){Column(){Text(photo.emoji).fontSize(32)Text(photo.label).fontSize(13)}.width(100%).height(100%).justifyContent(FlexAlign.Center).backgroundColor(photo.color).borderRadius(12)}})GridItem提供了网格布局所需的尺寸测量能力确保每列的子元素对齐。三、实战动态照片画廊我们构建一个照片画廊包含 18 张主题卡片日出、海洋、森林、极光…支持三种列数切换2/3/4 列和多选管理。3.1 数据模型每张照片用一个包含主题名、emoji 图标、背景色和文字色的对象表示interfacePhotoItem{id:number;label:string;// 主题名emoji:string;// emoji 图标color:string;// 背景色textColor:string;// 文字颜色深色背景用白浅色背景用黑}aboutToAppear():void{this.photos[{id:0,label:日出,emoji:,color:#FF6B6B,textColor:#FFFFFF},{id:1,label:海洋,emoji:,color:#4ECDC4,textColor:#FFFFFF},{id:2,label:森林,emoji:,color:#2ECC71,textColor:#FFFFFF},{id:3,label:晚霞,emoji:,color:#FF8C42,textColor:#FFFFFF},{id:4,label:星空,emoji:✨,color:#6C5CE7,textColor:#FFFFFF},// ... 共 18 张];}每张卡片使用独立的颜色方案18 色确保网格在任何列数下都呈现出丰富的色彩对比。3.2 列数切换三个触摸按钮——2 列、3 列、4 列——点击时切换colCount并清除当前选择ForEach([2,3,4],(n:number){Text(n.toString().concat(列)).fontSize(13).fontColor(this.colCountn?#FFFFFF:#666677).fontWeight(this.colCountn?FontWeight.Bold:FontWeight.Normal).padding({top:6,bottom:6,left:12,right:12}).borderRadius(12).backgroundColor(this.colCountn?#1677FF:#F2F3F5).margin({left:6}).onClick((){this.colCountn;this.clearSelection();// 切换列数时重置选择})},(n:number)n.toString())切换列数时清除选中状态是一个重要的 UX 细节——因为列数变化会导致卡片位置重新排列保留旧选中状态会让用户困惑。3.3 选中交互点击卡片触发选中/取消选中的卡片显示白色边框和扩展阴影toggleSelect(id:number):void{constfoundthis.selectedIds.indexOf(id);if(found-1){this.selectedIds.push(id);}else{this.selectedIds.splice(found,1);}}每张卡片根据是否被选中动态调整样式.border({width:this.selectedIds.indexOf(photo.id)!-1?3:0,color:#FFFFFF,style:BorderStyle.Solid}).shadow(this.selectedIds.indexOf(photo.id)!-1?{radius:12,color:photo.color.concat(88),offsetX:0,offsetY:4}:{radius:4,color:#00000012,offsetX:0,offsetY:2})选中状态的双重视觉反馈白色边框3vp 宽清晰标识哪些卡片被选中彩色扩展阴影12vp 半径使用卡片自身的颜色 半透明88产生发光效果非选中状态的阴影则较轻4vp 半径、浅黑半透明保持卡片的层次感但不抢夺注意力。3.4 选择计数与清除在列数切换器右侧显示已选数量和清除入口if(this.selectedIds.length0){Row(){Text(已选 .concat(this.selectedIds.length.toString())).fontSize(12).fontColor(#1677FF).fontWeight(FontWeight.Medium)Text( | 清除).fontSize(12).fontColor(#FF4D4F).onClick((){this.clearSelection();})}}这个信息区域仅在选中至少 1 张卡片后才显示保持界面的简洁。清除按钮使用红色#FF4D4F暗示其清空的操作性质。四、Grid vs List vs WaterFlow选择哪个布局容器取决于内容特征特征GridListWaterFlow内容高度统一可变可变列数自定义1自定义列对齐强制对齐无紧凑排列适用图标菜单、相册消息、设置图片流如果你的内容卡片的宽高比一致如本例中的 18 张主题卡片Grid 是天然的选择。如果内容高度差异大如不同长度的文字卡片WaterFlow 更合适。如果只需要单列List 最简单。五、完整交互流程初始状态进入页面3 列网格展示 18 张彩色主题卡片无任何选中切换列数点击2 列按钮卡片重新排版为 2 列点击4 列变为 4 列选中卡片点击星空卡片出现白色边框 紫色发光阴影右上角显示已选 1 | 清除多选继续点击海洋和日出已选计数变为 3三张卡片同时高亮取消选中再次点击星空计数变为 2该卡片恢复默认样式清除选择点击清除所有选中状态归零计数信息消失六、总结Grid 是 ArkUI 中设计最简洁的布局组件之一。它的核心就是一条属性columnsTemplate。掌握了这个属性的用法就能在 2 列、3 列、4 列甚至混合列宽之间自由切换。本文通过照片画廊这个实战案例覆盖了columnsTemplate的动态构建与列数切换GridItem 的嵌套使用选中状态的边框 阴影双重反馈多选管理与计数清除Grid / List / WaterFlow 的选择原则Grid 配合 List列表、WaterFlow瀑布流和 Scroll滚动构成了 ArkUI 布局体系的四大容器。根据内容特征选择合适的容器是鸿蒙应用 UI 开发的基础能力。