双非大学生自学鸿蒙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 = 1build() {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;// 通过闭包引用外部状态，而非值传递参数@BuilderconstNUM(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，对应numthis.constNUM(1); // 传递索引1，对应num1this.constNUM(2); // 传递索引2，对应num2}}
}

7、动态数据交互效果

概念

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

测试

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

代码

interface StuItemType{name:stringage:numberid: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天左右结束，希望大家可以支持一下，感兴趣的可以加我进行私聊，让我们一起走在学习的路上。