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

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

介绍

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