devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙HarmonyOS NEXT开发：简易随机抽人功能，动态展示

作者：神奇cpp | 2024-08-16 04:42:44

赞

踩

鸿蒙HarmonyOS NEXT开发：简易随机抽人功能，动态展示

效果图：

状态变量定义模块：

  • @State name:string[]：这是一个存储所有拟参与抽奖人员姓名的数组，初始化时包含了一系列的姓名。
  • @State selectedName:string[]：用于记录已经被抽中的人员姓名列表，初始为空。
  • @State random:string：保存每次随机抽取到的具体人员姓名，初始为空字符串。
  • @State compile:boolean：决定是否处于编辑状态，初始为 false，表示非编辑状态。
  • @State addName:string：用于存储在编辑状态下输入的新姓名。
  • @State randomList:number[]：存储随机生成的数字列表，用于辅助确定选中状态。
  • @State timeId:number：用于存储延迟函数的时间 ID，执行延迟函数用到 
    1.   //拟 姓名数组
    2.   @State name:string[]=['张三','李四','王五','汐月',
    3.     '映雪','俊翔','沐晨','羽灵','梦璃','逸风',
    4.     '嘉悦','静婉','梵音','睿泽宇轩','诗韵雅琪','楚瑶慧敏','子昂思涵','锦程妙晴',
    5.     '雨昕晨熙','明轩紫涵','梓萱靖瑶','宇澄语琴','泽翰悦萱']
    6.   //已抽中的名单列表
    7.   @State selectedName:string[] = []
    8.   //随机抽取到的人
    9.   @State random:string = ''
    10.   //是否为编辑状态
    11.   @State compile:boolean = false
    12.   //添加姓名
    13.   @State addName:string = ''
    14.   //随机抽取到的数字列表
    15.   @State randomList:number[] = []
    16.   //延迟函数的时间id
    17.   @State timeId:number = -1

抽奖按钮模块：

当点击抽奖按钮时，首先将上一次抽取的结果 random 置为空。然后清除可能存在的未结束的延迟事件。通过设定 num 为 15，决定生成随机数的次数。在延迟函数中，每 200 毫秒执行一次，先清空 randomList，然后生成 num/3 个随机数。当 num 小于等于 0 时，通过循环确保抽取的姓名不在已抽中的名单中，最后将抽中的姓名加入 selectedName 列表，并清除延迟事件。

  1.         // 编辑状态或已将人抽完时 为禁用状态
  2.         Button('抽奖')
  3.           .enabled(this.selectedName.length < this.name.length && !this.compile)
  4.           .onClick(()=>{
  5.             this.random = ''  //先删除上一次抽中的
  6.             clearInterval(this.timeId)    //为了防止连续点击导致上一个延迟事件未结束 先将上一个杀死
  7.             let num:number=15       //为了生成num/3（取整）个随机数
  8.             this.timeId =setInterval(()=>{    //200ms执行一次
  9.               this.randomList = []      //先清空
  10.               for(let i=0;i<num/3;i++)    //生成num/3（取整）个随机数
  11.                 this.randomList.push(Math.floor(Math.random()*this.name.length))
  12.               //最后一次时为确定抽中的姓名
  13.               if(num<=0) {
  14.                 //防止抽到重复的人
  15.                 let f:boolean = true
  16.                 while (f){
  17.                   this.random = this.name[Math.floor(Math.random()*this.name.length)]
  18.                   //抽到的不在已抽中的名单列表中 则跳出循环
  19.                   if(this.selectedName.indexOf(this.random)==-1) f=false
  20.                 }
  21.                 //将抽到的进行统计 加入列表
  22.                 this.selectedName.push(this.random)
  23.                 clearInterval(this.timeId)
  24.               }
  25.               num--
  26.             },200)
  27.           })

编辑名单按钮模块：

点击编辑名单按钮时，通过 this.compile =!this.compile 切换编辑状态。为编辑状态时渲染不同的视图，可以点击右上角的x删除该姓名，也可以通过输入框添加姓名。

重置按钮模块：

点击重置按钮，将已抽中的名单 selectedName 清空，同时将随机抽取的结果 random 和随机数字列表 randomList 也都重置为空。

姓名展示视图模块：

在编辑状态下，会显示添加姓名的输入框和确定按钮。对于每个姓名，通过判断其在随机数字列表中的索引或是否与随机抽取的结果相同，来设置不同的字体颜色和边框颜色。在编辑状态下，还会显示删除符号，点击可删除对应的姓名。

比如，在显示姓名时，如果某个姓名处于被抽取的状态，其颜色和边框会相应变化，以突出显示。

通过合理的状态管理和逻辑控制，实现了一个简单但实用的随机抽人功能，并提供了编辑和重置的功能，具有一定的灵活性和可用性。

  1.       // 所有姓名的展示视图
  2.       Flex({wrap:FlexWrap.Wrap}){
  3.         //  编辑状态时 可添加姓名
  4.         if(this.compile)
  5.         Row({space:10}){
  6.           TextInput({placeholder:'添加姓名'})
  7.             .onChange((value:string)=>{this.addName = value})
  8.             .layoutWeight(1)
  9.           Button('确定')
  10.             .onClick(()=>{this.name.push(this.addName)})
  11.         }
  12.  
  13.         ForEach(this.name,(item:string, index:number)=>{
  14.           //  设置选中状态和为选中状态的样式
  15.           Row(){
  16.             Row(){
  17.               Text(item)
  18.                 .borderWidth(2)
  19.                 .padding(5)
  20.                 .fontColor((this.randomList.indexOf(index)!=-1||this.random==item)?Color.Orange:Color.Black)
  21.                 .borderColor((this.randomList.indexOf(index)!=-1||this.random==item)?Color.Red:Color.Black)
  22.             }
  23.             .margin(5)
  24.             .border({width:3,color:this.random==item?Color.Red:Color.Transparent})
  25.             // 编辑状态 显示x删除符号
  26.             if(this.compile)
  27.               Text('+')
  28.                 .fontSize(21)
  29.                 .fontWeight(800)
  30.                 .rotate({angle:45})   //旋转45度
  31.                 .position({right:2,top:-2})
  32.                 .onClick(()=>{
  33.                   this.name.splice(index,1)   //删除
  34.                 })
  35.           }
  36.         })
  37.       }
  38.       .width('100%')

完整代码：

  1. @Entry
  2. @Component
  3. struct IndexPage {
  4.  
  5.   //拟 姓名数组
  6.   @State name:string[]=['张三','李四','王五','汐月',
  7.     '映雪','俊翔','沐晨','羽灵','梦璃','逸风',
  8.     '嘉悦','静婉','梵音','睿泽宇轩','诗韵雅琪','楚瑶慧敏','子昂思涵','锦程妙晴',
  9.     '雨昕晨熙','明轩紫涵','梓萱靖瑶','宇澄语琴','泽翰悦萱']
  10.   //已抽中的名单列表
  11.   @State selectedName:string[] = []
  12.   //随机抽取到的人
  13.   @State random:string = ''
  14.   //是否为编辑状态
  15.   @State compile:boolean = false
  16.   //添加姓名
  17.   @State addName:string = ''
  18.   //随机抽取到的数字列表
  19.   @State randomList:number[] = []
  20.   //延迟函数的时间id
  21.   @State timeId:number = -1
  22.   build() {
  23.     Column({space:10}) {
  24.       // 已抽中的名单
  25.       Column(){
  26.         Text('已抽中的名单：')
  27.         Flex({wrap:FlexWrap.Wrap}){
  28.           ForEach(this.selectedName,(item:string)=>{
  29.               Text(item)
  30.                 .padding(5)
  31.                 .height(32)
  32.                 .margin(5)
  33.           })
  34.         }
  35.         .width('100%')
  36.       }
  37.       .alignItems(HorizontalAlign.Start)
  38.       Row({space:10}){
  39.         // 编辑状态或已将人抽完时 为禁用状态
  40.         Button('抽奖')
  41.           .enabled(this.selectedName.length < this.name.length && !this.compile)
  42.           .onClick(()=>{
  43.             this.random = ''  //先删除上一次抽中的
  44.             clearInterval(this.timeId)    //为了防止连续点击导致上一个延迟事件未结束 先将上一个杀死
  45.             let num:number=15       //为了生成num/3（取整）个随机数
  46.             this.timeId =setInterval(()=>{    //200ms执行一次
  47.               this.randomList = []      //先清空
  48.               for(let i=0;i<num/3;i++)    //生成num/3（取整）个随机数
  49.                 this.randomList.push(Math.floor(Math.random()*this.name.length))
  50.               //最后一次时为确定抽中的姓名
  51.               if(num<=0) {
  52.                 //防止抽到重复的人
  53.                 let f:boolean = true
  54.                 while (f){
  55.                   this.random = this.name[Math.floor(Math.random()*this.name.length)]
  56.                   //抽到的不在已抽中的名单列表中 则跳出循环
  57.                   if(this.selectedName.indexOf(this.random)==-1) f=false
  58.                 }
  59.                 //将抽到的进行统计 加入列表
  60.                 this.selectedName.push(this.random)
  61.                 clearInterval(this.timeId)
  62.               }
  63.               num--
  64.             },200)
  65.           })
  66.         Button('编辑名单')
  67.           .onClick(()=>{this.compile=!this.compile})
  68.         Button('重置')
  69.           .onClick(()=>{this.selectedName=[]
  70.           this.random = ''
  71.           this.randomList=[]})
  72.       }
  73.       // 所有姓名的展示视图
  74.       Flex({wrap:FlexWrap.Wrap}){
  75.         //  编辑状态时 可添加姓名
  76.         if(this.compile)
  77.         Row({space:10}){
  78.           TextInput({placeholder:'添加姓名'})
  79.             .onChange((value:string)=>{this.addName = value})
  80.             .layoutWeight(1)
  81.           Button('确定')
  82.             .onClick(()=>{this.name.push(this.addName)})
  83.         }
  84.  
  85.         ForEach(this.name,(item:string, index:number)=>{
  86.           //  设置选中状态和为选中状态的样式
  87.           Row(){
  88.             Row(){
  89.               Text(item)
  90.                 .borderWidth(2)
  91.                 .padding(5)
  92.                 .fontColor((this.randomList.indexOf(index)!=-1||this.random==item)?Color.Orange:Color.Black)
  93.                 .borderColor((this.randomList.indexOf(index)!=-1||this.random==item)?Color.Red:Color.Black)
  94.             }
  95.             .margin(5)
  96.             .border({width:3,color:this.random==item?Color.Red:Color.Transparent})
  97.             // 编辑状态 显示x删除符号
  98.             if(this.compile)
  99.               Text('+')
  100.                 .fontSize(21)
  101.                 .fontWeight(800)
  102.                 .rotate({angle:45})   //旋转45度
  103.                 .position({right:2,top:-2})
  104.                 .onClick(()=>{
  105.                   this.name.splice(index,1)   //删除
  106.                 })
  107.           }
  108.         })
  109.       }
  110.       .width('100%')
  111.     }
  112.     .padding(15)
  113.     .height('100%')
  114.     .width('100%')
  115.   }
  116. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/986678
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号