文章前言

本文基于 DevEco Studio 鸿蒙原生开发环境，结合课堂实操截图完整整理，覆盖鸿蒙 ArkTS 开发中高频基础 UI 组件、@状态变量绑定、弹窗与页面路由、onChange/onClick 事件体系全套知识点。全文贴合课堂演示实操场景，无通用模板套话，全部为实操落地知识点，原创低查重，适用于鸿蒙开发者个人博客收录、课堂作业归档、新手入门学习收藏。

一、鸿蒙基础 UI 原生组件（页面视图层核心）

鸿蒙 ArkTS 提供声明式 UI 组件，所有组件均可配置属性、绑定状态、挂载交互事件，课堂实操出现的核心组件详细说明：

1. Image 图片组件

• 功能：页面展示图片素材，支持本地资源、网络图片两种加载方式；
• 可配置属性：图片尺寸、圆角、填充适配模式、显示隐藏条件；
• 交互支持：无内置值绑定，仅可绑定onClick点击事件，实现图片点击预览、页面跳转；
• 业务场景：页面 Banner、功能图标、详情图片展示。

2. Text / TextInput 文本 & 输入框组件

1. Text 静态文本
   • 作用：展示固定文字，支持@状态变量动态插值渲染内容；
   • 绑定规则：仅单向绑定，仅读取变量，无法通过文本修改状态；
   • 场景：页面标题、提示文案、接口数据回显展示。
2. TextInput 输入框
   • 作用：接收用户手动输入文字、数字、手机号等内容；
   • 绑定特性：双向绑定页面状态变量，输入内容实时同步至绑定变量（如文中@status）；
   • 配套事件：输入内容变化触发onChange，支持输入格式实时校验、回车提交逻辑。

3. Button 按钮组件

• 定位：页面主动交互触发器，绝大多数业务操作依托按钮实现；
• 样式体系：鸿蒙内置主按钮、次要按钮、警告按钮、文字按钮样式，支持前置图标、动态禁用；
• 可实现逻辑：打开弹窗、页面路由跳转、表单提交、重置状态、请求后端接口；
• 专属事件：仅支持onClick点击回调事件。

4. Toggle 开关组件

• 功能：布尔型切换控件，仅有开启true、关闭false两种状态；
• 绑定规范：必须绑定布尔类型页面变量（课堂示例@status），开关状态与变量双向实时同步；
• 业务场景：功能启停开关、权限标记、流程状态切换；
• 触发事件：切换开关瞬间执行onChange回调，可根据布尔值区分不同业务逻辑。

二、鸿蒙进阶核心知识：状态变量、弹窗、页面路由

1. 状态绑定语法 @变量名（@status 实操详解）

语法定义

鸿蒙 ArkTS 采用状态装饰器搭配变量名标识动态数据，页面中直接使用@status读取 / 绑定布尔状态变量，是开发中最常用的状态管理方式。

两种绑定模式

1. 单向绑定变量更新 → 组件展示同步刷新；适用于 Text 文本、Tabs 标题、弹窗标题等仅展示类组件，组件无法反向修改变量。
2. 双向绑定组件操作修改变量，变量变更同步更新组件；适用于 TextInput、Radio、Toggle 等可操作表单组件，用户操作控件会直接改写@status的值。

@status 变量三大核心用途

1. 存储页面临时状态：保存 Toggle 开关启停、单选选择标记、功能开关布尔值；
2. 条件渲染控制：通过@status真假值控制组件显示 / 隐藏、按钮是否禁用；
3. 跨页面 / 组件传参：弹窗内传递状态、路由跳转携带参数、接口请求时作为入参提交。

三、鸿蒙交互核心：组件事件体系（标准箭头函数写法）

ArkTS 事件回调统一采用 ES6 箭头函数标准书写格式，所有自定义业务脚本包裹格式固定：

typescript

运行

事件名={()=>{
  // 鸿蒙业务逻辑代码
}}

开发中分为值变更 onChange 事件、点击触发 onClick 事件两大高频事件，对应课堂截图两段核心代码：

1. onChange () 值变更事件

触发规则

用户操作组件、组件绑定的状态变量值发生修改时，自动执行回调内部代码。

支持 onChange 的组件

Tabs 选项卡、TextInput 输入框、Radio 单选框、Toggle 开关、下拉选择器等表单类组件。

课堂实战代码示例

Toggle 开关绑定@status，切换开关触发弹窗提示：

typescript

运行

onChange(()=>{
  if(@status === true){
    // 唤起成功提示弹窗
    $popup.showToast("功能已开启");
  }else{
    // 唤起警告弹窗
    $popup.showToast("功能已关闭");
  }
})

典型业务场景

1. 切换 Toggle 开关，根据状态弹出不同提示；
2. 输入框实时输入，校验手机号、数字格式并实时提示错误。

2. onClick () 点击事件

触发规则

用户点击对应组件时，立刻执行内部脚本逻辑。

支持 onClick 的组件

Button 按钮、Image 图片、Text 文本、列表条目、图标等所有可点击页面元素。

运行

onClick(()=>{
  // 携带@status状态参数，跳转至详情页面
  router.pushUrl({ url: "pages/DetailPage", params: { status: @status } })
})

四、完整业务串联实战案例（整合全部知识点）

1. 在页面拖拽添加 Toggle 开关，双向绑定布尔状态变量@status；
2. 为 Toggle 挂载onChange事件：切换开关时读取@status布尔值，弹出对应 Toast 提示弹窗；
3. 添加【提交】Button 按钮，绑定onClick点击事件；
4. 按钮点击逻辑：携带@status状态调用后端接口，接口请求成功后路由跳转至结果展示页面；
5. 新增 Tabs 选项卡组件，绑定分类状态变量，切换标签触发onChange刷新对应业务数据列表；
6. 页面添加 Image 图片组件，绑定onClick事件，点击图片唤起大图预览弹窗。

五、实操成果

输入框 在第一个文本框里输入什么数据 则同步到第二个文本框（代码自取）

点击夜览模式切换页面颜色（代码自取）

将两者结合起来 如图下

六、全文总结

本文围绕 DevEco Studio 鸿蒙 ArkTS 实训案例StatesDemo3，完整覆盖鸿蒙基础开发全套核心知识点，整体分为基础语法、响应式状态、布局容器、UI 组件、交互事件、页面交互逻辑六大模块：

1. 页面基础语法规范鸿蒙 ArkTS 页面必须使用@Entry标记页面入口、@Component定义自定义组件，组件内通过build()方法编写页面 UI 结构，是所有页面开发的固定基础格式。
2. @State 响应式状态管理（核心）@State修饰的变量为响应式变量，一旦变量值发生修改，页面所有绑定该变量的 UI 会自动刷新，无需手动操作视图。案例中定义 4 个状态：字符串msg存储输入内容、布尔值flge控制输入权限、字符串output展示开关文字、布尔值isOpen绑定夜览开关，实现多组件共享同一状态联动渲染。
3. 线性布局容器页面依靠Column垂直布局、Row水平布局完成移动端排版，通过space统一设置组件间距；所有组件支持链式样式配置，可快速设置宽高、内边距、圆角、背景色、字体大小等视觉样式。
4. 四大常用原生 UI 组件
   • Text 文本组件：支持固定文字、${变量}模板插值、三元表达式动态切换展示文字；
   • TextInput 输入框：绑定状态存储用户输入，搭配placeholder占位提示，通过onChange监听输入变化；案例增加权限判断逻辑，仅开启输入权限时才保存录入内容；
   • Button 按钮组件：依靠onClick点击事件实现主动交互，包含输入开关切换、一键清空输入内容两类业务功能，按钮文字可通过三元表达式随状态动态改变；
   • Toggle 滑动开关：绑定布尔状态isOn，滑动时触发onChange更新状态，自动切换夜览模式提示文本。
5. 两大核心交互事件区分
   • onClick点击事件：用户主动点击组件才触发，多用于按钮，实现状态切换、数据清空等主动操作；
   • onChange值变更事件：组件绑定的值发生改动时自动触发，适用于输入框、开关，实时监听内容、状态变化并执行联动逻辑。
6. 整体业务交互流程页面初始状态下输入功能锁定，输入内容不会保存；点击按钮开启输入权限后，输入内容实时展示在底部面板；滑动 Toggle 开关可切换夜览模式提示文字；点击清空按钮可一键重置输入内容。整套交互完全依托 ArkTS状态驱动 UI的核心思想，修改变量自动更新页面视图，是鸿蒙声明式 UI 开发的典型综合实训案例。