一、代码例子

@Entry
@Component
struct Demo{
  @State msg:string="初始信息"
  @State isOpen:boolean = false
  build() {
    Column({space:25}){
      Column(){
        Text('请输入信息').fontSize(38)
        TextInput({text:this.msg,placeholder:"请输入内容："})
          .width('100%')
          .height(50)
          .onChange((value:string)=>{
            this.msg = value
          })
      }.height('35%')
      Button(this.isOpen?"开关已打开":"开关已关闭")
        .width("100%")
        .height(50)
        .fontSize(18)
        .onClick(()=>{
          this.isOpen = !this.isOpen})
      Column(){
        Row(){
          Text("夜览模式：").fontSize(30).fontColor(Color.Red)
          Toggle({type:ToggleType.Switch})
            .width("35%")
            .height(50)
            .onChange(()=>{
              this.isOpen = !this.isOpen
            })
        }
        Text(this.isOpen?"夜览模式已开启":"夜览模式已关闭").fontColor(Color.Green)
      }.width("100%")
      .backgroundColor(this.isOpen?Color.Black:Color.White)
      Column(){
        Text("你输入的内容是：")
          .fontSize(26)
          .textAlign(TextAlign.Start)
          .width('100%')
        Text(this.msg)
          .width('100%')
          .fontSize(24)
          .fontColor(Color.Black)
        Row(){
          Text(this.isOpen?"开关状态：开启":"开关状态：关闭")
            .fontSize(32)
            .fontColor(this.isOpen?Color.Red:Color.Green)
            .width('100%')
            .height('45%')
        }

      }.backgroundColor(Color.Gray)
      .width('100%')
      .height('55%')
      .borderRadius(12)
      .padding(15)
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

二、核心知识点逐点解析

1. @State 装饰器：响应式状态管理（全文核心）

typescript

运行

@State msg:string="初始信息"
@State isOpen:boolean = false

核心作用

被@State修饰的变量为响应式状态变量：变量值一旦发生修改，所有绑定该变量的 UI 组件会自动刷新重绘，实现「数据驱动视图」，无需手动更新页面元素。

两种常用状态类型讲解

1. 字符串状态 msg
   • 数据类型为string，专门存储文本类数据，用于承接输入框输入内容；
   • 赋予初始值"初始信息"，页面加载完成后，绑定该变量的输入框、展示文本会默认渲染初始内容；
   • 可与 TextInput 组件绑定，实现输入内容双向同步。
2. 布尔状态 isOpen
   • 数据类型为boolean，仅有true、false两个取值，多用于开关、模式切换类业务；
   • 核心切换语法：this.isOpen = !this.isOpen，对布尔值取反，一键实现 “开启 / 关闭” 状态互换；
   • 全局共享特性：按钮、开关组件修改的是同一个isOpen变量，一处修改，页面所有绑定该状态的组件同步更新。

2. TextInput 文本输入框：双向数据绑定

typescript

运行

TextInput({text:this.msg,placeholder:"请输入内容："})
.onChange((value:string)=>{
  this.msg = value
})

1. 构造入参说明
   • text：绑定 @State 字符串变量，输入框默认展示变量内存储的文本，建立数据和输入框的关联；
   • placeholder：输入框无内容时显示灰色提示占位文字，引导用户输入。
2. onChange 输入监听事件 用户输入、删除文字时会实时触发回调函数，回调参数value为当前输入框完整文本。将value赋值给this.msg后，所有展示this.msg的 Text 组件会同步刷新，完成双向数据绑定。

3. Button 按钮点击交互

typescript

运行

Button(this.isOpen?"开关已打开":"开关已关闭")
.onClick(()=>{
  this.isOpen = !this.isOpen
})

1. 按钮文字采用三元表达式动态渲染，根据isOpen布尔值自动切换展示文本；
2. onClick点击事件：手指点击按钮时触发回调，执行布尔取反逻辑，切换全局开关状态，页面所有关联 UI 同步变化。

4. Toggle 切换开关组件

typescript

运行

Toggle({type:ToggleType.Switch})
.onChange(()=>{
  this.isOpen = !this.isOpen
})

• ToggleType.Switch：定义组件样式为滑动开关，和系统设置页功能开关样式一致；
• onChange滑动监听事件：用户左右滑动开关时触发状态取反，和 Button 共用同一个isOpen状态变量，按钮、开关任意操作，页面交互效果完全同步。

5. 三元表达式：动态文字、动态样式（高频实用语法）

三元运算符是 ArkTS 实现动态 UI 的核心简洁语法，无需编写冗长 if 判断，一行代码根据状态切换页面表现。

基础语法格式

判断条件 ? 条件成立展示内容 : 条件不成立展示内容

三大实战使用场景

1. 动态切换文本内容

   typescript

   运行

   Text(this.isOpen?"夜览模式已开启":"夜览模式已关闭")
   

2. 动态切换容器背景色

   typescript

   运行

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

3. 动态切换文字颜色

   typescript

   运行

   .fontColor(this.isOpen?Color.Red:Color.Green)
   

多用于深色 / 浅色模式切换、开关状态提示、权限状态展示等业务场景。

6. Text 文本组件与通用样式修饰 API

1. Text 文本组件基础样式接口
   • .fontSize(数值)：控制文字字号大小；
   • .fontColor(Color.xxx)：设置文字颜色，框架内置 Red、Green、Gray、Black、White 等颜色枚举；
   • .textAlign(TextAlign.Start)：设置文字左对齐排版。
2. 通用样式修饰符（所有 UI 组件均支持）
   • .width() / .height()：控制组件宽高尺寸；
   • .padding(数值)：设置组件内部留白；
   • .backgroundColor()：设置组件背景颜色；
   • .borderRadius(12)：设置圆角，用于卡片美化。

三、页面完整交互逻辑梳理

1. 在 TextInput 输入文字，下方所有绑定msg的 Text 组件实时同步展示输入内容，依托@State响应式自动更新；
2. 点击页面 Button 按钮，全局布尔变量isOpen取反，开关文字、夜览提示、容器背景、状态文字颜色全部同步切换；
3. 滑动 Toggle 开关，交互效果和点击按钮完全一致，二者共享同一个状态变量；
4. isOpen=true（开启状态）：页面相关容器背景变黑、状态提示文字变为红色；isOpen=false（关闭状态）：容器恢复白色背景、提示文字变为绿色。

四、开发总结与拓展思考

本文核心掌握能力

1. 吃透@State响应式状态底层逻辑，熟练使用字符串、布尔两类最常用状态变量；
2. 掌握 TextInput 双向输入绑定、Button 点击、Toggle 滑动开关三类核心交互组件；
3. 熟练运用三元表达式实现动态文字、动态颜色、动态样式；
4. 理解单一状态多组件共享的开发思路，仅用一个布尔变量控制页面多处 UI 变化，精简冗余代码。

拓展学习方向

1. 学习@Link装饰器，实现多组件之间双向状态同步；
2. 结合@StorageLink持久化布尔状态，退出页面重新打开后保留夜览开关状态；
3. 在 TextInput 的 onChange 回调中增加字符串逻辑判断，实现输入长度限制、特殊字符过滤等表单校验功能。

结语

这份综合案例覆盖鸿蒙 ArkTS 入门绝大多数交互核心知识点，全部交互逻辑都围绕数据驱动视图的核心思想展开，是从静态展示页面进阶到可交互动态页面的关键入门案例。熟练掌握 @State 与各类交互组件后，可独立开发表单、设置页面、输入展示类常规业务功能。

文章仅供参考，如有雷同纯属巧合