【鸿蒙】HarmonyOS NEXT星河入门到实战5-基础语法

news2024/12/24 9:49:05

目录

一、字符串拼接

1.1 常规字符串拼接

1.2 模板字符串`hello`(符号在键盘的tab上面)

二、类型转换 (数字和字符串)

2.1 字符串转数字

 2.2 数字转字符串

三、交互

3.1 点击事件

3.2 状态管理

 3.3 计数器案例

四、运算符

4.1 算数运算符

 4.2 赋值运算符

4.3 点赞案例  ​编辑

4.4 一元运算符

4.5 比较运算符

4.6 逻辑运算符

4.7 运算符的优先级

4.8 综合案例-美团购物车

五、数组与语句

5.1 数组的操作

5.1.1 查找与修改 

5.1.2 增加数组元素 

5.1.3 删除数组元素 

5.1.4 任意位置添加/删除数组元素 

5.1.5 小结 

5.2 语句 

5.2.1 if分支语句 

5.2.1.1 单分支语句

5.2.1.2 双分支语句

 5.2.1.3 小结

5.2.1.4 案例-购物车数字框

5.2.1.5 if-多分支

 5.2.2 switch -分支语句

5.2.3 三元条件表达式

5.2.4 条件渲染

5.2.5 条件渲染案例-京东加购

5.2.6 循环语句

5.2.6.1 while-语句

5.2.6.2 for循环语句

5.2.6.3 退出循环 -break-continue

5.2.6.4 遍历数组

5.2.6.4.1 使用for遍历 数组​编辑

5.2.6.4.2 使用for...of 遍历数组 

5.2.6.4.3 案例

5.2.7 对象数组

5.2.8 ForEach渲染控制

5.2.8.1 ForEach渲染控制

5.2.8.2 FofEach案例 -新闻列表

 六、渲染控制综合案例

6.1 生肖抽卡-初始布局-Badge角标组件

6.2 生肖抽卡 - 初始布局-Grid布局

6.3 生肖抽卡 - 数据动态渲染

6.4 生肖抽卡 - 遮罩和显隐动画

6.4.1 抽卡遮罩层

6.4.2 生肖抽卡 -显隐效果控制

6.4.3 生肖抽卡 -随机卡片

6.4.4 生肖抽奖 - 抽大奖

6.4.4.1 抽大奖遮罩层

6.4.4.2 抽大奖显隐控制

6.4.5 生肖抽卡- 随机抽卡&再来一次


前言:学习数据类型、控制语句等

一、字符串拼接

1.1 常规字符串拼接

import window from '@ohos.window';
let name: string = '春天的菠菜'
let age: number = 18
console.log('简介信息:','姓名' + name)
console.log('简介信息:','年龄' + age)

let num1: number = 120
let num2: number = 320
console.log('总数:',num1 + num2)
@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Row(){
      Column(){
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')

  }
}

1.2 模板字符串`hello`(符号在键盘的tab上面)

import window from '@ohos.window';
let name: string = `春天的菠菜`  // 注意这里的符号是 · · tab键盘上面的
let age: number = 18
console.log('简介信息:',`姓名:${name},年龄:${age}`) // 注意这里的符号是 · · tab键盘上面的

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Row(){
      Column(){
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')

  }
}

二、类型转换 (数字和字符串)

2.1 字符串转数字

 

 2.2 数字转字符串

import window from '@ohos.window';
let money: number = 1000.5

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Row(){
      Column(){
        Text(money.toString())
        Text(money.toFixed())
    
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')

  }
}

三、交互

3.1 点击事件

import window from '@ohos.window';


@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';


  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Row(){
      Column(){

        Button('点我,显示对话框')
          .onClick(() =>{
            console.log('你好,这是点击事件')
            AlertDialog.show({
              message: '你好这是一个弹框'
            })
          })
      }
      .width('100%')
    }
    .height('100%')

  }
}

3.2 状态管理

//  1、普通变量只会在初始化时渲染,后续变化,也不会改变
// 2、 状态变量,被装饰器修饰,会自动引起界面的刷新
import window from '@ohos.window';
//  1、普通变量只会在初始化时渲染,后续变化,也不会改变
// 2、 状态变量,被装饰器修饰,会自动引起界面的刷新

// 组件外的普通变量
let myName: string = '春天的菠菜'
@Entry
@Component

struct Index {
  // 组件内的普通变量
  myAge: number = 18

  // 组件内的状态变量
  @State myMessage: string = '点我看我 春天的菠菜七十二变'

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
      Text(myName)
      Text(this.myAge.toString())   // 组件内的普通变量调用需要使用this
      Text(this.myMessage).onClick(() => {
        this.myMessage = '我是猴哥'
      }
      )
    }

  }
}

 3.3 计数器案例

import window from '@ohos.window';

@Entry
@Component

struct Index {

  @State count: number = 1

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Row(){
      Button('-').onClick(() =>{
        this.count  = this.count - 1
      })
      Text(this.count.toString()).margin(10)
      Button('+').onClick(() =>{
        this.count  = this.count + 1
      })

      }
      .padding(20)



  }
}

四、运算符

4.1 算数运算符

 4.2 赋值运算符

 

注意

4.3 点赞案例  

import window from '@ohos.window';

@Entry
@Component

struct Index {
  //  声明状态

  @State myColor: string = '#7e7e7e'

  @State count: number = 8888

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
      Column({space: 8}){
        Image($r('app.media.eyes'))
          .width('100%')
          .borderRadius({topLeft: 6, topRight: 6 })

        Text('考眼力又来你能看到几只鸭子?')
          .fontSize(14)
          .lineHeight(18)
          .padding({left: 5, right: 5})
        Row(){
          Text(){
            ImageSpan($r('app.media.avatar'))
              .width(16)
              .margin({right: 3})
            Span('视野联行眼镜')
              .fontSize(12)
              .fontColor('#7e7e7e')
          }
          Row(){
            Image($r('app.media.ic_love'))
              .margin({right: 3})
              .width(14)
              .fillColor(this.myColor)
            Text(this.count.toString())
              .fontSize(12)
              .fontColor(this.myColor)
          }
          .onClick(() => {
            // 修改数字
            this.count += 1
          //   修改验收
            this.myColor = '#ff0000'

          })

          }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({left: 5, right: 5})


      }
      .width('50%')
    }
    .padding(20)
  }
}

4.4 一元运算符

4.5 比较运算符

4.6 逻辑运算符

4.7 运算符的优先级

注意 !在一元,优先级高

4.8 综合案例-美团购物车

import window from '@ohos.window';

@Entry
@Component

struct Index {
  //  声明状态

  @State oldPrice: number = 40.4
  @State newPrice: number = 20.4
  @State count: number = 1

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column() {
      Column() {
        // 产品
        Row({ space: 10}){
          // 图片
          Image($r('app.media.product1'))
            .width(100)
            .borderRadius(8)
          // 文字
          Column({space: 10}) {
            Column({ space: 6}) {
              Text('冲销量1000ml缤纷八果水果捞')
                .lineHeight(20)
                .fontSize(14)
              Text('含1份折扣商品')
                .fontSize(12)
                .fontColor('#7f7f7f')
            }
            .width('100%')
            .alignItems(HorizontalAlign.Start)
            Row(){
              // 价格
              Row({ space: 5}) {
                Text() {
                  Span('¥')
                    .fontSize(14)
                  Span(this.newPrice.toString())
                    .fontSize(18)
                }
                .fontColor('#ff4000')
                Text() {
                  Span('¥')
                  Span(this.oldPrice.toString())
                }
                .fontSize(14)
                .fontColor('#999')
                .decoration({type: TextDecorationType.LineThrough, color: '#999'})
              }
              // 加减
              Row() {
                Text('-')
                  .width(22)
                  .height(22)
                  .border({width:1, color: '#e1e1e1', radius: {topLeft: 5, bottomLeft: 5}})
                  .textAlign(TextAlign.Center)
                  .fontWeight(700)
                  .onClick( () =>{
                    this.count -= 1
                  })
                Text(this.count.toString())
                  .height(22)
                  .border({width: { top:1, bottom: 1 }, color: '#e1e1e1'})
                  .padding({left: 10, right: 10})
                  .fontSize(14)
                Text('+')
                  .width(22)
                  .height(22)
                  .border({width:1, color: '#e1e1e1', radius: {topRight: 5, bottomRight: 5}})
                  .textAlign(TextAlign.Center)
                  .fontWeight(700)
                  .onClick( () => {
                    this.count += 1
                  })
              }
            }
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .height(75)
          .layoutWeight(1)
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .width('100%')
        .alignItems(VerticalAlign.Top)
        .padding(20)

        // 结算
        Row({ space: 10 }){
          // 价格
          Column({space: 5}) {
            Text() {
              Span(`已选 ${this.count.toString()} 件,`) // 注意使用tab上面的符号
                .fontColor('#848484')
              Span('合计:')
              Span('¥')
                .fontColor('#fd4104')
              Span((this.newPrice * this.count).toFixed(2))
                .fontColor('#fd4104')
                .fontSize(16)
            }
            .fontSize(14)
            Text(`共减¥${((this.oldPrice - this.newPrice) * this.count).toFixed(2)}`)  //注意符号是tab上面的
              .fontColor('#fd4104')
              .fontSize(12)
          }
          .alignItems(HorizontalAlign.End)
          // 结算按钮
          Button('结算外卖')
            .width(110)
            .height(40)
            .backgroundColor('#fed70e')
            .fontColor('#564200')
            .fontSize(16)
            .fontWeight(600)
        }
        .width('100%')
        .height(70)
        .backgroundColor('#fff')
        .position({x:0, y: '100%'})
        .translate({y: '-100%'})
        .padding({ left: 20, right: 20 })
        .justifyContent(FlexAlign.End)
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f3f3f3')
  }
}

五、数组与语句

5.1 数组的操作

5.1.1 查找与修改 

5.1.2 增加数组元素 

 

5.1.3 删除数组元素 

5.1.4 任意位置添加/删除数组元素 

5.1.5 小结 

 

5.2 语句 

5.2.1 if分支语句 

5.2.1.1 单分支语句

5.2.1.2 双分支语句

 

 5.2.1.3 小结

 

 

5.2.1.4 案例-购物车数字框


import window from '@ohos.window';

@Entry
@Component

struct Index {

  @State count: number = 1

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Row(){
      Button('-').onClick(() =>{
        if(this.count >= 1){
          this.count--
        }else {
          AlertDialog.show({
            message: '不能再减了!'
          })
        }

      })
      Text(this.count.toString()).margin(10)
      Button('+').onClick(() =>{
        this.count++
      })

    }
    .padding(20)



  }
}

5.2.1.5 if-多分支

 5.2.2 switch -分支语句

5.2.3 三元条件表达式

5.2.4 条件渲染

import window from '@ohos.window';
@Entry
@Component

struct Index {
  @State age: number = 13
  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
      if(this.age < 18){
        Text('未成年')
      }else if(this.age >= 18 && this.age <= 60){
        Text('成年人18-60')
      }else{
        Text('老年人')
      }
      Button('长大').onClick( () => {
        this.age += 5
      })
        .margin({top: 5})
      Text(`当前年龄:${this.age}`).margin({top: 5})

    }
    .width('100%')
    .padding(20)
    .backgroundColor(Color.Pink)

  }
}

 

5.2.5 条件渲染案例-京东加购

import window from '@ohos.window';
@Entry
@Component

struct Index {
  @State count: number = 2 //无库存
  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column() {
      Column() {
        // 底部菜单
        Row({space: 10}) {
          // 左侧菜单
          Row() {
            Column({space: 5}) {
              Image($r('app.media.ic_dianpu'))
                .width(20)
              Text('店铺')
                .fontSize(10)
                .fontColor('#262626')
            }
            Column({space: 5}) {
              Image($r('app.media.ic_kefu'))
                .width(20)
                .fillColor('#666')
              Text('客服')
                .fontSize(10)
                .fontColor('#262626')
            }
            Column({space: 5}) {
              Image($r('app.media.ic_cart2'))
                .width(20)
                .fillColor('#666')
              Text('购物车')
                .fontSize(10)
                .fontColor('#262626')
            }
          }
          .layoutWeight(1)
          .justifyContent(FlexAlign.SpaceBetween)

          if(this.count > 0){
            // 右侧按钮 -- 可以购买
            Row({space: 5}) {
              Button('加入购物车')
                .width(105)
                .height(40)
                .backgroundColor('#ffcc00')
                .fontSize(14)
                .fontWeight(600)
              Button('立即购买')
                .width(105)
                .height(40)
                .backgroundColor('#f92c1b')
                .fontSize(14)
                .fontWeight(600)
            }
          }else{
            // 右侧按钮 -- 不能购买
            Row() {
              Button('查看类似商品')
                .width(170)
                .height(40)
                .backgroundColor('#ffcc00')
                .fontSize(14)
                .fontWeight(600)
            }
          }
        }
        .width('100%')
        .height(60)
        .backgroundColor('#f7f7f7')
        .padding({left: 20, right: 10})

        if(this.count <= 0){
          // 消息提示:库存 <= 0 显示,否则隐藏
          Row() {
            // 左侧
            Row({ space: 5 }){
              Image($r('app.media.ic_lingdang'))
                .width(12)
                .fillColor('#de6a1c')
              Text('该商品暂时没有库存,看看相似商品吧')
                .fontSize(10)
                .fontColor('#de6a1c')
            }
            // 右侧
            Image($r('app.media.ic_shangjiantou'))
              .width(15)
              .padding(3)
              .fillColor('#d0662c')
              .backgroundColor('rgba(0,0,0,0.1)')
              .borderRadius(8)
          }
          .width('100%')
          .height(36)
          .backgroundColor('#fbf9da')
          .position({x: 0, y: '-36'})
          .padding({left: 20, right: 20})
          .justifyContent(FlexAlign.SpaceBetween)

        }



      }
      .position({x:0,y:'100%'})
      .translate({y: '-100%'})
    }
    .width('100%')
    .height('100%')
    .padding({bottom:20})
    .backgroundColor('#f2f2f2')

  }
}

5.2.6 循环语句

5.2.6.1 while-语句

 

 

// while循环: 可以重复的执行一段代码
// while (条件) {
//   需要循环执行的语句
// }

// 死循环: 没有结束条件
// while (true) {
//   console.log('while', '重复执行的代码')
// }

// 实际开发真正需要的, 有次数的循环
// 三要素: 变量初始值; 判断条件; 变化量(变量要变)
// let i: number = 1
// while (i < 10) {
//   console.log('小于10成立', '执行代码', i) // 9
//   i++ // 10
// }

// 需求1: 打印1-100的数字,  1, 2, 3, 4, 5 ... 100
// 三要素: 变量起始值; 判断条件; 变化量;
// let i: number = 1
// while (i <= 100) {
//   console.log('i的值:', i)
//   i++
// }

// let i: number = 100
// while (i >= 1) {
//   console.log('i的值:', i)
//   i--
// }

// 需求2: 打印 1-100 中的偶数
// let i: number = 1
// while (i <= 100) {
//   if (i % 2 === 0) {
//     console.log('i的值:', i)
//   }
//   i++
// }

// 需求3: 计算 1-10 的数字的 累加和,  1 + 2 + 3 + 4 + 5 ... + 10
// 三要素: 变量起始值; 判断条件; 变化量;
let i: number = 1
let sum: number = 0 // 存储累加的结果

while (i <= 10) {
  console.log('需要累加的数字:', i)
  // 每次执行下面这行代码, 就会进行一次累加, 并且更新累加的结果
  sum = sum + i
  i++
}
console.log('累加结果:', sum)


@Entry
@Component
struct Index {
  @State num:number = 1
  build() {
    
  }
}
5.2.6.2 for循环语句

 

 

// for (初始值; 循环条件; 变化量) {
//   重复执行的代码(循环体)
// }

// 需求: 打印 1-10 →  从 1 开始, 循环到 10 结束
// for (let i: number = 1; i <= 10; i++) {
//   console.log('for循环', i)
// }


// 1-10的和, 从1开始,循环到10
let sum = 0
for (let i: number = 1; i <= 10; i++) {
  console.log('for', i)
  sum = sum + i // sum += i
}
console.log('求和', sum)


@Entry
@Component
struct Index {
  build() {

  }
}
5.2.6.3 退出循环 -break-continue

// 退出循环:
// 1. break: 终止整个循环 (后面的循环不执行了)
// 2. continue: 退出当前这一次循环, 继续执行下一次循环 (包子当前这个不吃了, 吃下一个)

// 1. 一共8个包子, 吃到第5个, 饱了
// for (let i: number = 1; i <= 8; i++) {
//   if (i == 5) {
//     console.log('拿起了第5个包子, 发现吃不动了')
//     // 终止当前的循环 (本次循环后面的代码不执行了, 且后续循环的代码也不执行了, 跳出循环)
//     break
//   }
//   console.log('吃包子:', `第${i}个`)
// }
//
// console.log('这是循环外的代码')


// 2. 一个8个包子, 吃到第5个, 坏了
for (let i: number = 1; i <= 8; i++) {
  if (i == 5) {
    console.log('拿起了第5个包子, 发现坏了')
    // 当前这次循环不继续执行了, 继续执行下一次循环
    continue
  }
  console.log('吃包子:', `第${i}个`)
}

console.log('这是循环外的代码')


@Entry
@Component
struct Index {
  build() {

  }
}

5.2.6.4 遍历数组
5.2.6.4.1 使用for遍历 数组
5.2.6.4.2 使用for...of 遍历数组 

 

 

// 遍历数组: 利用循环, 依次按顺序访问数组的每一项
let names: string[] = ['大强', '老莫', '小龙', '大黑', '小黄']

// 数组的最后一项 names[names.length - 1]
// for (let i: number = 0; i < names.length; i++) {
//   console.log('名字是', names[i])
// }

for (let item of names) {
  console.log('数组中的每一项', item)
}


@Entry
@Component
struct Index {
  build() {

  }
}
5.2.6.4.3 案例

// 需求1: 求出下列数组元素的 累加和
// [22, 3, 44, 55, 80]
// let sum: number = 0
// let arr: number[] = [22, 3, 44, 55, 80]
//
// for (let item of arr) {
//   // console.log('每一项', item)
//   sum = sum + item
// }
// console.log('结果', sum)


// 需求2:筛选 数组中 大于等于10 的 元素,收集到一个新数组中
// [22, 3, 44, 55, 80, 10, 11, 5, -1]
// let arr: number[] = [22, 3, 44, 55, 80, 10, 11, 5, -1]
// let newArr: number[] = []
//
// // 遍历arr, 符合条件, push到newArr里面去
// for (let item of arr) {
//   if (item >= 10) {
//     newArr.push(item)
//   }
// }
// console.log('新数组', newArr)



// 需求3:数组去0,将数组中 不是0 的项收集到一个新数组中
// [22, 3, 0, 55, 0, 0, 11, 5, 0]
let arr: number[] = [22, 3, 0, 55, 0, 0, 11, 5, 0]
let newArr: number[] = []

for (let num of arr) {
  if (num != 0) {
    newArr.push(num)
  }
}
console.log('新数组', newArr)


@Entry
@Component
struct Index {
  build() {

  }
}

5.2.7 对象数组

// 对象数组 => 数组中包裹存储了很多的对象
// 1. 约定接口 (对象的类型)
interface Student {
  stuId: number
  name: string
  gender: string
  age: number
}

// 2. 基于接口, 构建对象数组
let stuArr: Student[] = [
  { stuId: 1, name: '小丽', gender: '女', age: 12 },
  { stuId: 2, name: '小红', gender: '女', age: 11 },
  { stuId: 3, name: '大强', gender: '男', age: 12 },
  { stuId: 4, name: '阿明', gender: '男', age: 13 },
]
// 包括对象的复杂数据,如果想要在日志中打印, 需要调用一个方法, 转成字符串格式
// JSON.stringify(复杂类型)  对象/数组
// console.log('学生数组', JSON.stringify(stuArr))

// 3. 具体使用 (访问 →  通过下标)
// console.log('小红', stuArr[1].name)
// console.log('小红', JSON.stringify(stuArr[1]))

// 4. 也支持遍历 for... of, 普通for
for (let item of stuArr) {
  console.log('每一项', JSON.stringify(item))
}


@Entry
@Component
struct Index {
  build() {

  }
}

5.2.8 ForEach渲染控制

5.2.8.1 ForEach渲染控制


 

import window from '@ohos.window';
@Entry
@Component

struct Index {
  @State titles:string[] = [
    '电子产品',
    '精品服饰',
    '母婴产品',
    '影音娱乐',
    '海外旅游'
  ]
  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column() {
      ForEach(this.titles, (item: string, index: number) => {
        Text(`${index + 1} ${item}`)
          .fontSize(24)
          .fontWeight(700)
          .fontColor(Color.Orange)
          .padding(15)
          .width('100%')
      })
    }

  }
}

5.2.8.2 FofEach案例 -新闻列表

import window from '@ohos.window';
import { it } from '@ohos/hypium';

interface Article {
  title: string
  createTime: string
}

@Entry
@Component

struct Index {
  @State articles: Article[] = [
    {
      title: '近200+自动驾驶数据集全面调研!一览如何数据闭环全流程',
      createTime: '2024-01-31 09:59:43'
    },
    {
      title: 'MySQL Shell 8.0.32 for GreatSQL编译二进制包',
      createTime: '2024-01-31 09:55:53'
    },
    {
      title: '在Redis中如何实现分布式事务的一致性?',
      createTime: '2024-01-31 09:54:51'
    },
  ]
  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
  Scroll() {
    Column() {
      // 单个新闻结构
      Column() {
        ForEach( this.articles, (item: Article, Index: number) =>{
          Text(item.title)
            .width('100%')
            .fontSize(15)
            .fontColor('#303030')
            .lineHeight(20)
          Text(item.createTime)
            .margin({top: 15})
            .width('100%')
            .fontSize(12)
            .fontColor('rgb(192, 192, 192)')
        })

      }
      .padding({top: 15, bottom: 15})
      .width('100%')
      .border({
        width: {bottom: 2},
        color: {bottom: '#f4f4f4'}
      })

    }
    .constraintSize({
      minHeight: '100%'
    })
  }
  .padding({ left: 13, right: 13 })
  .width('100%')
  .height('100%')

  }
}

 六、渲染控制综合案例

6.1 生肖抽卡-初始布局-Badge角标组件

import window from '@ohos.window';
@Entry
@Component

struct Index {

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){
     Badge({
       count: 1,
       position: BadgePosition.RightTop,
       style: {
         badgeSize: 20,
         fontSize: 14,
         badgeColor: '#fa2aad'
       }
     }){
       Image($r('app.media.bg_01'))
         .width(100)
     }

    }


  }
}

 

6.2 生肖抽卡 - 初始布局-Grid布局

@Entry
@Component
struct Index {
  build() {
    // Grid布局的基本使用: 规则的行列布局中非常常见, 3行4列
    Grid() {
      ForEach([1,2,3,4,5,6,7,8,9,10,11,12], () => {
        GridItem() {
          Column() {

          }
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .border({ width: 1 })
        }
      })
    }
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr')
    .columnsGap(5)
    .rowsGap(5)
    .width('100%')
    .height(500)
    .backgroundColor(Color.Pink)
  }
}

import window from '@ohos.window';
@Entry
@Component

struct Index {

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){

    Grid(){
      ForEach([1,2,3,,4,5,6], ()=>{
        GridItem(){
          Badge({
            count: 1,
            position: BadgePosition.RightTop,
            style: {
              badgeSize: 20,
              fontSize: 14,
              badgeColor: '#fa2aad'
            }
          }){
            Image($r('app.media.bg_01'))
              .width(80)
          }


        }
      })

    }
    .columnsTemplate('1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr')
    .width('100%').height(300)
    .margin({top: 100})
      Button('立即抽卡')
        .width(200)
        .backgroundColor('#ed5b8c')
        .margin({top: 50})


    }
  }
}

6.3 生肖抽卡 - 数据动态渲染

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {
  url: string
  count: number
}
@Entry
@Component

struct Index {
  // 2. 基于接口, 准备数据
  @State images: ImageCount[] = [
    { url: 'app.media.bg_00', count: 0 },
    { url: 'app.media.bg_01', count: 1 },
    { url: 'app.media.bg_02', count: 2 },
    { url: 'app.media.bg_03', count: 3 },
    { url: 'app.media.bg_04', count: 4 },
    { url: 'app.media.bg_05', count: 5 }
  ]

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Column(){

    Grid(){
      ForEach(this.images, (item: ImageCount,Index)=>{
        GridItem(){
          Badge({
            count: item.count,
            position: BadgePosition.RightTop,
            style: {
              badgeSize: 20,
              fontSize: 14,
              badgeColor: '#fa2aad'
            }
          }){
            Image($r(item.url))
              .width(80)
          }


        }
      })

    }
    .columnsTemplate('1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr')
    .width('100%').height(300)
    .margin({top: 100})
      Button('立即抽卡')
        .width(200)
        .backgroundColor('#ed5b8c')
        .margin({top: 50})


    }
  }
}

6.4 生肖抽卡 - 遮罩和显隐动画

6.4.1 抽卡遮罩层

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {
  url: string
  count: number
}
@Entry
@Component

struct Index {
  // 2. 基于接口, 准备数据
  @State images: ImageCount[] = [
    { url: 'app.media.bg_00', count: 0 },
    { url: 'app.media.bg_01', count: 1 },
    { url: 'app.media.bg_02', count: 2 },
    { url: 'app.media.bg_03', count: 3 },
    { url: 'app.media.bg_04', count: 4 },
    { url: 'app.media.bg_05', count: 5 }
  ]

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Stack(){
      // 初始化的布局结果
      Column(){

        Grid(){
          ForEach(this.images, (item: ImageCount,Index)=>{
            GridItem(){
              Badge({
                count: item.count,
                position: BadgePosition.RightTop,
                style: {
                  badgeSize: 20,
                  fontSize: 14,
                  badgeColor: '#fa2aad'
                }
              }){
                Image($r(item.url))
                  .width(80)
              }


            }
          })

        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .width('100%').height(300)
        .margin({top: 100})
        Button('立即抽卡')
          .width(200)
          .backgroundColor('#ed5b8c')
          .margin({top: 50})


      }
      .width('100%').height('100%')
      .backgroundColor(Color.Pink)

      // 抽卡遮罩层
      Column({space: 30}){
        Text('获得生肖卡')
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
        Image($r('app.media.img_00'))
          .width(200)
        Button('开心收下')
          .width(200).height(50)
          .backgroundColor(Color.Transparent) //透明背景色
          .border({width: 2,color: '#fff9e0'})

      }
      .justifyContent(FlexAlign.Center)
      .width('100%').height('100%')
      // 颜色十六进制色值如果是八位,就是透明度
      .backgroundColor('#cc000000')

    }


  }
}

6.4.2 生肖抽卡 -显隐效果控制

 

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {
  url: string
  count: number
}

@Entry
@Component

struct Index {
  // 2. 基于接口, 准备数据
  @State images: ImageCount[] = [
    { url: 'app.media.bg_00', count: 0 },
    { url: 'app.media.bg_01', count: 1 },
    { url: 'app.media.bg_02', count: 2 },
    { url: 'app.media.bg_03', count: 3 },
    { url: 'app.media.bg_04', count: 4 },
    { url: 'app.media.bg_05', count: 5 }
  ]

  //控制遮罩的显隐
  @State maskOpacity: number = 0

  // 层级显隐
  @State maskIndex: number = -1
  // 控制图片的缩放
  @State maskImgX: number = 0
  @State maskImgY: number = 0

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Stack(){
      // 初始化的布局结果
      Column(){

        Grid(){
          ForEach(this.images, (item: ImageCount,Index: number)=>{
            GridItem(){
              Badge({
                count: item.count,
                position: BadgePosition.RightTop,
                style: {
                  badgeSize: 20,
                  fontSize: 14,
                  badgeColor: '#fa2aad'
                }
              }){
                Image($r(item.url))
                  .width(80)
              }


            }
          })

        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .width('100%').height(300)
        .margin({top: 100})
        Button('立即抽卡')
          .width(200)
          .backgroundColor('#ed5b8c')
          .margin({top: 50})
          .onClick( () => {
            this.maskOpacity = 1
            this.maskIndex = 999
          //   点击时,突破需要缩放
            this.maskImgX = 1
            this.maskImgY = 1
          })


      }
      .width('100%').height('100%')
      // .backgroundColor(Color.Pink)

      // 抽卡遮罩层
      Column({space: 30}){
        Text('获得生肖卡')
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
        Image($r('app.media.img_00'))
          .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.maskIndex = -1
          //   图形重置缩放比为0
            this.maskImgX = 0
            this.maskImgY = 0
          })

      }
      .justifyContent(FlexAlign.Center)
      .width('100%').height('100%')
      // 颜色十六进制色值如果是八位,就是透明度
      .backgroundColor('#cc000000')
      //设置透明度
      .opacity(this.maskOpacity)
      .zIndex(this.maskIndex)
      //   动画 animation
      .animation({
        duration: 200
      })

    }


  }
}

6.4.3 生肖抽卡 -随机卡片

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {
  url: string
  count: number
}

@Entry
@Component

struct Index {
  //  随机的生肖卡序号
  @State randomIndex: number = -1 // 还没有开始抽

  // 2. 基于接口, 准备数据
  @State images: ImageCount[] = [
    { url: 'app.media.bg_00', count: 0 },
    { url: 'app.media.bg_01', count: 0 },
    { url: 'app.media.bg_02', count: 0 },
    { url: 'app.media.bg_03', count: 0 },
    { url: 'app.media.bg_04', count: 0 },
    { url: 'app.media.bg_05', count: 0 }
  ]

  //控制遮罩的显隐
  @State maskOpacity: number = 0

  // 层级显隐
  @State maskIndex: number = -1
  // 控制图片的缩放
  @State maskImgX: number = 0
  @State maskImgY: number = 0

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Stack(){
      // 初始化的布局结果
      Column(){

        Grid(){
          ForEach(this.images, (item: ImageCount,Index: number)=>{
            GridItem(){
              Badge({
                count: item.count,
                position: BadgePosition.RightTop,
                style: {
                  badgeSize: 20,
                  fontSize: 14,
                  badgeColor: '#fa2aad'
                }
              }){
                Image($r(item.url))
                  .width(80)
              }


            }
          })

        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .width('100%').height(300)
        .margin({top: 100})
        Button('立即抽卡')
          .width(200)
          .backgroundColor('#ed5b8c')
          .margin({top: 50})
          .onClick( () => {
            this.maskOpacity = 1
            this.maskIndex = 999
          //   点击时,突破需要缩放
            this.maskImgX = 1
            this.maskImgY = 1
          //    计算随机数 Math.random() [0,1)
            this.randomIndex = Math.floor(Math.random() * 6)
          })


      }
      .width('100%').height('100%')
      // .backgroundColor(Color.Pink)

      // 抽卡遮罩层
      Column({space: 30}){
        Text('获得生肖卡')
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
        Image($r(`app.media.img_0${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.maskIndex = -1
          //   图形重置缩放比为0
            this.maskImgX = 0
            this.maskImgY = 0
          //   开心收下逻辑,对象数组的情况需要更新,需要修改替换整个对象
          //   this.images[this.randomIndex].url
            this.images[this.randomIndex] ={
              url: `app.media.img_0${this.randomIndex}`,
              count: this.images[this.randomIndex].count + 1

            }
          })

      }
      .justifyContent(FlexAlign.Center)
      .width('100%').height('100%')
      // 颜色十六进制色值如果是八位,就是透明度
      .backgroundColor('#cc000000')
      //设置透明度
      .opacity(this.maskOpacity)
      .zIndex(this.maskIndex)
      //   动画 animation
      .animation({
        duration: 200
      })

    }


  }
}

6.4.4 生肖抽奖 - 抽大奖

6.4.4.1 抽大奖遮罩层

 

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {
  url: string
  count: number
}

@Entry
@Component

struct Index {
  //  随机的生肖卡序号
  @State randomIndex: number = -1 // 还没有开始抽

  // 2. 基于接口, 准备数据
  @State images: ImageCount[] = [
    { url: 'app.media.bg_00', count: 0 },
    { url: 'app.media.bg_01', count: 0 },
    { url: 'app.media.bg_02', count: 0 },
    { url: 'app.media.bg_03', count: 0 },
    { url: 'app.media.bg_04', count: 0 },
    { url: 'app.media.bg_05', count: 0 }
  ]

  //控制遮罩的显隐
  @State maskOpacity: number = 0

  // 层级显隐
  @State maskIndex: number = -1
  // 控制图片的缩放
  @State maskImgX: number = 0
  @State maskImgY: number = 0

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Stack(){
      // 初始化的布局结果
      Column(){

        Grid(){
          ForEach(this.images, (item: ImageCount,Index: number)=>{
            GridItem(){
              Badge({
                count: item.count,
                position: BadgePosition.RightTop,
                style: {
                  badgeSize: 20,
                  fontSize: 14,
                  badgeColor: '#fa2aad'
                }
              }){
                Image($r(item.url))
                  .width(80)
              }


            }
          })

        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .width('100%').height(300)
        .margin({top: 100})
        Button('立即抽卡')
          .width(200)
          .backgroundColor('#ed5b8c')
          .margin({top: 50})
          .onClick( () => {
            this.maskOpacity = 1
            this.maskIndex = 999
          //   点击时,突破需要缩放
            this.maskImgX = 1
            this.maskImgY = 1
          //    计算随机数 Math.random() [0,1)
            this.randomIndex = Math.floor(Math.random() * 6)
          })


      }
      .width('100%').height('100%')
      // .backgroundColor(Color.Pink)

      // 抽卡遮罩层
      Column({space: 30}){
        Text('获得生肖卡')
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
        Image($r(`app.media.img_0${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.maskIndex = -1
          //   图形重置缩放比为0
            this.maskImgX = 0
            this.maskImgY = 0
          //   开心收下逻辑,对象数组的情况需要更新,需要修改替换整个对象
          //   this.images[this.randomIndex].url
            this.images[this.randomIndex] ={
              url: `app.media.img_0${this.randomIndex}`,
              count: this.images[this.randomIndex].count + 1

            }
          })

      }
      .justifyContent(FlexAlign.Center)
      .width('100%').height('100%')
      // 颜色十六进制色值如果是八位,就是透明度
      .backgroundColor('#cc000000')
      //设置透明度
      .opacity(this.maskOpacity)
      .zIndex(this.maskIndex)
      //   动画 animation
      .animation({
        duration: 200
      })

    //   抽大奖遮罩层
      Column({space: 30}){
        Text('恭喜获得手机一部')
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(700)
        Image($r('app.media.pg'))
          .width(300)
        Button('再来一次')
          .width(200).height(50)
          .backgroundColor(Color.Transparent)
          .border({width: 2,color: '#fff9e0'})

      }.width('100%').height('100%')
      .backgroundColor('#cc000000')
      .justifyContent(FlexAlign.Center)

    }


  }
}

 

6.4.4.2 抽大奖显隐控制

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {
  url: string
  count: number
}

@Entry
@Component

struct Index {
  //  随机的生肖卡序号
  @State randomIndex: number = -1 // 还没有开始抽

  // 2. 基于接口, 准备数据
  @State images: ImageCount[] = [
    { url: 'app.media.bg_00', count: 0 },
    { url: 'app.media.bg_01', count: 0 },
    { url: 'app.media.bg_02', count: 0 },
    { url: 'app.media.bg_03', count: 0 },
    { url: 'app.media.bg_04', count: 0 },
    { url: 'app.media.bg_05', count: 0 }
  ]

  //控制遮罩的显隐
  @State maskOpacity: number = 0

  // 层级显隐
  @State maskIndex: number = -1
  // 控制图片的缩放
  @State maskImgX: number = 0
  @State maskImgY: number = 0

  // 控制中大奖遮罩层显隐
  @State isGet: boolean = false

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Stack(){
      // 初始化的布局结果
      Column(){

        Grid(){
          ForEach(this.images, (item: ImageCount,Index: number)=>{
            GridItem(){
              Badge({
                count: item.count,
                position: BadgePosition.RightTop,
                style: {
                  badgeSize: 20,
                  fontSize: 14,
                  badgeColor: '#fa2aad'
                }
              }){
                Image($r(item.url))
                  .width(80)
              }


            }
          })

        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .width('100%').height(300)
        .margin({top: 100})
        Button('立即抽卡')
          .width(200)
          .backgroundColor('#ed5b8c')
          .margin({top: 50})
          .onClick( () => {
            this.maskOpacity = 1
            this.maskIndex = 999
          //   点击时,突破需要缩放
            this.maskImgX = 1
            this.maskImgY = 1
          //    计算随机数 Math.random() [0,1)
            this.randomIndex = Math.floor(Math.random() * 6)
          })


      }
      .width('100%').height('100%')
      // .backgroundColor(Color.Pink)

      // 抽卡遮罩层
      Column({space: 30}){
        Text('获得生肖卡')
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
        Image($r(`app.media.img_0${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.maskIndex = -1
          //   图形重置缩放比为0
            this.maskImgX = 0
            this.maskImgY = 0
          //   开心收下逻辑,对象数组的情况需要更新,需要修改替换整个对象
          //   this.images[this.randomIndex].url
            this.images[this.randomIndex] ={
              url: `app.media.img_0${this.randomIndex}`,
              count: this.images[this.randomIndex].count + 1

            }
          //   每次收完卡片,需要进行简单的检索,判断是否集齐了
          //   只要有一个是0 就是没有集齐
            let flag: boolean = true //假设集齐
          //   验证是否集齐
            for(let item of this.images) {
              if (item.count == 0) {
                flag = false
                break
              }
            }
            this.isGet = flag


          })

      }
      .justifyContent(FlexAlign.Center)
      .width('100%').height('100%')
      // 颜色十六进制色值如果是八位,就是透明度
      .backgroundColor('#cc000000')
      //设置透明度
      .opacity(this.maskOpacity)
      .zIndex(this.maskIndex)
      //   动画 animation
      .animation({
        duration: 200
      })

    //   抽大奖遮罩层
      if(this.isGet){
        Column({space: 30}){
          Text('恭喜获得手机一部')
            .fontColor('#f5ebcf')
            .fontSize(25)
            .fontWeight(700)
          Image($r('app.media.pg'))
            .width(300)
          Button('再来一次')
            .width(200).height(50)
            .backgroundColor(Color.Transparent)
            .border({width: 2,color: '#fff9e0'})
           

        }.width('100%').height('100%')
        .backgroundColor('#cc000000')
        .justifyContent(FlexAlign.Center)

      }
      }



  }
}

6.4.5 生肖抽卡- 随机抽卡&再来一次

 

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {
  url: string
  count: number
}

@Entry
@Component

struct Index {
  //  随机的生肖卡序号
  @State randomIndex: number = -1 // 还没有开始抽

  // 2. 基于接口, 准备数据
  @State images: ImageCount[] = [
    { url: 'app.media.bg_00', count: 0 },
    { url: 'app.media.bg_01', count: 0 },
    { url: 'app.media.bg_02', count: 0 },
    { url: 'app.media.bg_03', count: 0 },
    { url: 'app.media.bg_04', count: 0 },
    { url: 'app.media.bg_05', count: 0 }
  ]

  //控制遮罩的显隐
  @State maskOpacity: number = 0

  // 层级显隐
  @State maskIndex: number = -1
  // 控制图片的缩放
  @State maskImgX: number = 0
  @State maskImgY: number = 0

  // 控制中大奖遮罩层显隐
  @State isGet: boolean = false

  // 奖池
  @State arr: string[] = ['pg', 'hw', 'xm']  //奖池
  @State prize: string = '' //默认没中奖

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }
  build() {
    Stack(){
      // 初始化的布局结果
      Column(){

        Grid(){
          ForEach(this.images, (item: ImageCount,Index: number)=>{
            GridItem(){
              Badge({
                count: item.count,
                position: BadgePosition.RightTop,
                style: {
                  badgeSize: 20,
                  fontSize: 14,
                  badgeColor: '#fa2aad'
                }
              }){
                Image($r(item.url))
                  .width(80)
              }


            }
          })

        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .width('100%').height(300)
        .margin({top: 100})
        Button('立即抽卡')
          .width(200)
          .backgroundColor('#ed5b8c')
          .margin({top: 50})
          .onClick( () => {
            this.maskOpacity = 1
            this.maskIndex = 999
          //   点击时,突破需要缩放
            this.maskImgX = 1
            this.maskImgY = 1
          //    计算随机数 Math.random() [0,1)
            this.randomIndex = Math.floor(Math.random() * 6)
          })


      }
      .width('100%').height('100%')
      // .backgroundColor(Color.Pink)

      // 抽卡遮罩层
      Column({space: 30}){
        Text('获得生肖卡')
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
        Image($r(`app.media.img_0${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.maskIndex = -1
          //   图形重置缩放比为0
            this.maskImgX = 0
            this.maskImgY = 0
          //   开心收下逻辑,对象数组的情况需要更新,需要修改替换整个对象
          //   this.images[this.randomIndex].url
            this.images[this.randomIndex] ={
              url: `app.media.img_0${this.randomIndex}`,
              count: this.images[this.randomIndex].count + 1

            }
          //   每次收完卡片,需要进行简单的检索,判断是否集齐了
          //   只要有一个是0 就是没有集齐
            let flag: boolean = true //假设集齐
          //   验证是否集齐
            for(let item of this.images) {
              if (item.count == 0) {
                flag = false
                break
              }
            }
            this.isGet = flag

          //   判断是否中奖了,如果是,就需要去抽奖
            if (flag){
              let randomIndex: number = Math.floor(Math.random() * 3)
              this.prize = this.arr[randomIndex]
            }


          })

      }
      .justifyContent(FlexAlign.Center)
      .width('100%').height('100%')
      // 颜色十六进制色值如果是八位,就是透明度
      .backgroundColor('#cc000000')
      //设置透明度
      .opacity(this.maskOpacity)
      .zIndex(this.maskIndex)
      //   动画 animation
      .animation({
        duration: 200
      })

    //   抽大奖遮罩层
      if(this.isGet){
        Column({space: 30}){
          Text('恭喜获得手机一部')
            .fontColor('#f5ebcf')
            .fontSize(25)
            .fontWeight(700)
          Image($r(`app.media.${this.prize}`))
            .width(300)
          Button('再来一次')
            .width(200).height(50)
            .backgroundColor(Color.Transparent)
            .border({width: 2,color: '#fff9e0'})
            .onClick( () => {
              this.isGet = false
              this.prize = ''
              this.images = [
                { url: 'app.media.bg_00', count: 0 },
                { url: 'app.media.bg_01', count: 0 },
                { url: 'app.media.bg_02', count: 0 },
                { url: 'app.media.bg_03', count: 0 },
                { url: 'app.media.bg_04', count: 0 },
                { url: 'app.media.bg_05', count: 0 }
              ]

            })


        }.width('100%').height('100%')
        .backgroundColor('#cc000000')
        .justifyContent(FlexAlign.Center)

      }
      }



  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2125563.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[001-03-007].第26节:分布式锁迭代3->优化基于setnx命令实现的分布式锁-防锁的误删

我的博客大纲 我的后端学习大纲 1、问题分析&#xff1a; 1.1.问题&#xff1a; 1.锁的超时释放&#xff0c;可能会释放其他服务器的锁 1.2.场景&#xff1a; 1.如果业务逻辑的执行时间是7s。执行流程如下 1.index1业务逻辑没执行完&#xff0c;3秒后锁被自动释放。2.index…

企业会议室预约管理系统

基于springbootvuemysql实现的企业会议室预约管理系统&#xff08;源码数据库部署视频&#xff09; ### 主要技术 SpringBoot、Vue、MySQL ### 系统角色 员工、管理员 ### 系统功能 1&#xff09;管理员&#xff1a;数据统计&#xff08;会议室使用统计-柱状图、设备状态统计…

C++:2024/9/11

B. Increase/Decrease/Copy 原题链接&#xff1a;Problem - B - Codeforces 题目大意&#xff1a; ​ 给一颗树&#xff0c;规定编号为1的节点为根节点&#xff0c;每个节点上初始会有一个值&#xff0c;你每次可以进行操作&#xff0c;这个操作是选定一个非叶子节点的节点…

Parallels Desktop 20 最新版,带来哪些新功能(附下载链接)!

很兴奋地向大家宣布&#xff0c;Parallels Desktop 20 for Mac 正式发布啦——这是我们产品迄今为止最强大的版本&#xff01; 这次最大的亮点是全新推出的 Parallels AI 工具包&#xff0c;它提供安全的、可下载的预装虚拟机&#xff0c;让你可以在离线环境中迅速提升 AI 开发…

python中swift包的安装

魔搭社区上经常会有swift这种包需要导,但是在pip install swift怎么装都装不上,这时候需要: pip install ms-swift -U

蓝牙也会更新?新功能有这些便捷之处

本周&#xff0c;蓝牙技术联盟发布了蓝牙 6.0 的最新版本&#xff0c;其中引入了一项名为“信道探测”的新功能。这一功能将大幅提升苹果设备上的“查找”应用表现&#xff0c;为用户带来前所未有的距离感知能力。蓝牙 6.0 承诺&#xff0c;未来的蓝牙设备和配件将能够实现“相…

Eprime学习【E-basic语言、心理学实验程序设计】

文章目录 Eprime学习心理学实验程序设计的基本框架一、实验设计的基本原则二、实验过程&#xff08;procedure&#xff09;与实验列表&#xff08;list&#xff09;三、心理学实验设计的基本模式四、心理学常用的功能与制作 E-basic语言 Eprime学习 心理学实验程序设计的基本框…

MySQL表操作(中)

查询 去重 //相同的行只会保留一个 select distinct 某个列/多个列 from 表名; 这个去重必须是所要进行去重的列的所要去重的数据都是相同&#xff0c;单一某一列相同并不会进行去重的效果。例子如下图&#xff0c;数学得分相同的并未进行去重&#xff0c;必须名字和得分都相同…

工厂安灯系统在设备管理中的重要性

在现代制造业中&#xff0c;设备管理是确保生产效率和产品质量的关键环节。随着工业4.0的推进&#xff0c;越来越多的企业开始采用智能化的设备管理系统&#xff0c;其中安灯系统作为一种有效的管理工具&#xff0c;逐渐受到重视。安灯系统最初源于日本的丰田生产方式&#xff…

友思特方案 | 搭建红外桥梁:嵌入式视觉接口助力红外热像仪传输

导读 为红外成像设备数据传输快速搭桥&#xff01;友思特嵌入式视觉接口能帮助用户快速享有 GigE Vision 协议优势&#xff0c;是红外成像设备视觉接口集成、开发高性能相机的高效快捷方案。 引言 红外热像仪作为一种非接触式设备&#xff0c;能够检测红外能量&#xff08;热量…

Vm软件安装_链接相机

工业相机的驱动连接 下载安装MVS MVS 客户端支持安装在 Windows XP/7/10 32/64bit&#xff0c;Linux 32/64bits 以及MacOS64bits操作系统上。本文以 Windows 系统为例进行介绍。 具体操作步骤如下&#xff1a; 请从海康机器人官网&#xff08;www.hikrobotics.com&#xff0…

【鸿蒙开发从0到1 day09】

鸿蒙开发基础-ArkUI基本布局 一 .设计资源-图标库1.阿里矢量图图标库2.HarmonyOS图标库 二.布局属性1.内边距2.外边距3.边框线4.边框圆角 三.背景属性1.背景颜色2.背景图片(1)背景图的缩放(2)背景图的显示位置 四.颜色渐变1.线性渐变2.径向渐变 五.阴影六.可选择链操作符(?)七…

密码学---真题演练

✨Base加密&#xff1a;题目-base? 靶场网址&#xff1a;https://polarctf.com/ Base100加密&#xff01;&#xff01;&#xff01; 得到的新的一串密码是 rot47 密码&#xff0c;属于凯撒密码的一种变体. 拓展&#xff1a;ROT&#xff08;Rotate&#xff09;编码是一种替换…

远程操作电脑的方法有哪些?

随着远程办公、远程技术支持和跨地域协作的需求不断增加&#xff0c;远程操作电脑的方法也越来越多样化。无论是个人用户还是企业&#xff0c;选择合适的远程控制方法&#xff0c;可以大大提高工作效率。本文将详细介绍几种常见的远程操作电脑的方法&#xff0c;并帮助你选择适…

动态规划(算法)---03.斐波那契数列模型_最小花费爬楼梯

题目链接&#xff1a; 746. 使用最小花费爬楼梯 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/min-cost-climbing-stairs/description/ 一、题目解析 题目&#xff1a; 解析&#xff1a; 题目说cost[i]为从某一个台阶向上爬的的费用&#xff0c;我们…

基于SpringBoot+Vue+MySQL的房屋租赁管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。在互联网诞生之前&#xff0c;地域位置往往是人们思想上不可跨域的鸿沟&#xff0c;信息的…

不可错过的10款电脑监控软件,电脑监控软件推荐收藏

随着科技的飞速发展&#xff0c;企业和个人对电脑监控软件的需求也越来越大。这类软件不仅可以帮助企业有效监控员工工作状态&#xff0c;提高工作效率&#xff0c;还能确保信息安全&#xff0c;防止数据泄露。本文将为您推荐10款不可错过的电脑监控软件&#xff0c;帮助您提升…

VS Code 配置 Rust-Analyzer 报错

报错信息&#xff1a; Bootstrap Error" rust-analyzer requires glibc > 2.28 in latest build. 参考了好多地方&#xff0c; https://github.com/rust-lang/rust-analyzer/issues/11558 https://blog.csdn.net/aLingYun/article/details/120923694 https://rust-anal…

通过IDEA的Maven插件清理maven依赖缓冲

问题 有时候&#xff0c;在IDEA编程的时候&#xff0c;会遇到2个服务都依赖同一个模块&#xff0c;但是&#xff0c;其中有1个服务没有生效&#xff0c;但是&#xff0c;在CLI的maven中检查依赖树&#xff0c;没有任何问题&#xff0c;但是在IDEA中那个服务始终就是没有生效。…

电子发票二维码识别内容解析大全

一、发票二维码信息解析 增值税发票有一个二维码&#xff0c;此二维码通过扫码识别可获取对应信息&#xff0c;随便扫个增值税普通纸质发票二维码获取如下&#xff1a; 01,10,037002300113,01963246,199.27,20240531,14567244254499868363,Cxx0, 那么这一次数字字符具体表示什…