当前位置： 首页 > news >正文

HarmonyOS应用开发（ Beta5.0）一杯冰美式的时间“拿捏Grid组件”

news 2025/6/26 3:51:26

常见情形

在很多手机商城的页面中会出现类似网格状一样的情况，例如：

  1. 京东

​这里呢是采用Grid组件中的控制滚动,里面的rowsTemplate属性为一行且不对列的行数属性进行操作，这样的话就可以控制水平滑动了。

2.淘宝

​ 这里就是极其简单的2*4的网格布局。

3.hao123

​ 这里类似淘宝。

基本用法

Grid组件适用于布局由很多的行和列所组成、行列部分需要合并、需要滚动的场景。如下：

组件结构：

Grid(){GridItem(){//展示的内容}GridItem(){//展示的内容}
}

说明：1.Grid的子组件必须是GridItem组件，展示的内容放在GridItem中

​ 2.GridItem只有一个子组件，跟初始代码块中build()一样，有且只能有一个子组件

​ 3.Grid组件若是没有设置宽高，会默认适应其父组件的尺寸

样例：

@Entry
@Component
struct Index {nums: number[] = Array.from({ length: 10 })//定义数组build() {Column() {Grid() {ForEach(this.nums, (item: number, index: number) => {//ForEach循环渲染GridItem() {Text(index.toString())//调用索引对GridItem进行编号.fontSize(30).padding(5).backgroundColor(Color.Yellow)}})}}.width("100%").height("100%")}

运行结果：

由于没有对齐进行行列分布，所以所有GridItem()内的内容都展示在一行，下面让我来介绍一下Grid组件中常用的属性

基础属性

1.columnsTemplate 该属性用于设置网格布局的列数量

示例写法: .columnsTemplate('1fr 1fr 2fr')

从中fr出现的次数表示分成了几列，前面的数字则表示当前列所占用的份数

2.rowsTemplate 该属性用于设置网格布局的行数量

示例写法: .rowsTemplate('1fr 1fr 2fr')

从中fr出现的次数表示分成了几行，前面的数字则表示当前行所占用的份数

3.columnsGap 该属性用于控制列与列之间的间距

示例写法: .columnsGap(10)

4.rowsGap 该属性用于控制行与行1之间的间距

示例写法: .rowsGap(10)

练一练：

@Entry
@Component
struct TestPage {build() {Grid() {this.GridItemBuilder('1', Color.Blue)this.GridItemBuilder('2', Color.Blue)this.GridItemBuilder('3', Color.Blue)this.GridItemBuilder('4', Color.Blue)this.GridItemBuilder('5', Color.Blue)this.GridItemBuilder('6', Color.Blue)}.rowsTemplate('1fr 1fr 1fr').columnsTemplate('1fr 2fr 1fr').rowsGap(10).columnsGap(10).width('100%').height(300)}@BuilderGridItemBuilder(title: string, bgColor: ResourceColor) {GridItem() {Text(title).fontColor(Color.White).fontSize(30)}.backgroundColor('#0094ff')}
}

这边解答采用了@Builder将GridItem进行了封装，这样看起来清晰很多。

合并行列

像下面左边的图片我们可以通过分配列占的份数来让他变宽，但下面右边的图片中的合并应该怎么样来做呢？这边则需要用到一些GridItem属性，让我来为大家讲解。

GridItem属性：

  1. rowStart(number) 指定当前元素的起始行号

  2. rowEnd(number) 指定当前元素的终点行号

  3. columnStart(number) 指定当前元素的起始列号

  4. columnEnd (number) 指定当前元素的终点行号

    ！！！这里的起始行号和列号是从1开始，比如你写的是四列，那么列号就是1，2，3，4

首先，我们先对所有元素进行编号，我这里就是直接用forEach中索引标记

然后，我们需要通过索引找到我们需要进行合并网格，这边我拿索引为2和3的网格举个例子。显然易见，这两个网格是列合并，行是没有变化，所以只需要找到其中一个，添加起始列号和终点列号就可以完成合并。

以此类推，索引4和8的网格是行合并，起始和终点行号分别为2，3，索引8，9，10就是类似2，3的列合并，起始和终点列号为2和4。

完整代码：

@Entry
@Component
struct GridPage03 {nums: number[] = Array.from({ length: 12 })build() {Grid() {ForEach(this.nums, (item: number, index: number) => {if (index === 2) {GridItem() {Text(index + '').fontColor(Color.White).fontSize(30)}.backgroundColor('#9dc3e6').columnStart(3).columnEnd(4)} else if (index === 3) {GridItem() {Text(index + '').fontColor(Color.White).fontSize(30)}.backgroundColor('#9dc3e6').rowStart(2).rowEnd(3)} else {GridItem() {Text(index + '').fontColor(Color.White).fontSize(30)}.backgroundColor('#9dc3e6')}})}.columnsTemplate('1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr').width('100%').height(260).rowsGap(10).columnsGap(10).padding(10)}
}

第二种方法：GridLayoutOptions

这个接口非常的新，也是刚更新不久，官方文档：developer.huawei.com/consumer/cn…

我们先来看下最常用的两个参数吧！

  1. regularSize[number,number] 大小规则的GridItem在Grid中所占的行数和列数 ，目前呢只支持一行一列，也就是[1,1]

  2. onGetRectByIndex 类型:(index:number)=>[rowStart,columnStart,rowSpan,columnSpan]

    这里就是先通过索引找对应的GridItem，然后通过中括号里的四个参数来进行合并行列。

    1. rowStart 表达的含义跟第一种方法一样，表示当前元素行起始位置
    2. columnStart 也是如此，表示当前元素列起始位置
    3. rowSpan 这里Span表示跨度的意思,所以就是占用的行数
    4. columnSpan 表示占用的列数

完整代码：

@Entry
@Component
struct Index {@State nums: string[] = ['0', '1', '2', '3', '4', '5']layoutOption: GridLayoutOptions = {regularSize: [1, 1],onGetRectByIndex: (index: number) => {if (index == 0) {return [0, 0, 1, 1]} else if (index == 1) {return [0, 1, 2, 2]} else if (index == 2) {return [0, 3, 3, 3]} else if (index == 3) {return [3, 0, 3, 3]} else if (index == 4) {return [4, 3, 2, 2]} else {return [4, 5, 2, 1]}}}build() {Grid(undefined, this.layoutOption) {ForEach(this.nums, (item: string) => {GridItem() {Text(item).fontSize(16).backgroundColor('#f9ce93').width('100%').height("100%").textAlign(TextAlign.Center)}.height("100%").width('100%')})}.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr').columnsGap(10).rowsGap(10).width('90%').backgroundColor('#fcf0e2').height(300)}
}

设置滚动

像文案开头京东那种就是可以滑动的网格布局，这里原理也是非常的简单，Grid中滑动不需要用到scroller控制器,只需要以下操作。

  1. 水平滚动：设置的是rowsTemplate，Grid的滚动方向为水平方向。
  2. 垂直滚动：设置的是columnsTemplate，Grid的滚动方向为垂直方向。

！！！这两不要同时设置，不然就滑动不了了

试一试：

@Entry
@Component
struct Day01_09_Grid05 {// 长度为 10 每一项都为 undefined 的数组list: string[] = Array.from({ length: 30 })build() {Column() {Grid() {ForEach(this.list, (item: string, index) => {GridItem() {Text((index + 1).toString()).newExtend()}.padding(5).height('30%').width('25%')})}.columnsTemplate('1fr 1fr 1fr') // 竖向滚动// .rowsTemplate('1fr 1fr 1fr') // 横向滚动.rowsGap(10).width('100%').height(300).border({ width: 1 }).padding(5)}.width('100%').height('100%')}
}@Extend(Text)
function newExtend() {.backgroundColor('#0094ff').width('100%').height('100%').fontSize(30).fontColor(Color.White).textAlign(TextAlign.Center)
}

当然大家会发现我们的滚动条有点丑，先别急我下面会讲！！

用代码控制滚动

这里很明显是用控制器和按钮来控制滑动了，先讲一下核心步骤吧。

  1. 创建 Scroller 对象

  2. 设置给 Grid

  3. 调用 Scroller 对象的 scrollPage 方法

    // 创建 Scroller 对象
scroller: Scroller = new Scroller()// 设置给 GridGrid(this.scroller) {// ...}// 通过代码控制
this.scroller.scrollPage({next:true // 下一页next:false // 上一页
})
    练一练：

​ 答案：

 

@Entry
@Component
struct Index {nums:number[]=Array.from({length:200})scroller:Scroller=new Scroller()build() {Column(){Grid(this.scroller){ForEach(this.nums,(item:number,index:number)=>{GridItem(){Text((index+1).toString())}.backgroundColor('#0094ff').width("25%")})}.padding(10).rowsTemplate('1fr 1fr 1fr 1fr').rowsGap(10).columnsGap(10).height(450)Row(){Button('上一页').width(100).onClick(()=>{this.scroller.scrollPage({next:false})})Button('下一页').width(100).onClick(()=>{this.scroller.scrollPage({next:true})})}.width("100%").justifyContent(FlexAlign.SpaceAround)}.width("100%").height("100%")}
}

 

自定义滚动条
 

使用属性调整
 

  1.  
    scrollBar 设置滚动条状态
     
    BarState.off 关闭
     
    BarState.on 常驻
     
    BarState.auto 按需显示
     
  2.  
    scrollBarColor 设置滚动条的颜色
     
 

.scrollBarWidth(20) // 宽度 .scrollBarColor(Color.Orange) // 滚颜色
.scrollBar(BarState.Off) // 关闭

 

自定义组件
 

主要就是三个参数如下：
 

  1.  
    scroller 可控制组建的控制器
     
  2.  
    direction:ScrollBarDirection.Vertical/Horizontal 滚动条的方向
     
  3.  
    state 滚动条的状态
     
 

// 和 Grid 共用同一个 Scroller
scroller: Scroller = new Scroller()// 和 Grid 共用同一个 Scroller
Grid(this.scroller){// 略
}// 和 Grid 共用同一个 Scroller
// 创建 ScrollBar 组件并设置属性
ScrollBar({scroller: this.scroller,direction: ScrollBarDirection.Horizontal // 方向
}) {// 滚动内容 设置外观即可Text()
}
// 设置外观
 

 

最后
 

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为体系杂乱无章，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。 
 

为了确保高效学习，建议规划清晰的学习路线，涵盖以下关键阶段：
 

希望这一份鸿蒙学习文档能够给大家带来帮助~

GitCode - 全球开发者的开源社区,开源代码托管平台
 

 

 

 鸿蒙（HarmonyOS NEXT）最新学习路线
 

​
 

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案
 

路线图适合人群：
 

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术
 

2.视频教程+学习PDF文档
 

（鸿蒙语法ArkTS、TypeScript、ArkUI教程……）
 

 
 
 
 

 

 纯血版鸿蒙全套学习文档（面试、文档、全套视频等）
 

                   
 

鸿蒙APP开发必备
 

​​
 

总结
 

参与鸿蒙开发，你要先认清适合你的方向，如果是想从事鸿蒙应用开发方向的话，可以参考本文的学习路径，简单来说就是：为了确保高效学习，建议规划清晰的学习路线






http://www.mrgr.cn/news/22291.html






相关文章：


  • 
小怡分享之数据结构LinkedList与链表

    • 

  • 
第十一周：机器学习

    • 

  • 
Python中如何实现字符串的查询和替换？

    • 

  • 
春日美食汇：基于SpringBoot的订餐平台

    • 

  • 
C++复习day07

    • 

  • 
C++：priority_queue（优先级队列）的模拟实现

    • 

  • 
树形结构-数据结构

    • 

  • 
深度学习-01 Pytorch

    • 

  • 
基于深度学习的动态场景理解

    • 

  • 
【2024新教程】Linux后台运行程序并且关闭终端后不会被kill的方法

    • 

  • 
OJ Z字形变换

    • 

  • 
【小沐学OpenGL】Ubuntu环境下glut的安装和使用

    • 

  • 
程序员如何写笔记？

    • 

  • 
Redis命令行客户端操作

    • 

  • 
（详细文档）javaswing学生成绩管理系统（mysql）+详细报告

    • 

  • 
Java并发编程实战 07 | 如何正确停止线程

    • 

  • 
YoloV10改进策略：下采样改进|自研下采样模块（独家改进）|疯狂涨点|附结构图

    • 

  • 
数据库的配置2：客户端navicat的安装与连接数据库的方法

    • 

  • 
Ansible变量与模板的高级使用技巧

    • 

  • 
微信小程序开发项目详细讲解

    •