一、学习概述

本次基于 HarmonyOS ArkTS（ArkUI 声明式 UI）完成综合页面开发，掌握状态变量 @State、TextInput 文本输入、Button 点击按钮、Toggle 开关组件、三目表达式状态渲染、动态背景主题切换五大核心知识点，实现一套具备文本录入、状态切换、暗黑 / 浅色模式切换的交互页面。

二、核心知识点拆解

1. @State 装饰器：响应式状态管理

• 作用：标记组件内的响应式变量，变量值发生修改时，页面绑定该变量的 UI 会自动刷新重绘。
• 代码示例：

@State msg:string=""       // 存储文本输入框内容
@State isOpen:boolean=false // 普通按钮开关状态
@State iskai:boolean=false  // 夜间模式开关状态

• 关键点：所有需要 UI 实时同步更新的数据，必须用@State修饰；修改变量直接赋值即可触发页面刷新，无需手动操作 DOM。

• 2. TextInput 文本输入框组件

  实现用户输入内容双向绑定：

• text: this.msg：绑定状态变量，存储输入内容
• placeholder：输入框占位提示文字
• onChange(value:string)：输入内容实时监听回调，每次输入触发，将最新值赋值给msg

TextInput({text:this.msg,placeholder:"请输入内容:"})
  .width('100%')
  .height(50)
  .onChange((value:string)=>{this.msg=value})

效果：下方文本框实时同步展示用户输入的全部内容。

3. Button 按钮组件 + 点击事件

1. 按钮文字使用三目运算符动态展示状态：this.isOpen?"开关已打开":"开关已关闭"
2. onClick()：点击触发回调，通过取反!this.isOpen切换布尔状态

   Button(this.isOpen?"开关已打开":"开关已关闭")
     .width('100%')
     .height(50)
     .fontSize(18)
     .onClick(()=>{this.isOpen=!this.isOpen})

• 逻辑：点击一次布尔值取反，UI 文字同步切换。

4. Toggle 开关组件（Switch 滑块）

1. type: ToggleType.Switch：设置样式为滑块开关
2. onChange：监听开关滑动切换事件，修改夜间模式状态iskai

Toggle({ type: ToggleType.Switch })
  .width("35%")
  .height(50)
  .onChange(() => {
    this.iskai = !this.iskai
  })

（1）动态文字展示

根据布尔状态切换提示文本，统一展示当前开关状态：

// 按钮开关状态展示
Text(this.isOpen?"开关的状态:开启":"开关的状态:关闭")
// 夜间模式状态展示
Text(this.iskai?"夜览模式:开启":"夜览模式:关闭")

（2）动态背景色（暗黑模式核心）

通过iskai状态全局切换页面背景，实现浅色 / 暗黑主题：

// 根容器动态背景
.backgroundColor(this.iskai?0xd3d3d3:Color.White)

• 逻辑：开关打开时页面灰色暗黑底色，关闭时白色浅色底色。

6. 布局容器基础：Column / Row

1. Column()：垂直排列子组件，space参数控制内部元素间距
2. Row()：水平排列子组件，用于实现 “文字 + 开关” 横向同行布局
3. 通用尺寸样式：.width()/.height()支持百分比、固定数值；.padding()内边距、.borderRadius()圆角、.fontSize()字号、.fontColor()文字颜色等基础修饰符。

三、完整业务逻辑梳理

1. 文本输入功能：用户在 TextInput 输入内容 → onChange 实时存入 msg 变量 → 底部 Text 组件同步展示输入内容；
2. 按钮开关功能：点击 Button → isOpen 布尔取反 → 按钮文字、状态提示文本同步切换；
3. 夜间模式功能：滑动 Toggle 滑块 → iskai 布尔取反 → 页面整体背景色切换 + 夜览模式状态文字同步更新。

四、完整可运行代码

@Entry
@Component
struct Examp1{
  @State msg:string=""
  @State isOpen:boolean=false
  @State iskai:boolean=false

  build() {
    Column({space:60}){
      Column({space:25}){
        Text("请输入信息:")
          .width('100%')
          .height(50)
        TextInput({text:this.msg,placeholder:"请输入内容:"})
          .width('100%')
          .height(50)
          .onChange((value:string)=>{this.msg=value})
        Button(this.isOpen?"开关已打开":"开关已关闭")
          .width('100%')
          .height(50)
          .fontSize(18)
          .onClick(()=>{this.isOpen=!this.isOpen})
        Row() {
          Text("夜览模式")
            .fontSize(30)
          Toggle({ type: ToggleType.Switch })
            .width("35%")
            .height(50)
            .onChange(() => {
              this.iskai = !this.iskai
            })
        }
        .height("35%")
        Column(){
          Text("你输入的内容是:")
            .fontSize(26)
            .textAlign(TextAlign.Start)
            .width('100%')
            .padding({top:15})
          Text(this.msg)
            .fontSize(24)
            .fontColor(Color.Gray)
            .width('100%')
          Text(this.isOpen?"开关的状态:开启":"开关的状态:关闭")
            .width("100%")
            .height(50)
            .fontSize(26)
          Text(this.iskai?"夜览模式:开启":"夜览模式:关闭")
            .width("100%")
            .height(50)
            .fontSize(26)
        }
        .backgroundColor(0xF5F5F5)
        .width("100%")
        .height("55%")
        .borderRadius(12)
        .padding(15)
      }
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor(this.iskai?0xd3d3d3:Color.White)
  }
}

五、学习总结

1. 掌握 ArkUI 响应式核心@State，理解数据驱动 UI 的思想，数据改变自动刷新页面；
2. 熟练使用基础交互组件：输入框 TextInput、点击按钮 Button、滑块开关 Toggle，并掌握各自事件回调；
3. 学会三目运算符双重用法：动态文字渲染、动态样式（主题切换）；
4. 理解 Column 垂直、Row 水平两大基础布局容器，搭配尺寸、边距、圆角等样式修饰符完成页面排版；
5. 实现小型综合交互案例：文本双向绑定、布尔状态切换、简易暗黑模式切换，具备基础页面交互开发能力。