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

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

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

介绍

以下案例适合刚开始手鸿蒙开发的小伙伴,有大量的最新逻辑锻炼、鸿蒙核心语法、使用最新鸿蒙的@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()
          })
      }
    }
  }
}

小结

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

目录
相关文章
|
JavaScript Java
【游戏开发】自从遇见了口袋方舟后,我的世界变得精彩了起来
【游戏开发】自从遇见了口袋方舟后,我的世界变得精彩了起来
181 0
爱玩粥的有福了,带图形界面的明日方舟皮肤的员工管理系统,数据结构期末实训满分。
爱玩粥的有福了,带图形界面的明日方舟皮肤的员工管理系统,数据结构期末实训满分。
138 0
和12岁小同志搞创客开发:有意思的激光切割技术
和12岁小同志搞创客开发:有意思的激光切割技术
和12岁小同志搞创客开发:有意思的激光切割技术
|
程序员
日本戏精程序员:为自己搭建相亲网站,一人分饰三十角
日本戏精程序员:为自己搭建相亲网站,一人分饰三十角
231 0
日本戏精程序员:为自己搭建相亲网站,一人分饰三十角
|
前端开发 JavaScript Ruby
180天制作180个网站的艺术专业女生:我学习编程的第一年
去年的4月1日,我开始了一个项目,这个项目改变了我的人生。听起来这像是陈词滥调,但是这是真的。去年的4月1日是我的180天180网站的第一天,当时我非常非常紧张。我不知道如何编写代码。我的电脑坏了,我只好用一个借来的笔记本电脑。我开始了这个疯狂的学习挑战,如果我失败了,每个人都能看到。我真是太疯狂了。我记得当时自己在想如果这个项目失败了,我可以声称它是一个煞费苦心的愚人节笑话。
222 0
180天制作180个网站的艺术专业女生:我学习编程的第一年
|
安全 5G vr&ar
在线解剖青蛙,亲历VR手术室​!牛津、北邮是如何上网课的?
在线解剖青蛙,亲历VR手术室​!牛津、北邮是如何上网课的?
306 0
在线解剖青蛙,亲历VR手术室​!牛津、北邮是如何上网课的?
|
网络协议
校招阿里星,魔兽世界天梯2400分——泠茗不一样的技术人生
校招阿里星,魔兽世界天梯2400分——泠茗不一样的技术人生
校招阿里星,魔兽世界天梯2400分——泠茗不一样的技术人生
|
数据中心
阿里云黑科技太厉害了 脑子进水还算得更快
热得快可以快速烧水是利用了浸没的优势,那么如果要降温呢? 阿里云科学家在4月26日的云栖大会·南京峰会上展示了全浸没的“凉得快”服务器——麒麟,把整台服务器浸在液体里循环冷却,这一方案可以无需使用空调,能源使用率(PUE)逼近了理论极限值1.0。
1666 0