各位帮我看看为什么我写的代码按钮按了没有反应，deveco studio，

Question

用的ArkTS

interface Student{
  id:number
  name:string
  url:string
  count:number
}
@Entry
@Component
struct Index{
  @State flag:number=1
  @State randomIndex:number=-1//表示还没开始点名
  @State name:string=""//名字
  @State studentArray:Student[]=[
    {id:1,name:"张三",url:'app.media.picture0',count:0},
    {id:2,name:"李四",url:'app.media.picture1',count:0},
    {id:3,name:"王五",url:'app.media.picture2',count:0},
    {id:4,name:"王五",url:'app.media.picture3',count:0},
    {id:5,name:"王五",url:'app.media.picture4',count:0},
    {id:6,name:"丽丽",url:'app.media.picture5',count:0},
  ]
  //遮罩参数
  @State maskOpacity:number=0//透明度
  @State maskZIndex:number=-1//显示层级
  //控制图片缩放
  @State maskImgX:number=0//水平缩放比
  @State maskImgY:number=0//垂直缩放比
  build() {
    Column(){
    Stack() {
      Column() {
        Text("班级成员")
          .fontSize(40)
          .width(200)
          .margin({ top: 20 })
        Grid() {
          ForEach(this.studentArray, (item: Student, index: number) => {
            GridItem() {
              Badge({
                count: item.count,
                position: BadgePosition.RightTop,
                style: {
                  fontSize: 14,
                  badgeSize: 20,
                  badgeColor: '#fa2a2d'
                }
              }) {
                Image($r(item.url))
                  .width(100)
                  .height(100)
              }
            }
          })

        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .width('100%')
        .height(300)
        .margin({ top: 20 })
      }


      Button('开始点名')
        .width(200)
        .backgroundColor('#ed5b8c')
        .margin({ top: 50 })
        .onClick(() => {
          //点击时，修改遮罩参数，让遮罩显示
          this.maskOpacity = 1
          this.maskZIndex = 99
          //点击时，图片需要缩放
          this.maskImgX = 1
          this.maskImgY = 1
          //生成随机数Math.random()
          this.flag = 2;
          this.randomIndex = Math.floor(Math.random() * 6)
          if (this.studentArray[this.randomIndex].count) {
            for (let item of this.studentArray) {
              if (item.count) {
                this.flag = 2
                this.randomIndex = item.id - 1
                break}
               else
                 this.flag = 1
            }
          }
          if (this.flag == 2)
            this.name = this.studentArray[this.randomIndex].name
          else this.name = "班级成员全部点完名字"
        })
      // console.log(studentArray[randomIndex].name)
      // console.log("随机")
    }
    .width('100%')
    .height('100%')

    //抽卡遮罩层
      Column({ space: 30 }) {
        Text('幸运星')
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
        Text(this.name)
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)

        Image($r(`app.media.picture${this.randomIndex}`))
          .width(200)//控制元素缩放
          .scale({
            x: this.maskImgX,
            y: this.maskImgY
          })
          .animation({ duration: 500 })
        Button('重新点名')
          .width(200)
          .height(50)
          .backgroundColor(Color.Transparent)
          .border({ width: 2, color: '#fff9e0' })
          .onClick(() => {
            //控制弹窗显影
            this.maskOpacity=0
            this.maskZIndex=-1
            //图像重置缩放比为0
            this.maskImgX=0
            this.maskImgY=0
            //对象数组情况需要更新，需要修改替换整个对象
            this.studentArray[this.randomIndex]={
              id:this.studentArray[this.randomIndex].id,
              name:this.studentArray[this.randomIndex].name,
              url:`app.media.picture${this.randomIndex}`,
              count:this.studentArray[this.randomIndex].count+1,
            }
          })

      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')
      .backgroundColor('#cc000000')
      //设置透明度
      .opacity(this.maskOpacity)
      .zIndex(this.maskZIndex)
      //动画
      .animation({duration:200})
    }
    }}

按按钮之前

按按钮之后

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

根据您提供的代码，我发现了一些问题导致按钮在DevTools中看起来不起作用：

1. 样式问题：Column()中的网格布局样式可能与CSS规则不匹配或者未正确应用样式。尝试调整CSS以确保所有组件都遵循一致的布局。

2. 事件处理逻辑错误：检查Button组件的onClick方法，确保它能够正确地触发事件。同时，确保您已将按钮添加到相应的容器（如Stack）中，并且当用户点击按钮时，可以访问到这个按钮。

3. 状态管理：randomIndex和maskOpacity等状态变量可能没有被正确初始化或者更新。请确保这些值在每次渲染前都被正确赋值。

下面是修复这些问题的一个示例代码：

import { Component } from '@angular/core';
import { EntryComponent } from './index';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})
export class IndexComponent extends EntryComponent {
  public flag = 1; // 点名状态
  public randomIndex = -1; // 指定一个初始的随机索引
  public name = ""; // 名字

  constructor() {
    super(); // 调用父类构造函数
  }

  ngOnInit(): void {
    // 初始化随机索引和名称
    this.randomIndex = Math.floor(Math.random() * 6);
    this.name = `班级成员全部点完名字`;
  }

  // 处理点击事件
  onClick(): void {
    const opacity = 1; // 设置遮罩透明度
    const zIndex = 99; // 设置遮罩显示层级

    // 更新遮罩参数
    this.maskOpacity = opacity;
    this.maskZIndex = zIndex;

    // 控制图片缩放
    this.maskImgX = 1;
    this.maskImgY = 1;

    // 随机选择学生并更改名称
    if (this.flag === 2 && this.randomIndex !== undefined) {
      this.flag = 2;
      this.randomIndex = this.randomIndex - 1;
      this.name = this.studentArray[this.randomIndex].name;
    } else {
      this.name = "班级成员全部点完名字";
    }
  }
}

// 示例数据
const studentArray: any[] = [
  { id: 1, name: "张三", url: 'app.media.picture0', count: 0 },
  { id: 2, name: "李四", url: 'app.media.picture1', count: 0 },
  { id: 3, name: "王五", url: 'app.media.picture2', count: 0 },
  { id: 4, name: "王五", url: 'app.media.picture3', count: 0 },
  { id: 5, name: "王五", url: 'app.media.picture4', count: 0 },
  { id: 6, name: "丽丽", url: 'app.media.picture5', count: 0 },
];

// 图像缩放比例
const imageSizes = [100, 100, 100, 100, 100, 100];
const maskImageWidths = [100, 100, 100, 100, 100, 100];
const maskImageHeights = [100, 100, 100, 100, 100, 100];

// 使用上述数据创建学生对象数组
const studentObjects = studentArray.map((student, index) => ({
  ...student,
  id: index + 1,
}));

// 创建并显示卡片遮罩层
const cardMask = new CardMask();
cardMask.show(cardMask.width(), cardMask.height());
cardMask.show(cardMask.animationDuration());

// 显示按钮
const buttonContainer = document.querySelector('.button-container');
buttonContainer.appendChild(buttonElement);

// 添加按钮点击事件监听器
document.addEventListener('click', function(event) {
  if (event.target.classList.contains('button')) {
    event.stopPropagation();
  }
});

此代码片段包含了对上述问题的修复，以及如何正确使用CardMask库来创建卡片遮罩层的功能。确保在项目中安装了CardMask库。如果您遇到任何其他问题，请提供更多的信息以便进一步的帮助。