鸿蒙应用开发：Grid组件实现九宫格布局教程

文章目录一、Grid组件简介二、基础九宫格实现三、Grid核心属性详解3.1 columnsTemplate - 列模板配置3.2 rowsTemplate - 行模板配置3.3 间距控制3.4 滚动支持四、高级九宫格示例五、布局方向与对齐方式六、响应式网格布局七、性能优化建议八、常见问题与解决方案问题1GridItem不显示问题2布局错乱问题3滚动不流畅九、总结十、进一步学习这是一个使用鸿蒙技术开发的本地原生记账应用非常适合大家用来练手。相关源码已上传至 Github点击此处查看项目。欢迎大家交流、指正也欢迎提交 PR。一、Grid组件简介在鸿蒙应用开发中Grid 组件是一种强大的网格布局容器能够将子元素按照行和列的网格形式进行排列。与Flex布局相比Grid 布局更加灵活特别适合实现九宫格、商品列表、图片墙等规整的布局效果。二、基础九宫格实现下面我们来看如何使用 Grid 组件实现一个基础的九宫格布局EntryComponentstruct GridExample{// 定义九宫格数据privategridData:string[][1,2,3,4,5,6,7,8,9]build(){Column(){Grid(){ForEach(this.gridData,(item:string){GridItem(){// 自定义的九宫格项组件GridItemContent({text:item})}})}.columnsTemplate(1fr 1fr 1fr)// 设置3列每列等宽.rowsGap(12)// 行间距.columnsGap(12)// 列间距}.width(100%).height(100%).padding(12)}}// 九宫格项组件Componentstruct GridItemContent{Proptext:stringbuild(){Column(){// 图片组件Image($r(app.media.startIcon)).width(60).height(60).borderRadius(8)// 文本组件Text(this.text).fontSize(16).margin({top:8})}.width(100%).height(120).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).backgroundColor(Color.White).borderRadius(12).shadow({radius:4,color:#00000020,offsetX:0,offsetY:2})}}运行效果关键点说明Grid的直接子元素必须是GridItemGrid 组件内部需要使用 GridItem 来包裹实际的子元素ForEach遍历数据使用 ForEach 来遍历数组数据动态生成网格项columnsTemplate设置列数1fr 1fr 1fr表示将父组件宽度平均分成 3 列三、Grid核心属性详解3.1 columnsTemplate - 列模板配置columnsTemplate属性用于定义网格的列数和每列的宽度比例// 3列等宽布局.columnsTemplate(1fr 1fr 1fr)// 4列等宽布局.columnsTemplate(1fr 1fr 1fr 1fr)// 不等宽布局第一列占2份其余各占1份总共5份.columnsTemplate(2fr 1fr 1fr 1fr)// 混合单位固定宽度自适应.columnsTemplate(100px 1fr 2fr)3.2 rowsTemplate - 行模板配置类似地我们可以使用rowsTemplate来定义行的高度// 定义3行高度分别为100px、自适应、200px.rowsTemplate(100px 1fr 200px)3.3 间距控制Grid提供了灵活的间距控制属性Grid(){// ... GridItem内容}.rowsGap(16)// 行间距16vp.columnsGap(16)// 列间距16vp3.4 滚动支持当Grid的内容超出容器高度时会自动显示滚动条Grid(){// ... 多个GridItem}.height(400)// 固定高度超出则滚动.scrollable(ScrollDirection.Vertical)// 垂直滚动四、高级九宫格示例下面是一个更完整的九宫格应用示例包含点击事件和动态数据EntryComponentstruct AdvancedGridExample{// 九宫格数据模型privategridItems:GridItemData[][{id:1,title:相册,icon:$r(app.media.startIcon),color:#FF6B6B},{id:2,title:音乐,icon:$r(app.media.startIcon),color:#4ECDC4},{id:3,title:视频,icon:$r(app.media.startIcon),color:#45B7D1},{id:4,title:文档,icon:$r(app.media.startIcon),color:#96CEB4},{id:5,title:下载,icon:$r(app.media.startIcon),color:#FFEAA7},{id:6,title:设置,icon:$r(app.media.startIcon),color:#DDA0DD},{id:7,title:帮助,icon:$r(app.media.startIcon),color:#98D8C8},{id:8,title:关于,icon:$r(app.media.startIcon),color:#F7DC6F},{id:9,title:更多,icon:$r(app.media.startIcon),color:#BB8FCE}]build(){Column(){Text(应用九宫格).fontSize(24).fontWeight(FontWeight.Bold).margin({bottom:20})Grid(){ForEach(this.gridItems,(item:GridItemData){GridItem(){this.buildGridItem(item)}.onClick((){// 处理点击事件this.onItemClick(item)})})}.columnsTemplate(1fr 1fr 1fr).rowsTemplate(1fr 1fr 1fr).rowsGap(15).columnsGap(15).width(90%).aspectRatio(1)// 保持正方形.layoutDirection(GridDirection.Row)}.width(100%).height(100%).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).backgroundColor(#F5F5F5)}// 构建网格项BuilderbuildGridItem(item:GridItemData){Column(){Image(item.icon).width(40).height(40).objectFit(ImageFit.Contain)Text(item.title).fontSize(14).margin({top:8}).fontColor(#333333)}.width(100%).height(100%).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).backgroundColor(Color.White).borderRadius(16).shadow({radius:6,color:#00000015,offsetX:0,offsetY:3})}// 点击事件处理onItemClick(item:GridItemData){console.log(点击了${item.title})// 这里可以添加导航逻辑}}// 数据模型接口interfaceGridItemData{id:numbertitle:stringicon:Resource color:string}运行效果五、布局方向与对齐方式Grid 支持多种布局方向和对齐方式Grid(){// ... GridItem内容}.layoutDirection(GridDirection.Row)// 按行排列默认// .layoutDirection(GridDirection.Column) // 按列排列.justifyContent(FlexAlign.Start)// 主轴起点对齐// .justifyContent(FlexAlign.Center) // 主轴居中对齐// .justifyContent(FlexAlign.End) // 主轴终点对齐// .justifyContent(FlexAlign.SpaceBetween) // 两端对齐// .justifyContent(FlexAlign.SpaceAround) // 环绕对齐.alignItems(ItemAlign.Start)// 交叉轴起点对齐// .alignItems(ItemAlign.Center) // 交叉轴居中对齐// .alignItems(ItemAlign.End) // 交叉轴终点对齐六、响应式网格布局Grid 组件也支持响应式设计可以根据屏幕尺寸动态调整列数import{display}fromkit.ArkUIEntryComponentstruct ResponsiveGridExample{Statecolumns:string1fr 1fr// 默认2列StatescreenWidth:number0aboutToAppear(){// 根据屏幕宽度动态调整列数constscreenWidthpx2vp(display.getDefaultDisplaySync().width)this.screenWidthscreenWidthif(screenWidth750){this.columns1fr 1fr 1fr 1fr// 大屏4列}elseif(screenWidth400){this.columns1fr 1fr 1fr// 中屏3列}else{this.columns1fr 1fr// 小屏2列}}build(){Column(){Text(屏幕宽度vpthis.screenWidth).fontSize(30)Grid(){ForEach([1,2,3,4,5,6,7,8,9],(item:number){GridItem(){Text(Item${item}).fontSize(16).textAlign(TextAlign.Center)}.height(80)})}.columnsTemplate(this.columns).rowsGap(10).columnsGap(10).width(100%)}}}上述代码在 DevEco Studio 预览器中无法获取到真实的屏幕宽高返回的可能为 0 或默认值。必须在模拟器或真机上运行才能正确获取。模拟器上的运行效果400vp 屏幕宽度 750vp屏幕宽度 750vp七、性能优化建议避免过度嵌套GridItem 内部组件结构尽量简单使用键值优化ForEach 中为动态数据提供稳定的 key懒加载对于大量数据的网格考虑使用 LazyForEach图片优化网格中的图片使用合适的尺寸和缓存策略八、常见问题与解决方案问题1GridItem不显示原因Grid的直接子元素不是GridItem解决确保所有直接子元素都用 GridItem 包裹问题2布局错乱原因columnsTemplate 设置不当解决检查fr单位的使用确保总和合理问题3滚动不流畅原因网格项内容过于复杂解决简化GridItem内部结构使用缓存九、总结Grid 组件是鸿蒙应用开发中实现网格布局的强大工具特别适合九宫格、商品列表等场景。通过合理使用columnsTemplate、rowsTemplate、间距和对齐属性可以创建出既美观又实用的界面布局。核心要点回顾Grid的直接子元素必须是GridItem使用columnsTemplate定义列数和宽度比例通过rowsGap和columnsGap控制间距支持滚动和响应式布局结合ForEach实现动态数据渲染十、进一步学习要深入了解 Grid 组件的更多高级特性建议查阅 官方文档 。通过掌握 Grid 组件您将能够轻松应对各种复杂的网格布局需求提升鸿蒙应用的界面开发效率。