【06】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-综合案例·生肖抽奖卡具体实现（类似支付宝集五福）

最新推荐文章于 2026-06-20 20:55:32 发布

原创

最新推荐文章于 2026-06-20 20:55:32 发布 · 2.5k 阅读

标签

#学习 #笔记 #harmonyos #鸿蒙系统 #前端

序言：

本文综合了前五次笔记的知识内容，完成了相对来说较为复杂的生肖抽奖卡案例，通过拆分和一步步的思路分析完成本案例，通过完成这次案例，笔者可以说是把前面的所有内容或多或少的都有所复习，特此分享给大家。

笔者也是跟着B站黑马的课程一步步学习，学习的过程中添加部分自己的想法整理为笔记分享出来，如有代码错误或笔误，欢迎指正。

B站黑马的课程链接：鸿蒙课程介绍_哔哩哔哩_bilibili

往期笔记：

【01】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs基础语法与界面开发基础

【02】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-界面进阶与布局排布（附QQ登陆、得物、京东登陆综合案例+代码）

【03】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-更多布局（弹性/层叠）方式与界面开发综合（附飞狗卡片+B站卡片案例+实战开发支付宝界面+代码）

【04】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs进阶运算符+状态管理（附综合案例美团购物车）

【05】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-条件渲染+if/switch判断与for/while循环（附计数器、京东加购案例）

综合案例-生肖抽奖卡

一.初始布局：

1.Badge 角标组件

角标用我们前文提到过的绝对定位也一样可以实现，不过这种角标太常用了，故有内置的badge角标组件。

语法：

    Badge({
      count:1,//角标数值
      position:BadgePosition.RightTop,//角标位置
      style:{
        fontSize:12,//文字大小
        badgeSize:16,//圆形大小
        badgeColor:'#FA2A2D'//圆形颜色
      }
    })

代码示意：

2.Grid 布局

对于这种规规整整的布局方式，我们可以用以前学过的Column或者Row，也可以用Grid布局方式。

横向：columnTemplate

纵向：RowTemplate

代码示意：

@Entry
@Component
struct Index {
  build() {
    Grid(){
      ForEach([1,2,3,4,5,6,7,8,9,10,11,12],()=>{
        GridItem(){
          Column(){


          }
          .width(80)
          .height(80)
          .backgroundColor(Color.Pink)
          .border({
            width:2
          })
        }
      })
    }
    .columnsTemplate('1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr 1fr')
    .width('100%')
    .height(500)
    .backgroundColor(Color.Blue)
  }
}

二.初始界面

1.初始界面阶段01-静态布局（代码略）：

2.初始界面阶段02-数据动态渲染：

每个列表项→两个数据

①图片的地址

②抽中的数量

代码示意：

//1.定义接口（每个列表项的数据结构）
interface ImageCount{
  url:string
  count:number
}


@Entry
@Component
struct Index {
  @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}
  ]
  build() {
    Column(){


      Grid(){
        ForEach(this.images,(item:ImageCount,index:number)=>{
          GridItem(){
            Badge({
              count:item.count,
              position:BadgePosition.RightTop,
              style:{
                fontSize:14,
                badgeSize:20,
                badgeColor:'#fa2a2d'
              }
            }){
              Image($r(item.url))
                .width(70)
            }
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .width('100%')
      .height(300)


      Button('立即抽卡')
        .width(200)
        .backgroundColor('#1d5b8c')
        .margin({top:50})
    }


  }
}

三.抽卡遮罩层

1.思路分析：

①布局角度：层叠布局Stack

②结构角度：Column>Text+Image+Button

代码示意：

      //抽卡遮罩层
      Column({space:30}){
        Text('获得生肖卡')
          .fontColor('#f5ebcf')
          .fontSize(30)
          .fontWeight(700)
        Image($r('app.med

最低0.47元/天解锁文章