实现Grid组件中特定GridItem的点击效果

分类：uni-app

uniapp

问题现象
为Grid组件添加点击事件以实现缩放动画效果时，如何实现只点击特定GridItem项的功能？

背景知识
Grid是HarmonyOS提供的一种网格容器，由行和列分割的单元格所组成，通过指定项目所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要的自适应布局。
scale属性用于设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
解决方案
GridLayoutOptions是Grid组件的布局选项，在该对象中设置onGetRectByIndex方法用以初始化整个Grid组件。
layoutOptions: 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 [5, 5, 1, 1];
}
}
};
使用foreach方法依据上一步的设置的值循环渲染出每个GridItem组件，并为组件添加onclick方法，点击特定的GridItem组件时，在scale方法中将对应的GridItem组件缩放比例调整为0.5。
ForEach(this.numberT, (day: string, index: number) => {
GridItem() {
Text(day)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center);
}
.scale(this.currentGridItem === index ? {
x: 0.5,
y: 0.5,
z: 0,
} : null)
.onClick(() => {
this.currentGridItem = index;
})
.height('100%')
.width('100%');
}, (day: string) => day);
完整代码如下所示：
@Entry
@Component
struct GridClick {
@State numberT: String[] = ['0', '1', '2', '3', '4', '5'];
@State currentGridItem: number | null = null;
layoutOptions: 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 [5, 5, 1, 1];
}
}
};

build() {
Column({ space: 5 }) {
Grid(undefined, this.layoutOptions) {
ForEach(this.numberT, (day: string, index: number) => {
GridItem() {
Text(day)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center);
}
.scale(this.currentGridItem === index ? {
x: 0.5,
y: 0.5,
z: 0,
} : null)
.onClick(() => {
this.currentGridItem = index;
})
.height('100%')
.width('100%');
}, (day: string) => day);
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('90%')
.backgroundColor(0xFAEEE0)
.height(300);
}
.width('100%')
.margin({ top: 5 });
}

https://pastebin.com/UuYkXW7j
https://pastebin.com/njxtUKJV
https://pastebin.com/CAr9DVt9
https://pastebin.com/fYUFqkcZ
https://pastebin.com/cmgZj98G
https://pastebin.com/tQd11mpX
https://pastebin.com/F4KMuYhV
https://pastebin.com/JZdtwSqZ
https://pastebin.com/34X5qXLu
https://pastebin.com/J9bB204w
https://pastebin.com/CDUf6PMV
https://pastebin.com/cCSmJ0P0
https://pastebin.com/5ERqEzJp
https://pastebin.com/hyxSF5JS
https://pastebin.com/EeHZatmz
https://pastebin.com/4U9hYtyG
https://pastebin.com/PDkSugBz
https://pastebin.com/t9F6Hr19
https://pastebin.com/c9kM1G80
https://pastebin.com/UchAEnpv
https://pastebin.com/f7S7Pfv2
https://pastebin.com/pYNNwt6W
https://pastebin.com/v3uM5REA
https://pastebin.com/ytybkaVP
https://pastebin.com/PxCmyMqz
https://pastebin.com/0z8SQXpr
https://pastebin.com/DqQzCA9R
https://pastebin.com/2ERgHsNk
https://pastebin.com/dEbF61B2
https://pastebin.com/qG6ebiid
https://pastebin.com/GwaAjbTP
https://pastebin.com/zgr8WdX0
https://pastebin.com/kWVfensP
https://pastebin.com/ucmYYKJw
https://pastebin.com/KhX2ghqE
https://pastebin.com/2VYyqgup
https://pastebin.com/f9p7Xxvy
https://pastebin.com/h145hSdp
https://pastebin.com/LgitPVR4
https://pastebin.com/Hjb2bAS8
https://pastebin.com/zJXTaVRD
https://pastebin.com/igEBU2S7
https://pastebin.com/dMjnAb79
https://pastebin.com/bVDRi7ca
https://pastebin.com/378YTj4k
https://pastebin.com/U6v0LBE8
https://pastebin.com/kGNAdgzf
https://pastebin.com/aah3NZWb
https://pastebin.com/n0w5qGP7
https://pastebin.com/c9MQKk9w
https://pastebin.com/EGEqnQfV
https://pastebin.com/QmvALZK2
https://pastebin.com/8MtQY4yV
https://pastebin.com/bg80dwGJ
https://pastebin.com/hEafKHS1
https://pastebin.com/pzgmNsGH
https://pastebin.com/ftn5rHgt
https://pastebin.com/LiaxdP2g
https://pastebin.com/EEFRBf7n
https://pastebin.com/itshds1r
https://pastebin.com/2avZ0HgH
https://pastebin.com/zvAGMUqw
https://pastebin.com/2QNQcZey
https://pastebin.com/J4FhYxW8
https://pastebin.com/R0yUWJdk
https://pastebin.com/2wCWQYk1
https://pastebin.com/cAcS5Ggv
https://pastebin.com/EbnVPYb5
https://pastebin.com/XmH011LT
https://pastebin.com/uta3v32w
https://pastebin.com/uWWpiiDd
https://pastebin.com/Y2r5dYq6
https://pastebin.com/khZmx7SJ
https://pastebin.com/TRMAXwSs
https://pastebin.com/VyasTvAK
https://pastebin.com/bx8mRUUY
https://pastebin.com/bkfydjEx
https://pastebin.com/ZL3wEjmF
https://pastebin.com/LTNd4MNZ
https://pastebin.com/gauzFeXe
https://pastebin.com/qmG6DZLq
https://pastebin.com/v4a2WiPL
https://pastebin.com/sWJD7jHW
https://pastebin.com/n3Q7SBcH
https://pastebin.com/aRsapdtd
https://pastebin.com/2wqyv08Q
https://pastebin.com/2E9FCxGz
https://pastebin.com/VpucWh0N
https://pastebin.com/MGnVTreJ
https://pastebin.com/E6RMTifR
https://pastebin.com/awmQgJ8S
https://pastebin.com/7XuMs6CG
https://pastebin.com/Txk5RnNS
https://pastebin.com/aw5uSkfr
https://pastebin.com/sJxNsdtk
https://pastebin.com/b5vaap8Y
https://pastebin.com/8qRriQnJ
https://pastebin.com/L964GvdY
https://pastebin.com/K7709s2i
https://pastebin.com/111e3xR6
https://pastebin.com/et4XAvBs
https://pastebin.com/nnjPG332
https://pastebin.com/tH0GgCQ0
https://pastebin.com/6vBqjXav
https://pastebin.com/wUT5WbP4
https://pastebin.com/ceLeBgKj
https://pastebin.com/qXJBBnxb
https://pastebin.com/fbvm2UUy
https://pastebin.com/8HEGKbwU
https://pastebin.com/eXBTFAUN
https://pastebin.com/jPVdcZVF
https://pastebin.com/2bSwHLpr
https://pastebin.com/WaczU03E
https://pastebin.com/f0wBFjHD
https://pastebin.com/YgKJTKrd
https://pastebin.com/TkkJZj4f
https://pastebin.com/tZCVaea8
https://pastebin.com/bSS8ceye
https://pastebin.com/zDKdaG3s
https://pastebin.com/V6Q13TMU
https://pastebin.com/hs93Px05
https://pastebin.com/v9ya2FRS
https://pastebin.com/QF1XgjTh
https://pastebin.com/Mg5P9TyY
https://pastebin.com/bvxiZeJy
https://pastebin.com/AU4UX8s0
https://pastebin.com/YaMqKXQX
https://pastebin.com/KLnJMheD
https://pastebin.com/vJyDXi3X
https://pastebin.com/hNX0735p
https://pastebin.com/tqENyDLf
https://pastebin.com/J6zvuyz8
https://pastebin.com/iN3DzWjh
https://pastebin.com/JBHt50ge
https://pastebin.com/z9paX4b2
https://pastebin.com/cSSX9hT5
https://pastebin.com/Kk7jpPcY
https://pastebin.com/wNxUTxrV
https://pastebin.com/wdpSYNRW
https://pastebin.com/UDmBMt4q
https://pastebin.com/k4g6FNcc
https://pastebin.com/9xWwvkwY
https://pastebin.com/57XyMPtE
https://pastebin.com/v627gvmE
https://pastebin.com/MWSJqR30
https://pastebin.com/NsJEaXR8
https://pastebin.com/jFLC65v0
https://pastebin.com/wrgMPSA5
https://pastebin.com/d1sXWekQ
https://pastebin.com/kZYTM9q9
https://pastebin.com/fGHJTZxz
https://pastebin.com/BGB310Lh
https://pastebin.com/T7vLy1As
https://pastebin.com/rhavST1i
https://pastebin.com/gGCQh1TC
https://pastebin.com/YFTKUvWZ
https://pastebin.com/CQpNiNcC
https://pastebin.com/BySpiUCJ
https://pastebin.com/c4TBQgV5
https://pastebin.com/xT9jFvw1
https://pastebin.com/3F5D5ZU5
https://pastebin.com/x2pYDfq2
https://pastebin.com/FxwBd44t
https://pastebin.com/cqM3wHDf
https://pastebin.com/kcG8Exza
https://pastebin.com/mGzFSHpy
https://pastebin.com/avW2uUd6
https://pastebin.com/3mzizxaX
https://pastebin.com/j0zjuQQG
https://pastebin.com/jBr2c4x6
https://pastebin.com/1NBq5dYw
https://pastebin.com/w4vbz18a
https://pastebin.com/UwbNZ25m
https://pastebin.com/v26MZw9i
https://pastebin.com/aHpmLgEZ
https://pastebin.com/XFfveVub
https://pastebin.com/STSjRsgn
https://pastebin.com/8czhyYHR
https://pastebin.com/40uenwXs
https://pastebin.com/j5iGfLNf
https://pastebin.com/h8eHSJu9
https://pastebin.com/Cw7xSMkg
https://pastebin.com/4mX3AZ9F
https://pastebin.com/1XtRUyJj
https://pastebin.com/VcEJbQya
https://pastebin.com/0MfCPN3y
https://pastebin.com/dm4bgcBn
https://pastebin.com/rPw2U0MK
https://pastebin.com/TNXdTtvS
https://pastebin.com/yd9QuKJd
https://pastebin.com/VGF9L8ER
https://pastebin.com/Ty5Qnhpe
https://pastebin.com/S7Pr0yrA
https://pastebin.com/jUYm0VHM
https://pastebin.com/JiHQq2B5
https://pastebin.com/JahfzPNf
https://pastebin.com/qKkyiy01
https://pastebin.com/kJvXpfA5
https://pastebin.com/Pq2BeL6E
https://pastebin.com/TqsmZeqC
https://pastebin.com/03b4Xw7f
https://pastebin.com/EKc6G2YT
https://pastebin.com/NYUhmLXW
https://pastebin.com/Re6d2nvm
https://pastebin.com/kV6pCYwH
https://pastebin.com/PG19bu2U
https://pastebin.com/4DstDNgj
https://pastebin.com/waU9ta3V
https://pastebin.com/XE2aP7pV
https://pastebin.com/K2v1PrqE
https://pastebin.com/qJJryNE7
https://pastebin.com/6hfHKQti
https://pastebin.com/0S5As7xu
https://pastebin.com/XZVWk175
https://pastebin.com/skCCheMN
https://pastebin.com/AnmFtiJL
https://pastebin.com/6Jy1ZddB
https://pastebin.com/2WCxJmnX
https://pastebin.com/hdm7xSqH
https://pastebin.com/tBLHJiJ4
https://pastebin.com/kY1dnEtk
https://pastebin.com/jnMUBhwV
https://pastebin.com/Mn4eSBVz
https://pastebin.com/EmAyyyku
https://pastebin.com/we1BqHn0
https://pastebin.com/3Ud88pyF
https://pastebin.com/2LMNqxHZ
https://pastebin.com/06y4MdCw
https://pastebin.com/pjwhT0p3
https://pastebin.com/EmpWg4Za
https://pastebin.com/17Kemhr1
https://pastebin.com/Lucxw6wD
https://pastebin.com/gK4bfLET
https://pastebin.com/PD716nuh
https://pastebin.com/m6FSwZ4m
https://pastebin.com/2rVm7iS0
https://pastebin.com/SyM6ekMU
https://pastebin.com/fPvWWy2R
https://pastebin.com/gBkXZRGj
https://pastebin.com/PfLGAscm
https://pastebin.com/pJ5n42aq
https://pastebin.com/dN1fk7ZB
https://pastebin.com/wU8kdtNx
https://pastebin.com/YH7nVLmt
https://pastebin.com/R8RjTpWM
https://pastebin.com/cf9iXuHu
https://pastebin.com/46n03r96
https://pastebin.com/UFD7qdrY
https://pastebin.com/ufFdrW2F
https://pastebin.com/2zHSUi4V
https://pastebin.com/2R1XAd7Y
https://pastebin.com/zHtbpd2i
https://pastebin.com/mXtPQiNX
https://pastebin.com/UJaqZahr
https://pastebin.com/3scZmaDU
https://pastebin.com/f5dMBNEC
https://pastebin.com/fyrZ3fwf
https://pastebin.com/cgNat2u8
https://pastebin.com/sjUVU47F
https://pastebin.com/g1xzuHes
https://pastebin.com/rLAVxdPX
https://pastebin.com/UqFuFxdJ
https://pastebin.com/W5fe9pn8
https://pastebin.com/KzcKivBv
https://pastebin.com/x2aMxcTR
https://pastebin.com/54qxHY68
https://pastebin.com/pqcFdTrP
https://pastebin.com/jZFv47n8
https://pastebin.com/YQt64yNB
https://pastebin.com/0EN2P2sv
https://pastebin.com/KjMBtuye
https://pastebin.com/9Gp0mSug
https://pastebin.com/kswH5319
https://pastebin.com/Rpj4aHrP
https://pastebin.com/dPCrfcPA
https://pastebin.com/NXWYCfYA

2026-07-20 16:50 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

欢迎到专业群（ uni-app鸿蒙化技术交流群）咨询，群中有相关专业的管理员和群友。

要实现只点击特定GridItem项并触发缩放动画效果，核心思路是引入一个状态变量来记录当前被点击的GridItem的索引，然后在该GridItem的scale属性中根据这个索引进行条件判断。

具体实现步骤如下：

定义状态变量：在组件中定义一个状态变量（如currentGridItem），用于存储当前被点击的GridItem的索引，初始值可以设为null。
绑定点击事件：在使用ForEach循环渲染GridItem时，为每个GridItem添加onClick事件。在点击回调中，将当前点击项的索引赋值给状态变量currentGridItem。
条件设置缩放属性：为GridItem设置scale属性，通过三元运算符判断当前项的索引是否等于currentGridItem。如果相等，则返回缩放比例对象（如{ x: 0.5, y: 0.5, z: 0 }）；如果不相等，则返回null或不设置缩放。

参考代码如下：

@State currentGridItem: number | null = null;  

// ... 在Grid的ForEach中  
ForEach(this.numberT, (day: string, index: number) => {  
  GridItem() {  
    Text(day)  
      .fontSize(16)  
      .backgroundColor(0xF9CF93)  
      .width('100%')  
      .height('100%')  
      .textAlign(TextAlign.Center);  
  }  
  .scale(this.currentGridItem === index ? {  
    x: 0.5,  
    y: 0.5,  
    z: 0,  
  } : null)  
  .onClick(() => {  
    this.currentGridItem = index;  
  })  
  .height('100%')  
  .width('100%');  
}, (day: string) => day);

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

通过这种方式，只有被点击的那个GridItem会应用缩放效果，其他未点击的项则保持原样。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

实现Grid组件中特定GridItem的点击效果

1 个回复

公告

相关问题

实现Grid组件中特定GridItem的点击效果

与内容相关的链接

1 个回复

公告

相关问题