前一节我们写好了"提醒事项"APP首页的静态页面，光有静态页面肯定是不够的，更重要的是交互，今天这一节我将来学习最常用的交互事件------点击事件。
点击事件
说明：组件被点击时触发的事件
作用：监听（感知）用户点击行为，进行对应操作
在添加按钮上增加点击事件，点击后弹出添加弹窗。
实现步骤
1、设置动态变量model_zIndex
设置动态zIndex来动态控制弹窗的zIndex的层级，当需要显示时，将层级调高，隐藏时层级调低。
javascript
@State model_zIndex:number = -12、给弹窗绑定动态zIndex
javascript
Coloum(){
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.End)
.backgroundColor('#cd000000')
.zIndex(this.model_zIndex)3、给元素绑定点击事件
在鸿蒙OS Next中，绑定点击事件直接在元素上.onClick，在点击事件中动态改变model_zIndex 的值：
javascript
Image($r('app.media.ic_add'))
.width(20)
.fillColor('#007AFF')
.margin({
right: 10
})
.onClick(() => {
this.model_zIndex = 99
})4、隐藏弹窗
在"取消"按钮上绑定点击事件，并在点击事件中修改 model_zIndex的值：
javascript
Text('取消')
.fontSize(18)
.fontColor('#007AFF')
.onClick(() => {
this.model_zIndex = -1
})完整代码
index.ets文件的完整代码如下：
javascript
interface card {
icon: string
num: number
bgColor: string
iconNum: boolean,
title: string
}
interface list {
icon: string
bgColor: string
title: string
num: number
}
console.log('2222')
@Entry
@Component
struct Index {
@State cardData: card[] = [
{
icon: 'app.media.ic_date',
num: 4,
bgColor: '#007AFF',
iconNum: true,
title: '今天'
},
{
icon: 'app.media.ic_date2',
num: 4,
bgColor: '#ff3a2f',
iconNum: false,
title: '计划'
},
{
icon: 'app.media.ic_box',
num: 6,
bgColor: '#000',
iconNum: false,
title: '全部'
},
{
icon: 'app.media.ic_qizi',
num: 0,
bgColor: '#ff9501',
iconNum: false,
title: '旗标'
},
{
icon: 'app.media.ic_ok',
num: 0,
bgColor: '#596772',
iconNum: false,
title: '完成'
}
]
@State listData:list[] = [
{
icon: 'app.media.ic_list',
bgColor:'#007AFF',
title:'提醒事项',
num:6
},
{
icon: 'app.media.ic_list',
bgColor:'#ff9501',
title:'提醒',
num:0
}
]
@State model_zIndex:number = -1
@State addButtonColor:string = '#ccc'
build() {
Stack() {
Column() {
Row() {
Image($r('app.media.ic_search'))
.width(30)
.fillColor(Color.Gray)
TextInput({ placeholder: '搜索' })
.layoutWeight(1)
.backgroundColor(Color.Transparent)
Image($r('app.media.ic_voice'))
.width(30)
.fillColor(Color.Gray)
}
.width('100%')
.height(50)
.backgroundColor('#e4e3e9')
.borderRadius(15)
.padding({
left: 10,
right: 10
})
Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
ForEach(this.cardData, (item: card, index) => {
Row() {
Column({ space: FlexAlign.SpaceBetween }) {
Stack() {
Row() {
Image($r(item.icon))
.width(index == 2 ? 20 : 30)
}
.width(40)
.height(40)
.borderRadius(40)
.backgroundColor(item.bgColor)
.justifyContent(FlexAlign.Center)
if (item.iconNum) {
Text('12')
.fontColor(Color.White)
.fontSize(12)
.margin({
right: 3,
top: 5
})
}
}
Text(item.title)
.fontColor(Color.Gray)
.fontSize(18)
}
.height('100%')
Blank()
Text(String(item.num))
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.width('48%')
.height(90)
.backgroundColor('#e4e3e9')
.borderRadius(15)
.padding(10)
.alignItems(VerticalAlign.Top)
.margin({
bottom: 10
})
})
}
.margin({
top: 10
})
Text('我的列表')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.alignSelf(ItemAlign.Start)
.margin({
left: 10,
bottom: 10
})
List() {
ForEach(this.listData,(item:list,index) => {
ListItem() {
Row() {
Row() {
Image($r(item.icon))
.width(20)
.fillColor(Color.White)
}
.width(30)
.height(30)
.borderRadius(30)
.backgroundColor(item.bgColor)
.justifyContent(FlexAlign.Center)
.margin({
right: 10
})
Text(item.title)
Blank()
Text(String(item.num))
Image($r('app.media.ic_right')).width(20)
Text('')
.width('90%')
.height(0.5)
.backgroundColor('#ccc')
.position({
bottom: -10,
right: -10
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.height(50)
.width('100%')
.padding({
left: 10,
right: 10
})
})
}
.backgroundColor(Color.White)
.borderRadius(10)
}
.width('100%')
.height('100%')
.padding(15)
.backgroundColor('#fff2f8')
Row() {
Image($r('app.media.ic_add'))
.width(20)
.fillColor('#007AFF')
.margin({
right: 10
})
.onClick(() => {
this.model_zIndex = 99
})
Text('添加提醒事项')
.fontColor('#007AFF')
Blank()
Text('添加列表')
.fontColor('#007AFF')
}
.width('100%')
.padding(15)
Column(){
Column(){
Row() {
Text('取消')
.fontSize(18)
.fontColor('#007AFF')
.onClick(() => {
this.model_zIndex = -1
})
Text('新提醒事项')
.fontSize(20)
.fontWeight(FontWeight.Bold)
Text('添加')
.fontSize(18)
.fontColor(this.addButtonColor)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Column() {
TextInput({placeholder:'标题'})
.backgroundColor('#fff')
.borderRadius(0)
Text('')
.width('95%')
.height(0.5)
.backgroundColor('#ccc')
.alignSelf(ItemAlign.End)
TextInput({placeholder:'备注'})
.backgroundColor('#fff')
}
.width('100%')
.height(180)
.backgroundColor('#fff')
.padding({
top:5
})
.borderRadius(10)
.margin({
top:20
})
Row(){
Text('详细信息')
Blank()
Image($r('app.media.ic_right'))
.width(20)
}
.width('100%')
.height(50)
.backgroundColor('#fff')
.margin({
top:20
})
.padding(10)
.borderRadius(6)
Row() {
Row(){
Image($r('app.media.ic_list'))
.width(20)
.fillColor('#fff')
}
.width(30)
.height(30)
.borderRadius(30)
.backgroundColor('#007AFF')
.justifyContent(FlexAlign.Center)
.margin({
right:10
})
Text('列表')
Blank()
Text('提醒事项')
Image($r('app.media.ic_right'))
.width(20)
}
.width('100%')
.height(50)
.backgroundColor('#fff')
.margin({
top:20
})
.padding(10)
.borderRadius(6)
}
.width('100%')
.height('95%')
.backgroundColor('#fff2f8')
.padding(10)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.End)
.backgroundColor('#cd000000')
.zIndex(this.model_zIndex)
}
.alignContent(Alignment.Bottom)
}
}