鸿蒙ArkUI布局与样式进阶（六）——ArkUI 支持的各种运算符和语法基础与数组操作
🚀 鸿蒙开发入门必看！30 分钟掌握 ArkUI 界面开发
在上一篇文章《事件响应与状态管理》中，我们重点介绍了 ArkUI 中事件绑定与状态驱动 UI 的核心机制，包括 @State、@Prop、@Link 等状态装饰器的用法，以及 onClick、onTouch 等事件的处理方式。通过这些内容，我们了解了 ArkUI 是如何通过数据变化自动刷新界面，以及如何响应用户交互。
本文作为系列的第六篇，将在此基础上，系统梳理 ArkUI 开发的各种运算符和语法基础知识，并结合实战案例，帮助大家把上一篇学到的 “事件响应与状态管理” 真正落地到项目中。
🔄 为什么要学这一篇？
上一篇我们知道了：
- 如何通过
@State定义响应式数据 - 如何通过事件处理器响应用户操作
- 如何实现 UI 的自动更新
但是，如果想真正开发一个完整的鸿蒙应用，我们还需要掌握：
- ArkUI 支持的各种运算符和语法基础
- 数组的操作与数据处理
- 布局组件（Row/Column）的灵活运用
- 把状态管理和事件响应结合到实际功能中（点赞、购物车等）
因此，本文将从 基础语法 → 数组操作 → 布局组件 → 实战案例 逐步展开，让你不仅 “会用”，更能 “用好” ArkUI。
目录
一、ArkUI 基础语法详解
1. 算术运算符
定义:算术运算符用于执行常见的数学运算，如加、减、乘、除、取余等。
常见算术运算符：
+加法
-减法*乘法/除法%取余（模运算）
代码示例：
let num1: number = 9;
let num2: number = 4;
console.log('加法计算:', num1 + num2); // 13
console.log('减法计算:', num1 - num2); // 5
console.log('乘法计算:', num1 * num2); // 36
console.log('除法计算:', num1 / num2); // 2.25
console.log('取余计算:', num1 % num2); // 1个人理解
算术运算符是任何编程语言的基础，ArkUI 中由于支持 TypeScript，使用起来和 JavaScript 几乎一致。在实际开发中，常用于价格计算、数量统计、动态布局计算等场景。
2. 赋值运算符:
定义：赋值运算符用于将一个值赋给变量，也可以结合算术运算进行赋值。
常见赋值运算符
=直接赋值
+=加法赋值-=减法赋值*=乘法赋值/=除法赋值%=取余赋值
例子：
let num3: number = 1;
num3 += 1; // 等价于 num3 = num3 + 1
console.log('加号后的结果:', num3); // 2
个人理解：赋值运算符简化了代码写法，特别是在循环或事件处理中频繁修改变量值时非常方便。
3. 一元运算符:
定义：一元运算符只需要一个操作数，即可完成运算。常见的有自增 ++ 和自减 --。
前置与后置区别：
- 前置：
++num：先自增，再返回值 - 后置 ：
num++：先返回值，再自增
let num4: number = 10;
let result1 = num4++; // result1=10, num4=11
let num5: number = 10;
let result2 = ++num5; // result2=11, num5=11个人理解： ArkUI 组件的事件处理中，一元运算符常用于计数器、序号生成等场景，但要注意前置和后置的区别，避免出现逻辑错误。
4. 比较运算符:
定义比较运算符用于比较两个值，返回布尔值 true 或 false。
常见比较运算符
>大于<小于>=大于等于<=小于等于==等于（不严格类型）===严格等于（类型 + 值都相等）!=不等于!==严格不等于
代码示例：
console.log(9 > 4); // true
console.log(9 == '9'); // true
console.log(9 === '9'); // false个人理解：在条件判断、循环控制中大量使用比较运算符。建议在 TypeScript 中尽量使用 === 和 !==，避免类型转换带来的意外结果。
5. 逻辑运算符:
定义：逻辑运算符用于组合多个条件，返回布尔值。
常见逻辑运算符
&&逻辑与（两个都为真才返回真）||逻辑或（一个为真就返回真）!逻辑非（取反）
代码示例：
console.log(3 > 5 && 5 < 9); // false
console.log(5 > 2 || 9 < 7); // true
console.log(!(5 > 2)); // false个人理解:逻辑运算符是构建复杂条件判断的基础，在 ArkUI 的 if/else 渲染、事件触发条件中经常用到。
二、数组操作全解析
1. 数组定义:
定义数组是一种可以按顺序存储多个值的集合，每个值都有一个索引（下标），从 0 开始。
代码示例:
let names: string[] = ['小明', '小红', '大强', '小民'];个人理解:在 ArkUI 中，数组常用于存储列表数据（如商品列表、评论列表），结合 ForEach 可以高效渲染大量相似组件。
2. 数组访问与修改:
定义通过索引访问数组元素，并可以直接修改元素值。
代码示例:
console.log(names[0]); // 小明
names[0] = 'Jack';
console.log(names); // ['Jack', '小红', '大强', '小民']3. 数组增删:
常见方法
push()在末尾添加元素pop()删除最后一个元素unshift()在开头添加元素shift()删除第一个元素splice()在任意位置添加 / 删除元素
代码示例:
let songs: string[] = ['告白气球', '洋葱', '吻别'];
songs.unshift('你是我的眼'); // 添加到开头
songs.splice(2, 1); // 删除索引为2的元素
songs.splice(1, 1, '彩虹'); // 替换元素个人理解:数组操作在动态渲染列表时非常重要，比如购物车添加 / 删除商品、点赞列表更新等
三、ArkUI 核心概念
1. 状态管理 @State:
定义：@State 是 ArkUI 中最基础的状态装饰器，用于声明组件内部的响应式状态。当状态变化时，UI 会自动刷新。
代码示例:
@State count: number = 0;2. 布局组件:
定义ArkUI 提供了 Row（横向布局）和 Column（纵向布局）等容器组件，用于排列子组件。
代码示例:
Row({ space: 10 }) {
Text('Hello')
Text('ArkUI')
}个人理解：布局组件是构建 UI 界面的基础，通过嵌套 Row 和 Column 可以实现复杂的页面结构。
例：
例：
3. 事件处理:
定义ArkUI 支持为组件绑定各种事件（如点击、滑动等），通过事件处理器实现交互逻辑。
代码示例：
Button('点击我')
.onClick(() => {
console.log('按钮被点击了');
})个人理解事件处理是实现用户交互的关键，如点赞、购物车数量修改等功能都依赖事件处理。
四、ArkUI 实战案例
案例一：点赞功能
功能描述点击点赞图标后，点赞数 +1，颜色变为红色。
核心代码：
@Entry
@Component
struct LikeButton {//声明变量 颜色
@State myColor: string = '#7e7e7e'
@State myCount: number = 8888
build() {
Column() {
Image($r('app.media.eyes'))
.width('100%')
.borderRadius({ topLeft: 6, topRight: 6 })
Text('考验眼力又来了，你能看到几只鸭子？')
.fontSize(14)
.lineHeight(18)
.padding({ left: 5, right: 5 })
Row() {
Text(this.myColor.toString())
Image($r('app.media.avatar'))
.width(16)
.margin({ right: 3 })
Text(this.myCount.toString())
.fontSize(12)
.fontColor('#7e7e7e')
}
Row() {
Image($r('app.media.ic_like'))
.width(14)
.margin({ right: 3 })
.onClick(() => {
this.myCount += 1
this.myColor = '#ff0000'
})
.fill(this.myColor)
Text(this.myCount.toString())
.fontSize(12)
.fontColor(this.myColor)
}
}
.width('100%')
.padding(5)
}
}案例二：购物车功能
功能描述通过 + 和 - 按钮修改商品数量，并实时计算总价和优惠金额。
核心代码：
@Entry
@Component
struct ShoppingCart {
@State count: number = 1
@State oldPrice: number = 40.4
@State newPrice: number = 10.4
build() {
Column() {
Row({ space: 10 }) {
Image($r('app.media.product1'))
.width(100)
.borderRadius(8)
Column({ space: 6 }) {
Text('冲销量 1000ml 缤纷小果水果捞')
.lineHeight(20)
.fontSize(14)
Text('客 10 份 折扣商品')
.fontSize(12)
.fontColor('#7f7f7f')
}
}
Row({ space: 5 }) {
Text() {
Span('¥')
.fontSize(14)
Span(this.newPrice.toFixed(2))
.fontSize(18)
}
Text() {
Span('¥')
.fontSize(14)
.fontColor('#999')
.decoration({ type: TextDecorationType.LineThrough })
Span(this.oldPrice.toFixed(2))
.fontColor('#999')
.decoration({ type: TextDecorationType.LineThrough })
}
}
Row() {
Text('-')
.width(22)
.height(22)
.border({ width: 1, color: '#7e7e7e' })
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
.onClick(() => {
this.count -= 1
})
Text(this.count.toString())
.height(22)
.borderWidth({ top: 1, bottom: 1 })
.padding({ left: 10, right: 10 })
.fontSize(14)
Text('+')
.width(22)
.height(22)
.border({ width: 1, color: '#7e7e7e' })
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
.onClick(() => {
this.count += 1
})
}
Row({ space: 10 }) {
Text() {
Span('已选' + this.count + '件，')
.fontColor('#848884')
Span('合计：')
Span('¥')
.fontColor('#ff4104')
Span((this.count * this.newPrice).toFixed(2))
.fontColor('#ff4104')
.fontSize(16)
}
Text('共减¥' + (this.count * (this.oldPrice - this.newPrice)).toFixed(2))
.fontColor('#ff4104')
.fontSize(14)
}
}
.width('100%')
.padding(20)
}
}五、学习心得与总结
通过学习 ArkUI，我发现它的核心优势在于：
- 数据驱动 UI：
@State等状态装饰器让状态管理变得简单直观 - 丰富的布局组件：Row/Column 等布局容器让页面构建更高效
- TypeScript 支持：提供了良好的类型检查，减少运行时错误
- 事件处理机制：简单易用，适合各种交互场景
恭喜您，迈出了鸿蒙应用开发坚实的一步！🎉
🤔 接下来，我将继续为大家更新鸿蒙开发的相关知识点，如果喜欢，记得关注驻波。
✅ 如果你觉得这篇 ArkUI 学习笔记对你有帮助，记得 点赞 + 收藏，关注我获取更多鸿蒙开发干货！📝 有任何问题欢迎在评论区留言，我们一起交流学习！
从 0 到 1：用 ArkUI 写出你的第一个鸿蒙 App 界面 -CSDN博客
鸿蒙ArkUI布局与样式进阶（二）—— SVG 设计图案、Padding、Margin、Border、圆角与背景实战-CSDN博客
鸿蒙ArkUI布局与样式进阶（三）——线性布局（Row 与 Column）深度解析与工程实践-CSDN博客
鸿蒙ArkUI布局与样式进阶（四）——从 Column 到 Grid，一篇搞懂常用布局（含实战案例与逐行注释）-CSDN博客
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
43
0- 0
已为社区贡献17条内容
所有评论(0)