ArkTS 组件事件、状态管理与资源管理

1. 组件事件

组件事件是在用户与界面交互时触发的操作,如点击、触碰、滑屏、按键等。在 ArkTS 中,通过为组件绑定事件处理函数,实现对用户交互的响应。

常用事件示例
事件类型 描述 示例
onClick() 点击事件 Button().onClick(handler)
onTouch() 触摸事件 Image().onTouch(handler)
onKey() 按键事件 TextField().onKey(handler)
onSwipe() 滑屏事件 ScrollView().onSwipe(handler)
按钮点击事件
typescript 复制代码
@Entry
@Component
struct ButtonExample {
  build() {
    Button("点击我")
      .onClick(() => {
        console.log("按钮被点击了!");
      });
  }
}

2. 组件状态

组件状态是指由 @State 装饰的变量,这些变量与 UI 渲染绑定。当状态变量的值发生变化时,UI 会自动刷新。

3. 资源管理

资源管理是开发中必不可少的一环,用于存储和管理应用中的图片、音视频、多语言文本等资源。HarmonyOS 提供了 resource 目录来管理这些资源。

3.1 资源目录结构
目录类型 说明 示例资源文件
base/element 存放 JSON 格式的元素资源,如字符串、颜色、布尔值等 color.json, string.json
base/media 存放图片、音视频等非文本资源 icon.png, background.mp3
base/profile 存放自定义配置文件 test_profile.json
rawfile 自由放置资源文件,未编译直接打包 my_resource.txt, data.csv
3.2 语言环境支持
目录名称 说明
zh_CN 存放中文资源,当设备语言为中文时优先匹配。
en_US 存放英文资源,当设备语言为英文时优先匹配。

4. 文本组件与图片组件

4.1 文本组件

文本组件用于显示固定或动态的文字内容。

typescript 复制代码
Text("欢迎来到 ArkTS 开发")
  .fontSize(18)
  .textColor(Color.Blue);
4.2 图片组件

图片组件 Image 用于展示本地或网络图片。

typescript 复制代码
Image($rawfile("icon.png"))
  .width(100)
  .height(100);

官方文档


凡是过去,皆为序章;凡是未来,皆有可期。

相关推荐
SZYSK11 小时前
鸿蒙人脸识别算法放在终端里:和外挂授权 SDK 差在排障路径
物联网·算法·华为·harmonyos
贾伟康11 小时前
【健康菜谱助手|06】HarmonyOS ArkTS 烹饪计时器实战:处理倒计时、暂停、恢复和到期反馈
软件测试·移动开发·harmonyos·arkts·arkui
贾伟康15 小时前
【健康菜谱助手|05】HarmonyOS ArkTS 购物清单实战:去重食材并同步勾选、数量与清空动作
软件测试·移动开发·harmonyos·arkts·arkui
OpenPortal认证计费系统17 小时前
基于 飞书认证 通过 华为、H3C 结合 OpenPortal认证计费系统 实现 网络准入 飞书授权 实名认证
华为·飞书·h3c·portal认证·openportal
贾伟康1 天前
【健康菜谱助手|01】HarmonyOS ArkTS 菜谱详情页实战:组织食材、营养、步骤和收藏状态
软件测试·移动开发·harmonyos·arkts·arkui
一目Leizi1 天前
折叠屏适配踩坑实录:从“一展开就变形“到一套代码适配多种形态【鸿蒙心迹】
华为·harmonyos
马剑威(威哥爱编程)1 天前
【HarmonyOS 7 小艺智能体实战】03:第一次建智能体——在小艺开放平台把骨架立起来
人工智能·华为·harmonyos
贾伟康2 天前
【健康菜谱助手|04】HarmonyOS ArkTS 一周膳食计划实战:管理日期、餐次与菜谱替换的联动
软件测试·移动开发·harmonyos·arkts·arkui·1024程序员节
贾伟康2 天前
【健康菜谱助手|02】HarmonyOS ArkTS 烹饪步骤实战:把分步操作、完成状态和返回恢复做稳
软件测试·移动开发·harmonyos·arkts·arkui