开启鸿蒙开发之旅：交互—

前一节我们写好了”提醒事项“APP首页的静态页面，光有静态页面肯定是不够的，更重要的是交互，今天这一节我将来学习最常用的交互事件——点击事件。

点击事件

说明：组件被点击时触发的事件

作用：监听（感知）用户点击行为，进行对应操作

在添加按钮上增加点击事件，点击后弹出添加弹窗。

实现步骤

1、设置动态变量model_zIndex

设置动态zIndex来动态控制弹窗的zIndex的层级，当需要显示时，将层级调高，隐藏时层级调低。

@State model_zIndex:number = -1

2、给弹窗绑定动态zIndex

Coloum(){
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.End)
.backgroundColor('#cd000000')
.zIndex(this.model_zIndex)

3、给元素绑定点击事件

在鸿蒙OS Next中，绑定点击事件直接在元素上.onClick，在点击事件中动态改变model_zIndex 的值：

 Image($r('app.media.ic_add')).width(20).fillColor('#007AFF').margin({right: 10}).onClick(() => {this.model_zIndex = 99})

4、隐藏弹窗

在“取消”按钮上绑定点击事件，并在点击事件中修改 model_zIndex的值：

 Text('取消').fontSize(18).fontColor('#007AFF').onClick(() => {this.model_zIndex = -1})

完整代码

index.ets文件的完整代码如下：

interface card {icon: stringnum: numberbgColor: stringiconNum: boolean,title: string
}interface list {icon: stringbgColor: stringtitle: stringnum: 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)}
}