一、博客摘要

在鸿蒙 ArkTS 开发中，@State是实现数据驱动 UI的核心装饰器，只要状态变量发生变化，所有绑定该变量的组件会自动刷新页面，无需手动更新视图。 本文结合两个完整实战 Demo，手把手讲解三种最常用交互场景：

1. TextInput 输入框双向实时回显
2. Button 点击切换文本状态
3. Toggle 滑动开关实现夜览模式全局换肤 覆盖线性布局Column/Row、三元表达式动态渲染、事件回调等高频知识点，适合 ArkTS 零基础入门学习

二、前置核心知识点

1. @State 状态装饰器

• 作用：修饰组件内变量，使其成为响应式状态；
• 规则：变量修改后，页面所有引用该变量的组件自动重新渲染；
• 支持类型：字符串string、布尔boolean、数字number等基础类型。

2. 核心组件说明

表格

组件	用途	核心事件
TextInput	单行文本输入框	.onChange 监听输入内容变化
Button	可点击按钮	.onClick 监听点击操作
Toggle	滑动开关 / 勾选框	.onChange 监听开关切换
Column	垂直线性布局	{space:数值} 设置内部上下间距
Row	水平线性布局	子组件从左到右横向排列

3. 三元表达式（动态 UI 核心）

语法：条件 ? 成立值 : 不成立值 可动态控制：文字内容、背景色、字体颜色、尺寸等任意组件属性。

三、Demo1：输入框 + 按钮状态切换（Index.ets）

1. 完整源码

2. 功能分层讲解

（1）文本输入实时回显逻辑

1. 定义@State msg:string=""存储输入内容；
2. TextInput绑定text:this.msg读取状态；
3. 输入时触发.onChange，将输入值赋值给this.msg；
4. 下方Text(this.msg)自动同步渲染输入文字，实现双向联动。

（2）Button 点击切换状态逻辑

1. 布尔状态isOpen默认false，按钮初始显示「开关已关闭」；
2. 点击按钮执行 this.isOpen = !this.isOpen，布尔值取反；
3. 两处 UI 同步更新：按钮文字、底部状态提示文本，全部自动刷新。

3. 运行预览效果

1. 在输入框打字，下方实时同步展示输入内容；
2. 点击蓝色按钮，按钮文字切换，底部同步显示「打开 / 关闭」状态；
3. 所有组件上下均匀分布，页面留有边距不贴屏幕边缘。

---

四、Demo2：Toggle 滑动开关实现夜览模式换肤（6.24Examp2.ets）

1. 完整源码

2. 核心逻辑拆解

（1）Toggle 滑动开关

ToggleType.Switch代表移动端标准滑动开关组件； 滑动触发.onChange回调，修改isOpen布尔状态。

（2）全局动态换肤（三元表达式双重使用）

1. 动态文字：isOpen=true显示「夜览模式已开启」，反之显示关闭；
2. 动态背景色：开启时页面填充浅灰色0xd3d3d3，关闭为纯白色；
3. width("100%")+height("100%")让 Text 填满剩余屏幕，实现全局背景切换效果。

3. 交互效果

1. 初始开关关闭：页面白底，提示文字「夜览模式已关闭」；
2. 右滑打开开关：页面整体变为灰色，文字同步切换；
3. 左滑关闭开关，页面恢复纯白，所有状态复原。