推荐|鸿蒙next生肖选择器来了我不允许你不会

前言导读

各位同学大家，有段时间没有跟大家见面了，因为最近一直在更新鸿蒙的那个实战课程所以就没有去更新文章实在是不好意思，所以今天就给大家更新一期实战案例生肖抽卡的案例希望帮助到各位同学工作和学习

效果图

具体实现

数据模型


typescript
 代码解读
复制代码
export  interface  ImageCount {
  url: Resource
  count?: number

}

准备数据

我们准备6张图片需要等下在我们的界面上面显示


less
 代码解读
复制代码
// 2. 基于接口, 准备数据
@State images: ImageCount[] = [
  { url:  $r('app.media.bg_00'), count: 0 },
  { url: $r('app.media.bg_01'), count: 0 },
  { url: $r('app.media.bg_02'), count: 0 },
  { url: $r('app.media.bg_03'), count: 0 },
  { url: $r('app.media.bg_04'), count: 0 },
  { url:$r('app.media.bg_05'), count: 0 },
]
  @State maskIndex:number=-1
  @State maskOpacity:number=0
  @State maskImgScale:number=0

界面实现

我们是用 Grid 组件加载我们数组里面然后再button点击事件去改变我们的 maskIndex maskOpacity maskImgScale 三个变量的值来实现我们的生肖选择的效果，然后通过改成图片的 scale 值来设置我们图片的缩放效果


scss
 代码解读
复制代码
build() {
  Stack(){
    Column() {
      Grid() {
        ForEach(this.images, (item: ImageCount) => {
          GridItem() {

            Image(item.url)
                 .width(80)

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

      Button('立即抽卡'+this.maskIndex.toString())
        .width(200)
        .backgroundColor('#ed5b8c')
        .margin({ top: 50 })
        .onClick(()=>{
          this.maskIndex=99
          this.maskImgScale=1
          this.maskOpacity=1
        })
    }.zIndex(1).height("100%")
    Column({space:30}){
      Text("获得生肖卡")
        .fontColor("#efe9d3")
        .fontSize(18)
        .fontWeight(600)
      Image($r('app.media.img_00'))
        .width(160)
        .scale({
          x:this.maskImgScale,
          y:this.maskImgScale
        })
        .animation({
          duration:500
        })
      Button("开心收下"+this.maskIndex.toString())
        .width(180)
        .backgroundColor(Color.Transparent)
        .border({width:2,color:Color.Green})
        .onClick(()=>{
          console.log("111")
          this.maskImgScale=0
          this.maskOpacity=0
          this.maskIndex=-1
        })
        .opacity(1)

    }
    .width("100%")
    .height("100%")
    .backgroundColor("#cc000000")
    .justifyContent(FlexAlign.Center)
    .zIndex( this.maskIndex)
    .opacity( this.maskOpacity)
    .animation({
      duration:200
    })
  }.height("100%")

}

最后总结

我们通过在button点击的时候把初始值 maskIndex maskOpacity maskImgScale 重新赋值然后设置到 Image 组件的 scale属性里面来然后设置我们

Column 组件的 zIndex opacity透明度来实现我��组件叠放再组件上面的效果。今天的文章就讲到这个有兴趣的同学可以继续研究如果你觉得文章还不错麻烦给我三连关注点赞和转发如果了解更多鸿蒙开发的知识可以关注坚果派公众号。谢谢

团队介绍

团队介绍：坚果派由坚果等人创建，团队由12位华为HDE以及若干热爱鸿蒙的开发者和其他领域的三十余位万粉博主运营。专注于分享HarmonyOS/OpenHarmony，ArkUI-X，元服务，仓颉，团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，目前已开发鸿蒙原生应用，三方库60+，欢迎进行课程，项目等合作。