-
个人首页： VON
-
鸿蒙系列专栏： 鸿蒙开发小型案例总结
-
综合案例 ：鸿蒙综合案例开发
-
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
-
文章所属专栏：鸿蒙5.0零基础入门到项目实战
ArkTs核心
前言
本节开始正式接触ts中的核心逻辑，选择、判断、循环三大件，本节过后就要开始综合案例的实战篇了下周开始实战篇，今天也是从0开始的第二天，两天过完基础语法，其他的知识点就从项目中总结把。废话不多说，开始今天的学习
实践
1、if分支语句
概念
测试
if,else分支，和其他语法没区别，格式都是一样的
代码
go
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、条件表达式
概念
测试
代码
go
let num1 : number = 10
let num2 : number = 20
let res = num1 > num2 ? num1 : num2;
console.log("较大值：",res)
@Entry
@Component
struct Index {
build() {
Column() {
}
}
}3、条件渲染
概念
测试
可以看到数字的不同所渲染的页面内容也不同
代码
go
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、循环渲染
概念
测试
代码
go
let arrs : string[] = ["张三","李四","王五"]
@Entry
@Component
struct Index {
build() {
Column() {
ForEach(arrs,(item:string,index:number)=>{
Text(item+index)
})
}
}
}5、状态管理和事件
概念
测试
这里不知道为何要用V2才会生效，我记得之前学习的时候是不需要进行改变的，这个具体后面再说吧，先不去进行深究
这里的样式是我自己写的可能有点丑陋
代码
go
@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，界面无变化。
这是我踩的坑就不给大家看之前的错误代码了，直接看正确代码就行了，上面有注意事项，都有注释帮助大家来理解，这是整体效果
这里还是要注意一下，不可以直接进行传参，需要通过闭包引用外部状态
代码
go
@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、动态数据交互效果
概念
黑马中的是歌单交互，我这里使用更简单的学生数据来进行动态展示，感兴趣的可以看下黑马的案例
测试
这里的样式我并没有进行装饰，只是简单的给大家进行展示，目前我们将所有代码写在一起太过于冗余后面会进行修改的，这里就需要注意我标注的两点即可
代码
go
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天左右结束，希望大家可以支持一下，感兴趣的可以加我进行私聊，让我们一起走在学习的路上。