鸿蒙ArkTS核心语法与组件演示代码介绍
【代码】鸿蒙ArkTS核心语法与组件演示代码介绍。
·
- 代码功能概述
一个综合性的鸿蒙应用示例，旨在展示ArkTS的核心语法和常用组件。它集成了多种基础功能，包括：
文本显示与状态更新
按钮交互与计数器
条件渲染（组件的显示/隐藏）
列表渲染（动态展示数组数据）
文本输入与数据添加
通过这个示例，可以直观地了解ArkTS如何实现数据驱动UI更新的开发模式。 - 代码逻辑分析
整个应用遵循"状态驱动UI"的核心逻辑： - 初始化：应用启动时，初始化一系列状态变量（ @State ），如计数器、文本内容、布尔开关和用户列表。
- UI构建： build() 方法根据当前状态构建UI界面，所有组件的初始显示都依赖于这些状态变量。
- 用户交互： - 点击"增加"/“减少"按钮 → 修改 counter 状态 → UI自动刷新计数器显示 - 切换开关 → 修改 isVisible 状态 → 控制文本组件的显示/隐藏 - 输入用户名并点击"添加” → 更新 userList 数组 → UI自动新增列表项
- 状态同步：任何状态变量的改变都会立即反映到依赖它的UI组件上，无需手动操作界面。
完整代码
typescript // 鸿蒙ArkTS教学示例 - 核心语法与组件演示 // 本示例展示了ArkTS的核心功能，适合初学者快速上手
@Entry
@Component struct ArkTSTutorial { // ========== 状态管理 ========== //
@State装饰器：状态变量，数据变化会自动刷新UI
@State name: string = ‘’;
@State message: string = ‘欢迎学习ArkTS!’;
@State counter: number = 0;
@State isVisible: boolean = true;
@State userList: string[] = [‘张三’, ‘李四’, ‘王五’];
build() {
// ========== 布局容器 ========== //
Column：垂直布局容器（类似flex-column）
Column({ space: 20 }) {
// ========== 基础组件 ========== // Text组件：显示文本
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontColor(‘#1272C9’) // Divider：分割线 Divider() // ========== 条件渲染 ==========
// if语句控制组件显示/隐藏
if (this.isVisible) { Text(‘条件渲染示例：点击下方开关控制这段文本’)
.fontSize(16)
.fontColor(‘#FF6B35’) } // 计数器展示
Text(计数器: ${this.counter}) .
fontSize(24) // Row：水平布局容器
Row({ space: 15 })
{ // Button组件：按钮 Button(‘增加’)
.onClick(() => { // 事件处理：修改状态变量
this.counter++;
this.message =点击了${this.counter}次; })
Button(‘减少’)
.onClick(() => {
this.counter–;
this.message =点击了${this.counter}次; }) } // 开关控制
Row({ space: 10 }) {
Text(‘显示/隐藏文本:’)
Toggle({ type: ToggleType.Checkbox, isOn: this.isVisible })
.onChange((value: boolean) => {
this.isVisible = value; }) } // ========== 列表渲染 ==========
Text(‘用户列表:’)
.fontSize(18) // ForEach：列表渲染
ForEach(this.userList, (user: string) => { Text(user).fontSize(16) }) // 添加用户功能
Row({ space: 10 }) { TextInput({ placeholder: ‘输入用户名’ })
.onChange((value: string) => { this.name =${value}; })
.width(250)
Button(‘添加’)
.onClick(() => { // 数组操作
this.userList.push(this.name);
this.userList = […this.userList]; // 创建新引用触发更新 }) } }
.width(‘100%’)
.padding(20)
}
}
想入门鸿蒙开发又怕花冤枉钱?别错过!现在能免费系统学 – 从 ArkTS 面向对象核心的类和对象、继承多态，到吃透鸿蒙开发关键技能，还能冲刺鸿蒙基础 +高级开发者证书，更惊喜的是考证成功还送好礼!快加入我的鸿蒙班，一起从入门到精通，班级链接:点击免费进入
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
17
0- 0
已为社区贡献5条内容
所有评论(0)