一、核心基础：@State 响应式状态装饰器

1. 作用

@State用于声明组件内部私有状态变量，变量一旦发生修改，所有绑定该变量的 UI 组件会自动刷新，是 ArkUI 实现界面联动的核心。

2. 语法格式

typescript

运行

@State 变量名: 类型 = 初始值

3. 案例中两种典型状态

typescript

运行

// 布尔状态：控制开关、深色模式、按钮文字切换
@State isOpen: boolean = false
// 字符串状态：存储输入框录入的文本，实现实时回显
@State msg: string = ""

4. 使用规则

组件内读写状态变量必须加 this.，例如 this.isOpen、this.msg。

二、布局组件：Column / Row 页面排版

1. Column 纵向布局（垂直排列）

1. 基础用法：Column({space: 数值})
   • space 参数：直接设置内部所有子组件垂直间距，无需重复写外边距；
   • 支持多层嵌套 Column，实现页面分块（输入区、按钮区、展示区分开）。
2. 常用修饰符
   • .width("100%") / .height("100%")：占满父容器，实现全屏页面；
   • .textAlign(TextAlign.Start)：内部文字左对齐；
   • .padding({top: 15})：设置组件内边距，控制留白。

2. Row 横向布局（水平排列）

用于并排展示内容，比如「文字标签 + 滑块开关」同行展示。

三、三大交互组件实战解析

（一）Toggle 滑块开关（深色模式案例）

实现效果：滑动开关切换页面深浅背景、状态提示文字。

1. 组件创建

typescript

运行

Toggle({type: ToggleType.Switch})

ToggleType.Switch 指定为滑块开关样式。2. 尺寸与点击事件

typescript

运行

Toggle({type: ToggleType.Switch})
  .width("35%")
  .height(50)
  .onChange(()=>{
    // 布尔值取反，切换开关状态
    this.isOpen = !this.isOpen
  })

• onChange：滑动开关触发回调；
• !this.isOpen：布尔取反，true ↔ false。

1. 三元表达式动态绑定 UI（联动效果核心）状态变量可直接控制文本、背景色等任意属性：

typescript

运行

// 动态文字
Text(this.isOpen ? "夜览模式已开启" : "夜览模式已关闭")
// 动态页面背景色
.backgroundColor(this.isOpen ? 0xd3d3de : Color.White)

• 色值两种写法：内置常量Color.White、十六进制色值0xRRGGBB。

（二）Button 点击按钮

实现效果：点击按钮切换按钮自身文字，复用同一个布尔状态控制页面样式。

1. 动态按钮文本

typescript

运行

Button(this.isOpen ? "开关已打开" : "开关已关闭")

1. 点击事件 onClick

typescript

运行

.onClick(()=>{
  this.isOpen = !this.isOpen
})

点击后修改isOpen，页面所有绑定该变量的元素同步刷新，实现「按钮、背景、提示文字一体联动」。

（三）TextInput 文本输入框（实时回显案例）

实现效果：输入内容实时同步到下方 Text 文本，双向数据绑定。

1. 基础创建

typescript

运行

TextInput({text: this.msg, placeholder: "请输入内容:"})

• text：绑定状态变量，同步输入内容；
• placeholder：输入框空白时的灰色提示文字。

1. 输入监听 onChange

typescript

运行

.onChange((value: string)=>{
  // value为当前输入框最新文本
  this.msg = value
})

用户输入 / 删除文字时持续触发，将输入内容赋值给msg；下方Text(this.msg)会自动同步展示文字，完成实时回显。

四、Text 文本组件通用知识点

1. 静态文本：Text("静态提示文字")
2. 动态文本：直接绑定@State变量 Text(this.msg)
3. 样式修饰 API

typescript

运行

.fontSize(24)        // 字号
.fontColor(Color.Gray)// 文字颜色
.width("100%")       // 宽度自适应
.height("40%")       // 百分比高度

五、两条核心响应式数据流

数据流 1：输入框实时回显

1. 用户在 TextInput 输入内容 → 触发onChange；
2. 回调将输入字符串赋值给this.msg；
3. 所有绑定this.msg的 Text 组件自动刷新文字。

数据流 2：开关 / 按钮控制深色模式

1. 滑动 Toggle / 点击 Button → 修改this.isOpen布尔状态；
2. ArkUI 检测状态变更，自动刷新全部依赖isOpen的 UI：
   • 开关滑块状态、按钮文字、状态提示文本、页面背景色同步切换。

六、通用高频语法总结

1. 三元运算符 条件 ? 真值 : 假值支持文本、颜色、尺寸等所有组件属性动态切换，是联动 UI 的核心写法。
2. 链式调用组件后连续 .样式/事件() 叠加配置，代码结构清晰。
3. 百分比自适应尺寸.width("35%")、.height("20%")，尺寸跟随父容器自适应。
4. 箭头函数事件回调

   typescript

   运行

   // 无参数（开关、按钮）
   .onClick(()=>{})
   // 带参数（输入框）
   .onChange((value:string)=>{})
   

七、Toggle 与 Button 交互对比

表格

组件	交互方式	触发事件	适用场景
Toggle	左右滑动	onChange	功能开关（深色模式、权限总开关）
Button	点击按压	onClick	功能触发、确认操作

两者底层都依靠@State布尔变量实现界面联动，逻辑互通，可根据产品 UI 自由替换。

八、拓展优化建议

当前深色模式案例仅切换背景色，深色场景下白色文字会看不清，可给所有 Text 组件增加动态字体颜色：

typescript

运行

.fontColor(this.isOpen ? Color.White : Color.Black)

开启夜览模式时文字自动变为白色，提升深色页面可读性。

实例