双非大学生自学鸿蒙5.0零基础入门到项目实战 -ArkTs核心

• 个人首页： VON

• 鸿蒙系列专栏： 鸿蒙开发小型案例总结

• 综合案例 ：鸿蒙综合案例开发

• 鸿蒙6.0：从0开始的开源鸿蒙6.0.0

• 文章所属专栏：鸿蒙5.0零基础入门到项目实战

前言

本节开始正式接触ts中的核心逻辑，选择、判断、循环三大件，本节过后就要开始综合案例的实战篇了下周开始实战篇，今天也是从0开始的第二天，两天过完基础语法，其他的知识点就从项目中总结把。废话不多说，开始今天的学习

实践

1、if分支语句

概念

测试

if,else分支，和其他语法没区别，格式都是一样的

代码

let age : number = 20
if(age>=18){
  console.log("成年了");
}
else if(age>0 && age<18){
  console.log("未成年");
}
else {
  console.log("年龄错误")
}



@Entry
@Component
struct Index {

  build() {
    Column() {

    }
  }
}

2、条件表达式

概念

测试

代码

let num1 : number = 10
let num2 : number = 20
let res = num1 > num2 ? num1 : num2;
console.log("较大值：",res)


@Entry
@Component
struct Index {

  build() {
    Column() {

    }
  }
}

3、条件渲染

概念

测试

可以看到数字的不同所渲染的页面内容也不同

代码

let num1 : number = 20

@Entry
@Component
struct Index {
  build() {
    Column() {
      if(num1 === 1){
        Text("文本1")
      }else if(num1 === 2){
        Text("文本2")
      }else {
        Text("文本else")
      }

    }
  }
}

4、循环渲染

概念

测试

代码

let arrs : string[] = ["张三","李四","王五"]
@Entry
@Component
struct Index {
  build() {
    Column() {
      ForEach(arrs,(item:string,index:number)=>{
        Text(item+index)
      })
    }
  }
}

5、状态管理和事件

概念

测试

这里不知道为何要用V2才会生效，我记得之前学习的时候是不需要进行改变的，这个具体后面再说吧，先不去进行深究
这里的样式是我自己写的可能有点丑陋

代码

@Entry
@ComponentV2
struct Index {
  @Local num : number = 1
  build() {
    Column() {
      Row(){
        Text("+")
          .fontSize(25)
          .border({
            width:{ left:1, top:1, bottom:1 },
            radius:{ topLeft:5,bottomLeft:5 },
          })
          .padding({left:5})
          .onClick(()=>{
            if(this.num>=1){
              this.num--
            }
          })
        Text(this.num.toString())
          .fontSize(25)
          .border({
            width:1,
          })
          .padding({left:5,right:5})
        Text("-")
          .fontSize(25)
          .border({
            width:{ right:1, top:1, bottom:1 },
            radius:{ topRight:5,bottomRight:5 },
          })
          .padding({right:5})
          .onClick(()=>{
            this.num++
          })

      }
      .padding(10)
      .width('100%')
      .height(50)
    }
  }
}

6、@Builder

概念

测试

原本只是像复用下上一个计数器，没想到还不能直接进行复用，具体有以下几点

• @ComponentV2 装饰器错误鸿蒙 ArkUI 中没有@ComponentV2装饰器，声明式开发范式中组件统一使用@Component装饰器。V2通常用于组件的 API 版本（如@BuilderParam的 V2 版本），而非组件本身的装饰器，此处属于语法错误，应改为@Component。
• @Local装饰器的使用场景限制@Local是用于父子组件间状态同步的装饰器，通常需要配合@Link或@Prop使用，且只能在自定义组件内部声明子组件时使用。在根组件（@Entry修饰的组件）中直接使用@Local修饰状态变量，不符合其设计初衷，可能导致状态无法正常同步，建议改用@State装饰器（根组件局部状态）。

这里我不知道第一点是否正确，视频中讲解的是可以使用的，不过我之前确实没有听说过这个。
第二点需要重点关注下，

• constNUM方法参数为值传递，无法修改源变量@Builder构建器的参数是值传递，而非引用传递。在onClick事件中修改的num是参数的副本，而非外部的this.num、this.num1等源变量，导致点击 “+”“-” 按钮时，界面不会更新（源状态未改变）。示例：点击this.constNUM(this.num)中的 “+”，修改的是constNUM方法内部的num参数，而非this.num，因此this.num的值始终为 1，界面无变化。

这是我踩的坑就不给大家看之前的错误代码了，直接看正确代码就行了，上面有注意事项，都有注释帮助大家来理解，这是整体效果

这里还是要注意一下，不可以直接进行传参，需要通过闭包引用外部状态

代码

@Entry
@Component
struct Index {
  @State num: number = 1;
  @State num1: number = 2;
  @State num2: number = 3;

  // 通过闭包引用外部状态，而非值传递参数
  @Builder
  constNUM(index: number) {
    Row() {
      Text("+")
        .fontSize(25)
        .border({
          width: { left: 1, top: 1, bottom: 1 },
          radius: { topLeft: 5, bottomLeft: 5 },
          color: '#000'
        })
        .padding({ left: 5 })
        .onClick(() => {
          // 根据index判断要修改的状态变量
          if (index === 0 && this.num >= 1) {
            this.num--;
          } else if (index === 1 && this.num1 >= 1) {
            this.num1--;
          } else if (index === 2 && this.num2 >= 1) {
            this.num2--;
          }
        })
      Text(this.getNumByIndex(index).toString()) // 动态获取当前值
        .fontSize(25)
        .border({
          width: 1,
          color: '#000'
        })
        .padding({ left: 5, right: 5 })
      Text("-")
        .fontSize(25)
        .border({
          width: { right: 1, top: 1, bottom: 1 },
          radius: { topRight: 5, bottomRight: 5 },
          color: '#000'
        })
        .padding({ right: 5 })
        .onClick(() => {
          // 根据index修改对应状态变量
          if (index === 0) {
            this.num++;
          } else if (index === 1) {
            this.num1++;
          } else if (index === 2) {
            this.num2++;
          }
        })
    }
    .padding(10)
    .width('100%')
    .height(50)
  }

  // 辅助方法：根据index返回对应状态值
  private getNumByIndex(index: number): number {
    switch (index) {
      case 0: return this.num;
      case 1: return this.num1;
      case 2: return this.num2;
      default: return 0;
    }
  }

  build() {
    Column() {
      this.constNUM(0); // 传递索引0，对应num
      this.constNUM(1); // 传递索引1，对应num1
      this.constNUM(2); // 传递索引2，对应num2
    }
  }
}

7、动态数据交互效果

概念

黑马中的是歌单交互，我这里使用更简单的学生数据来进行动态展示，感兴趣的可以看下黑马的案例

测试

这里的样式我并没有进行装饰，只是简单的给大家进行展示，目前我们将所有代码写在一起太过于冗余后面会进行修改的，这里就需要注意我标注的两点即可

代码

interface StuItemType{
  name:string
  age:number
  id:number
}
@Entry
@Component
struct Index {
  stus : StuItemType[] = [
    {
      name:"张三",
      age:18,
      id:1
    },
    {
      name:"李四",
      age:18,
      id:2
    },
    {
      name:"王五",
      age:19,
      id:3
    },
    {
      name:"啊六",
      age:18,
      id:4
    },
    {
      name:"刘七",
      age:18,
      id:5
    }
  ]
  build() {
    List(){
      ForEach(this.stus,(item:StuItemType,index:number)=>{
        ListItem(){
          Row(){
            Text(`下标: ${index}`)
              .margin({right:10})
            Text(item.name)
              .margin({right:10})
            Text(item.age.toString())
              .margin({right:10})
            Text(item.id.toString())
              .margin({right:10})
          }
        }
      })
    }
  }
}

结语

基础部分已经全部结束了，后面的一些小语法就让我们在项目中遇见了在进行解决吧，今天先到这里，明天会进行综合案例的学习，估计2天左右结束，希望大家可以支持一下，感兴趣的可以加我进行私聊，让我们一起走在学习的路上。