鸿蒙next生肖选择器来了

xq9527
646 阅读2分钟

前言导读

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

效果图

image-20240804214509572

image-20240804214542335

具体实现

  • 数据模型

    export  interface  ImageCount {
  url: Resource
  count?: number

}

  • 准备数据

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

    // 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 值来设置我们图片的缩放效果

    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+，欢迎进行课程，项目等合作。

avatar
文章
阅读
粉丝