鸿蒙小demo-学生点名应用

勤劳的小陈

于 2024-07-05 23:27:08 发布

阅读量866

点赞数 23

文章标签：鸿蒙

本文链接：https://blog.csdn.net/cqydian/article/details/140220149

版权

interface peron {
  name: string,//姓名
  num: number  //次数
}



@Entry
@Component
struct Index {
    //prr数组里面填写学生信息，填完即可使用
  @State prr: peron[] = [
    { name: '张三', num: 0 },
    { name: '李四', num: 0 },
    { name: '王五', num: 0 },
    { name: '赵六', num: 0 },
    { name: '孙七', num: 0 },
    { name: '朱八', num: 0 },
    { name: '酒九', num: 0 }]
  @State pname: string = ''
  @State msg: string = ''
  @State index: number = -1;
  @State op: number = 0;
  @State randomNumber:number=0;

  build() {

    Stack() {

      Column() {
        Grid() {
          ForEach(this.prr, (item: peron, index: number) => {
            GridItem() {
              Column() {
                Text(item.name)
                  .fontSize(30)
                  .width(100)
                  .height(100)
                  .textAlign(TextAlign.Center)
                  .border({ width: 1 })
                Text(item.num + '')
                  .fontSize(20)
                  .position({ x: 40, y: 70 })
              }
            }
          })
        }
        .width('100%')
        .height(400)
        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr 1fr')
        .columnsGap(5)
        .rowsGap(5)

        Button('点名')
          .margin({ top: 20 })
          .fontSize(30)
          .height(60)
          .width(200)
          .backgroundColor('#ffae2727')
          .onClick(() => {
            this.randomNumber = Math.floor(Math.random() * this.prr.length)
            this.op = 1;
            this.index = 1;
            this.pname = this.prr[this.randomNumber].name;

            this.msg = ('恭喜你！')
          })
      }
      .width('100%')
      .height('100%')
      .animation({
        duration: 500
      })


      Column({ space: 50 }) {
        Text(this.msg)
          .border({ width: 1 })
          .fontSize(30)
          .fontColor('#ffea2929')
          .fontWeight(FontWeight.Bolder)
          .height(50)
          .width(240)
          .textAlign(TextAlign.Center)
        Text(this.pname)
          .fontColor(Color.Blue)
          .fontSize(50)
          .textAlign(TextAlign.Center)
          .width(240)
          .height(200)
          .border({ width: 1 })
          .backgroundColor('#ff42f3ab')
        Button('退出')
          .onClick(() => {
            this.prr[this.randomNumber] = {
              name: this.prr[this.randomNumber].name,
              num: this.prr[this.randomNumber].num + 1
            }
            this.op = 0;
            this.index = -1;
          })
          .width(240)
          .height(50)
          .backgroundColor(Color.Transparent)
          .border({ width: 1 })
          .fontColor('#000')
          .fontSize(30)
      }
      .justifyContent(FlexAlign.Center)
      .opacity(this.op)
      .zIndex(this.index)
      .width('100%')
      .height('100%')
      .backgroundColor('#ffd4d4d4')
      .animation({
        duration: 500
      })

    }

  }
}