AI 助理
备案控制台
开发者社区 云计算 文章 正文

一大波女生、男生适用的最新鸿蒙练手案例来袭

2024-10-18 35
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一大波女生、男生适用的最新鸿蒙练手案例来袭

一大波女生、男生适用的最新鸿蒙练手案例来袭

介绍

以下案例适合刚开始手鸿蒙开发的小伙伴，有大量的最新逻辑锻炼、鸿蒙核心语法、使用最新鸿蒙的@Local、@Computed 等装饰器来完成。

另外，考虑在学习知识的知识时候，优先关注核心功能，所以提供的布局都会适当简化，但是能保证把核心功能展示出来。

每一个案例会点出终点和核心知识，让学习者可以练习完毕，可以得到什么。

学习的路线

  1. 先看效果
  2. 复现效果
  3. 如果有对代码产生的疑问，可以在评论区内直接提出，有疑问，必回复
  4. 如果能帮助到你，就很好了。😄

点击高亮

  1. 练习基本的线性布局
  2. 练习基本的数组使用
  3. 练习列表渲染语法 ForEach
  4. 练习布局中的状态切换 三元表达式
  5. 掌握通用的点击高亮

@Entry
@ComponentV2
struct Index {
  @Local
  list: string[] = ["小明", "小红", "小黑", "小黄"]
  // 声明一个数字 表示你当前选中的按钮的下标
  @Local
  select: number = 1
  build() {
    Column() {
      ForEach(this.list, (item: string, index: number) => {
        Button(item + "  " + (this.select == index))
          .backgroundColor(this.select == index ? "#ffcd43" : "#007dfe")
          .onClick(() => {
            this.select = index
          })
      })
    }
    .width("100%")
    .height("100%")
    .padding({ top: 100 })
  }
}

待办列表

  1. 新手上手新的编程语言的必做案例 crud - 增删该查
  2. 练习 V2装饰器、@Local、@Computed、事件等
  3. 打通 状态 -> UI 、 UI-> 状态 的一些交互

@ObservedV2
class Task {
  @Trace task: string = ""
  @Trace isFinished: boolean = false
}
@Entry
@ComponentV2
struct Index {
  // 任务列表
  @Local
  list: Task[] = [
  // { task: "数组学习", isFinished: true },
  // { task: "函数学习", isFinished: false }
  ]
  // 输入框输入的内容
  @Local
  inpValue: string = ""
  // 未完成数量
  @Computed
  get statistics() {
    let undoneNum = this.list.filter(v =>!v.isFinished).length
    let doneNum = this.list.length - undoneNum
    return [undoneNum, doneNum]
  }
  // 清理已经完成的任务
  onClear = () => {
    //   筛选 留下未完成
    this.list = this.list.filter((v =>!v.isFinished))
  }
  // 删除
  onDelete = (index: number) => {
    this.list.splice(index, 1)
  }
  build() {
    Column() {
      Row() {
        Button("清理已完成")
          .onClick(this.onClear)
      }
      Row() {
        Text(`未完成的数量 ${this.statistics[0]}`)
        Text(`完成的数量 ${this.statistics[1]}`)
      }
      .width("80%")
      .justifyContent(FlexAlign.SpaceAround)
      Row() {
        TextInput()
          .width(200)
          .onChange(value => {
            this.inpValue = value
          })
        Button("确认")
          .onClick(() => {
            // 熟练 探囊取物！！
            // 先判断当前任务有没有出现过
            const isExit = this.list.some(element => element.task == this.inpValue)
            if (!isExit) {
              const p = new Task()
              p.task = this.inpValue
              this.list.push(p)
            }
          })
      }
      ForEach(this.list, (item: Task, index: number) => {
        Row() {
          Text(item.task)
            .fontColor(item.isFinished ? "#666" : "#000")
            .decoration({
              type: item.isFinished ? TextDecorationType.LineThrough : TextDecorationType.None
            })
            .fontStyle(item.isFinished ? FontStyle.Italic : FontStyle.Normal)
            .onClick(() => {
              this.onDelete(index)
            })
          Button(item.isFinished ? "继续" : "完成")
            .backgroundColor(item.isFinished ? "#ffa601" : "#007dfe")
            .onClick(() => {
              this.list[index].isFinished = !this.list[index].isFinished
            })
        }
      })
    }
    .width("100%")
    .height("100%")
    .padding({ top: 100 })
  }
}

B站显示更多

  1. 练习Flex布局的换行
  2. 练习Scroll布局的水平滚动
  3. 练习绝对定位-水平居中
  4. 练习条件渲染

@Entry
@ComponentV2
struct Index {
  @Local
  list: string[] =
    ["首页", "动画", "番剧", "国创", "音乐", "舞蹈", "游戏", "知识", "科技", "运动", "汽车", "生活", "美食", "动物圈",
      "鬼畜", "时尚", "娱乐", "影视", "纪录片", "电影", "电视剧", "直播", "课堂"]
  // 是否显示更多
  @Local
  isShowMore: boolean = false
  build() {
    Column() {
      Row({ space: 5 }) {
        Scroll() {
          // true 换行
          Flex({ wrap: this.isShowMore ? FlexWrap.Wrap : FlexWrap.NoWrap }) {
            ForEach(this.list, (item: string) => {
              Text(item)
                .margin(10)
            })
          }
        }
        .scrollable(ScrollDirection.Horizontal)
        .layoutWeight(1)
        // .backgroundColor(Color.Yellow)
        .padding({
          bottom: this.isShowMore ? 30 : 0
        })
        if (this.isShowMore) {
          Image($r("app.media.app_icon"))
            .width(20)
            .position({
              left: "50%",
              bottom: 0
            })
            .translate({
              x: -10
            })
            .onClick(() => {
              this.isShowMore = !this.isShowMore
            })
        } else {
          Image($r("app.media.app_icon"))
            .width(20)
            .onClick(() => {
              this.isShowMore = !this.isShowMore
            })
        }
      }
      .width("100%")
      .backgroundColor(Color.Red)
    }
    .width("100%")
    .height("100%")
  }
}

仿考研日程

  1. 练习如何根据需求来拆分数据
  2. 简单的渲染

// 二级目录
interface SubContent {
  subTitle: string
  subContent: string
}
// 一级目录
interface OneContent {
  title: string
  content: SubContent[]
}
@Entry
@ComponentV2
struct Index {
  @Local
  list: OneContent[] = [
    {
      title: "统考",
      content: [
        {
          subTitle: "国家线",
          subContent: "2024。。。。"
        }, {
        subTitle: "考研复试流程图",
        subContent: ""
      }
      ]
    },
    {
      title: "统考22",
      content: [
        {
          subTitle: "国家线22",
          subContent: "2024。。。。22"
        }, {
        subTitle: "考研复试流程图22",
        subContent: ""
      }
      ]
    }
  ]
  // 选中标题的下标
  @Local
  current: number = 0
  build() {
    Column() {
      // 1 标题
      Row({ space: 10 }) {
        ForEach(this.list, (item: OneContent, index: number) => {
          Text(item.title)
            .fontColor(this.current == index ? "#0094ff" : "#000")
            .onClick(() => {
              this.current = index
            })
        })
      }
      //   2 内容
      Column() {
        ForEach(this.list[this.current].content, (item: SubContent) => {
          Column() {
            Text(item.subTitle)
            Text(item.subContent)
          }
        })
      }
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#eee")
  }
}

仿vantUI -倒计时

  1. 练习定时器
  2. 练习一点关于时间处理的逻辑功能

@Entry
@ComponentV2
struct Index {
  @Local
  str: string = ""
  // 时间 毫秒
  time: number = 5 * 60 * 60 * 1000
  tid: number = -1
  build() {
    Column() {
      Button("开始倒计时")
        .onClick(() => {
          // setInterval 时间间隔最少 是10ms
          this.tid = setInterval(() => {
            this.time -= 10
            //   计算小时 整数 parseInt  Math.floor()
            // parseInt 只能传递字符串类型
            const hour = Math.floor(this.time / 1000 / 60 / 60)
            const minute = Math.floor(this.time / 1000 / 60 % 60)
            const seconde = Math.floor(this.time / 1000 % 60)
            const milliSeconde = this.time % 1000
            this.str = `${hour}:${minute}:${seconde}.${milliSeconde}`
          }, 10)
        })
      Button("暂停")
        .onClick(() => {
          clearInterval(this.tid)
        })
      Text(this.str)
        .fontSize(30)
    }
  }
}

仿掘金抽奖

  1. 练习flex布局-换行
  2. 练习随机数
  3. 练习数组+随机数实现随机获取元素

@Entry
@ComponentV2
struct Index {
  @Local
  list: string[] = [
    "4090",
    "4399",
    "大彩电",
    "iphone16",
    "meta70",
    "Mac",
    "小牛电动车",
    "迪拜7日游",
    "北京房子一套"
  ]
  @Local
  current: number = 0
  // 根据下标设置奖品高亮
  setHighline(index: number) {
    this.current = index
  }
  build() {
    Column() {
      Flex({
        wrap: FlexWrap.Wrap
      }) {
        ForEach(this.list, (item: string, index: number) => {
          Text(item)
            .width("33.33%")
            .padding({
              top: 20, bottom: 20
            })
            .border({
              width: 1
            })
            .backgroundColor(this.current == index ? "#e37815" : "#fff")
        })
      }
      Button("开始抽啦")
        .onClick(() => {
          //  开始抽奖
          let tid = setInterval(() => {
            // 等于 数组长度范围内的随机数
            const index = Math.floor(Math.random() * this.list.length)
            this.setHighline(index)
          }, 10)
          //   开启5s种延时器  -  停止定时器
          setTimeout(() => {
            clearInterval(tid)
          }, 5000)
        })
    }
  }
}

仿掘金抽奖 - 不重复抽奖

  1. 加强逻辑处理，如何实现不重复抽奖
  2. 练习一些数组的方法
  3. 练习使用 @Computed

@Entry
@ComponentV2
struct Index {
  @Local
  list: string[] = [
    "4090",
    "4399",
    "大彩电",
    "iphone16",
    "meta70",
    "Mac",
    "小牛电动车",
    "迪拜7日游",
    "北京房子一套"
  ]
  @Local
  selectedList: number[] = []
  @Local
  current: number = 0
  // 奖池
  @Computed
  get newList() {
    const newList: number[] = []
    for (let index = 0; index < this.list.length; index++) {
      let item = this.selectedList.find(v => v === index)
      if (!item) {
        newList.push(index)
      }
    }
    return newList
  }
  // 根据下标设置奖品高亮
  setHighline(index: number) {
    this.current = index
  }
  build() {
    Column() {
      Flex({
        wrap: FlexWrap.Wrap
      }) {
        ForEach(this.list, (item: string, index: number) => {
          Text(item)
            .width("33.33%")
            .padding({
              top: 20, bottom: 20
            })
            .border({
              width: 1
            })
            .backgroundColor(
              this.selectedList.includes(index) ? "#e37815" :
                (this.current == index ? "#e37815" : "#fff"))
        })
      }
      Button("开始抽啦")
        .onClick(() => {
          //  开始抽奖
          let tid = setInterval(() => {
            // 等于 数组长度范围内的随机数
            const index = Math.floor(Math.random() * this.newList.length)
            this.setHighline(this.newList[index])
          }, 10)
          //   开启5s种延时器  -  停止定时器
          setTimeout(() => {
            clearInterval(tid)
            this.selectedList.push(this.current)
          }, 1000)
        })
    }
  }
}

仿vantUI-分页组件-简单版本

  1. 练习基本的鸿蒙线性布局
  2. 练习条件渲染
  3. 练习逻辑能力

@Entry
@ComponentV2
struct Index {
  @Local
  list: string[] = ['1', '2', '3', '4', '5']
  @Local
  current: number = 4
  build() {
    Column() {
      Row({ space: 2 }) {
        Button("上一页")
          .enabled(this.current != 0)
          .backgroundColor("#fff")
          .fontColor("#0094ff")
          .stateStyles({
            disabled: {
              .backgroundColor("#eee")
            }
          })
          .onClick(() => {
            this.current--
          })
        ForEach(this.list, (item: string, index: number) => {
          Button(item)
            .backgroundColor(this.current == index ? "#0094ff" : "#fff")
            .fontColor(this.current == index ? "#fff" : "#0094ff")
            .onClick(() => {
              this.current = index
            })
        })
        Button("下一页")
          .enabled(this.current != this.list.length - 1)
          .backgroundColor("#fff")
          .stateStyles({
            disabled: {
              .backgroundColor("#eee")
            }
          })
          .fontColor("#0094ff")
          .onClick(() => {
            this.current++
          })
      }
    }
    .width("100%")
    .height("100%")
    .padding({
      top: 100
    })
    .backgroundColor("#eee")
  }
}

仿vantUI-分页组件-复杂版本

  1. 练习基本的鸿蒙线性布局
  2. 练习条件渲染
  3. 练习复杂的逻辑能力

@Entry
@ComponentV2
struct Index {
  @Local list: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
  @Local
  test: number = 1
  @Local 
  showList: number[] = [1, 2, 3]
  change() {
    if (this.test > 1 && this.test < this.list.length) {
      this.showList = [this.test - 1, this.test, this.test + 1]
    }
  }
  previous() {
    this.test--
    this.change()
  }
  next() {
    this.test++
    this.change()
  }
  build() {
    Column() {
      Row() {
        Button("上")
          .enabled(this.test != 1)
          .backgroundColor("#ccc")
          .onClick(() => {
            this.previous()
          })
        if (this.test > 2) {
          Button("...")
            .backgroundColor("#ccc")
            .onClick(() => {
              this.previous()
            })
        }
        ForEach(this.showList, (item: number) => {
          Button(item.toString())
            .backgroundColor(this.test == item ? Color.Blue : "#ccc")
            .onClick(() => {
              this.test = item
              this.change()
            })
        })
        if (this.test < this.list[this.list.length-1] - 1) {
          Button("...")
            .backgroundColor("#ccc")
            .onClick(() => {
              this.next()
            })
        }
        Button("下")
          .enabled(this.test != this.list[this.list.length-1])
          .backgroundColor("#ccc")
          .onClick(() => {
            this.next()
          })
      }
    }
  }
}

小结

如果部分内容中的图片不存在，自己随机替换即可。

万少！
目录
相关文章
-开发达人-
|
运维 监控 架构师
【另类架构】之驾车感悟（下）
【另类架构】之驾车感悟（下）
-开发达人-
126 0
【另类架构】之驾车感悟（下）
-开发达人-
|
存储 算法 架构师
【另类架构】之驾车感悟（上）
【另类架构】之驾车感悟（上）
-开发达人-
175 0
【另类架构】之驾车感悟（上）
Lux_Sun
团体程序设计天梯赛-练习集 - L2-028 秀恩爱分得快（25 分）
团体程序设计天梯赛-练习集 - L2-028 秀恩爱分得快（25 分）
Lux_Sun
257 0
码农工程师
|
前端开发 JavaScript Ruby
180天制作180个网站的艺术专业女生：我学习编程的第一年
去年的4月1日，我开始了一个项目，这个项目改变了我的人生。听起来这像是陈词滥调，但是这是真的。去年的4月1日是我的180天180网站的第一天，当时我非常非常紧张。我不知道如何编写代码。我的电脑坏了，我只好用一个借来的笔记本电脑。我开始了这个疯狂的学习挑战，如果我失败了，每个人都能看到。我真是太疯狂了。我记得当时自己在想如果这个项目失败了，我可以声称它是一个煞费苦心的愚人节笑话。
码农工程师
222 0
180天制作180个网站的艺术专业女生：我学习编程的第一年
开发者小助手_LS
|
网络协议
校招阿里星，魔兽世界天梯2400分——泠茗不一样的技术人生
校招阿里星，魔兽世界天梯2400分——泠茗不一样的技术人生
开发者小助手_LS
369 0
校招阿里星，魔兽世界天梯2400分——泠茗不一样的技术人生
沉默王二
|
设计模式 算法 架构师
狂补计算机基础知识，让我上了瘾，想要尽快和同龄人拉开差距，必须这么干，才有戏！！！！
狂补计算机基础知识，让我上了瘾，想要尽快和同龄人拉开差距，必须这么干，才有戏！！！！
沉默王二
176 0
技术小能手
|
Java 程序员
史上最美女程序员：手写代码把人类送上月球
技术小能手
4198 0
yq传送门
|
机器学习/深度学习 安全 Java
9月7日云栖精选夜读 | 史上最美女程序员：手写代码把人类送上月球
yq传送门
3091 0
微wx笑
|
测试技术 C++
【聚能聊话题】有“一个女程序媛征男友的需求说明书”等你的回复
微wx笑
1421 0
技术小能手
租房有深坑？手把手教你如何用R速读评论+科学选房
技术小能手
997 0

热门文章

最新文章

  • 1
    weex-html5 组件进阶
  • 2
    会声会影2023视频编辑软件免费序列号永久
  • 3
    苹果电脑 Mac OS X 系统上防止误按 command+Q 退出软件
  • 4
    SSH连接远程服务器，本地known_hosts文件记录了什么
  • 5
    31.6. MongoDB
  • 6
    saltstack的探索-改善管理用户的sls文件
  • 7
    marathon小知识点分享之如何远程调试marathon
  • 8
    Myeclipse 操作数据库
  • 9
    光伏发电或能控制城市天气
  • 10
    WPF进度条
  • 1
    ROS机器视觉入门：从基础到人脸识别与目标检测
    79
  • 2
    鸿蒙开发：自定义一个简单的标题栏
    24
  • 3
    鸿蒙开发：切换至基于rcp的网络请求
    26
  • 4
    【MyBatisPlus·最新教程】包含多个改造案例，常用注解、条件构造器、代码生成、静态工具、类型处理器、分页插件、自动填充字段
    29
  • 5
    《C++跨平台编译：打破系统边界，释放代码潜能》
    23
  • 6
    电路板设计中射频反馈线的优化
    10
  • 7
    《C++20 图形界面程序：速度与渲染效率的双重优化秘籍》
    10
  • 8
    图解 Spring 循环依赖，一文吃透！
    18
  • 9
    关于 Kafka 高性能架构，这篇说得最全面，建议收藏！
    10
  • 10
    微服务和 SOA 的 6 大核心区别，你都知道吗？
    14

    • 相关课程

    更多
  • 【新人赛】工业蒸汽量预测建模算法代码开源分享合集
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 智能创作赛（复赛）：相册应用中的视频故事生成算法介绍
  • 智能创作赛（初赛）：相册应用中的故事生成算法介绍
  • 深入浅出白话Serverless-1024程序员节创造营公益课
  • 跨越N次元 一键变身AI漫画人

    • 相关电子书

    更多
  • 长安十二时辰背后的技术秘籍
  • 《长安十二时辰》
  • 回归职业教育的本质 内容为王，质量至上，赢在口碑

    • 相关实验场景

    更多
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 【AI破次元壁合照】少年白马醉春风，函数计算一键部署AI绘画平台
  • 基于函数计算一键部署掌上游戏机
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 基于阿里云DeepGPU实例，用AI画唯美国风少女
    • 下一篇
    阿里云OSS设置跨域访问