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

于 2024-09-11 17:56:40 发布
阅读量454 收藏 5
点赞数 10
分类专栏： HarmonyOS 文章标签： 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/legend818/article/details/142101393
版权

目录

一、字符串拼接

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)

      }
      }



  }
}

春天的菠菜
关注
  • 10
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
《全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战》是一套针对初学者精心设计的鸿蒙操作系统开发教程。本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，...
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
【鸿蒙】HarmonyOS NEXT星河入门到实战2-ArkTS快速入门
春天的波菜
09-05 559
注意:先定义，后使用(变量、函数都是如此)// 学习函数// 1 定义函数// 2 调用函数star()
HarmonyOS NEXT星河版零基础入门到实战
stc_ljc的博客
07-24 1091
放弃安卓框架之后，HarmonyOS NEXT成为真正独立于安卓、iOS的操作系统，堪称是一场史无前例的脱胎换骨。在其众多新特性中，原生智能无疑是最能带给用户直观感受和体验升级的新特性之一。HarmonyOS NEXT首次将AI与OS深度融合，构筑了全新鸿蒙原生智能框架，真正开启了全新的AI时代。
鸿蒙全栈开发必学！码牛课堂《HarmonyOS NEXT星河版零基础入门到实战教程》，学到就是赚到！_码牛学院鸿蒙(2)
2401_84141401的博客
04-19 502
路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等八大大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入理解鸿蒙开发原理！
鸿蒙全栈开发必学！码牛课堂《HarmonyOS NEXT星河版零基础入门到实战教程》，学到就是赚到！
maniuT的博客
03-05 772
众所周知，码牛发布的免费教程，帮助无数大学生成功踏入IT行业，被同学们亲切的称为“IT启蒙导师”。今年被称为鸿蒙元年，各行业急缺鸿蒙相关人才，从招聘情况来看，鸿蒙人才招聘量同比剧增163%，，更重要的是，主力招聘企业都是中大型互联网企业。古人云：天不得时，日月无光；人不得时，利运不通。现在乃天时也！不少同学已经摩拳擦掌“饥渴难耐”，想上车的同学就要问了，之前，！想要更快更高效从0-1掌握鸿蒙技术，同学们一定要跟着。
HarmonyOS4.0应用开发-学习笔记
Cool_foolisher的博客
04-04 1753
HarmonyOS4.0学习笔记（整理自B站黑马程序员的HarmonyOS4.0教程）
鸿蒙（HarmonyOS）性能优化—Web开发常见问题
2401_82546228的博客
05-28 1335
问题现象onInterceptRequest拦截页面Web的src的链接后返回自定义HTML，但是自定义HTML文件里面的script标签里的内容没有加载。解决措施设置拦截器时，如果只设置setResponseData，内核将无法识别到这是个HTML文件，需要同时设置setResponseEncoding、setResponseMimeType、setResponseHeader等参数。代码示例})解决措施默认UserAgent需要通过WebviewController获取。
鸿蒙HarmonyOS项目实战：实现微信app效果（基础界面搭建）_鸿蒙原生开发 微信
2401_84185516的博客
04-16 1203
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）**技术知识点。有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的。希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，的状态更新之外，还需要对内容区域进行判断展示不同的界面。
鸿蒙真有前景吗？是真是假？，2024年最新高级HarmonyOS鸿蒙开发面试解答
2401_84150320的博客
04-19 569
学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。如今鸿蒙最艰难的时刻已经度过，，然而星河版相关的开发文档需要有一定的要求才能查看，这也导致了不少学习爱好者无法学习到最新的内容。
2024 财源（裁员）广进（鸿蒙开发岗）~(1)，2024年最新HarmonyOS鸿蒙应用开发基础学堂在线答案
2301_79097795的博客
04-20 423
学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。(img-YIIFp0Qv-1713547374491)]：提前布局新方向，抓住风口，自我提升，获得更多就业机会。
黑马HarmonyOS-NEXT星河版实战-课程网盘链接提取码下载 .txt
06-03
"黑马HarmonyOS-NEXT星河版实战"课程旨在帮助学员深入了解HarmonyOS-NEXT星河版操作系统的开发和实际应用。学员将学习操作系统原理、应用开发技巧和界面设计，通过实战项目提升技能。课程注重实践与理论相结合，为...
黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发41-50
06-29
黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发41-50
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程
02-11
### 全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战教程解析 #### 一、鸿蒙开发环境准备与工具下载 本教程旨在帮助初学者从零开始学习鸿蒙 HarmonyOS NEXT 星河版的开发技术。首先，我们需要准备开发环境。...
北方苍鹰优化算法NGO-TCN-LSTM-Multihead-Attention多变量时间序列预测Matlab实现.rar
09-10
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
【独家首发】基于matlab非洲秃鹫算法AVOA-GMDH锂电池寿命SOC估计【含Matlab源码 7531期】.zip
09-10
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化GMDH时序预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化GMDH时序预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化GMDH时序预测 4.4.3 灰狼算法GWO/狼群算法WPA优化GMDH时序预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化GMDH时序预测 4.4.5 萤火虫算法FA/差分算法DE优化GMDH时序预测 4.4.6 其他优化算法优化GMDH时序预测
基于微信的设备故障报修管理系统设计与实现(论文+源码)_kaic.zip
最新发布
09-10
基于微信的设备故障报修管理系统设计与实现(论文+源码)_kaic
【私人云盘源码】/Cloudreve云盘源码/带cloudreve搭建教程 一套简洁好看的云网盘系统+文件共享传输+安装视频教程
09-10
【私人云盘源码】/Cloudreve云盘源码/带cloudreve搭建教程 一套简洁好看的云网盘系统+文件共享传输+安装视频教程+网盘系统 效果演示：onedrive-www.seoheimao.cn 【Cloudreve云盘源码】一套简洁好看的云网盘系统+文件共享传输+安装教程+网盘系统 一套简洁好看的云盘系统，功能强大，可以建立自己和他人文件共享和传输，支持各种文件和视频。 如果是单位和公司，可以建立在本地的服务器上，公司的员工可以随时备份数据具体安装，参考压缩包教程。 安装教程 云盘系统安装教程 以宝塔为例 一、要求环境： 1、PHP7.0 以上 2、安装 PHP 扩展 fileinfo 二、开始安装 1、建立网站，创建数据库 2、上传源码到网站根目录 3、安装 http://域名/CloudreveInstaller/index.php 4、出现提示 URL Rewrite 这个是伪静态问题 5、写入伪静态，在网站设置伪静态，伪静态当前中的空白处粘贴以下伪静态规则。 【私人云盘源码】/Cloudreve云盘源码/带cloudreve搭建教程 一套简洁好看的云网盘系统+文件共享传
HarmonyOS NEXT Beta 版报名答题-先锋用户
06-23
HarmonyOS NEXT Beta版的报名答题活动通常是为了邀请热情的开发者和用户提前体验新版本的系统，并收集他们的反馈，以便优化和完善。作为"先锋用户"，你可能会有机会： 1. 试用新功能：首先，你可以抢先体验到尚未正式发布的HarmonyOS的新特性和改进，感受其性能和用户体验。 2. 参与测试：你需要参与到系统测试中，对新版本的各种功能进行实际操作，发现并报告可能存在的 bug 或提供建设性的使用建议。 3. 提供反馈：通过完成问卷调查或提交问题报告，你将帮助华为了解用户的真实需求，对产品的未来发展起到关键作用。 4. 社区交流：成为先锋用户往往意味着你会加入到一个早期采用者社区，与其他用户一起分享心得，探讨技术问题，甚至可能会参与官方的开发者论坛讨论。 如果你对参加这样的活动感兴趣，通常需要关注华为的官方渠道（如官网、社交媒体、开发者社区等）获取报名信息和相关考试题目的公告。具体步骤可能包括注册账号、填写申请表、通过知识问答考核，然后等待审核通过。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值