完整代码 + 逐行详细讲解（鸿蒙 ArkTS 夜间模式开关案例）

一、完整可运行代码

ets

// 标记当前页面为应用入口页面
@Entry
// 标记这是自定义UI组件
@Component
struct Exam2 {
  // 响应式布尔变量：控制夜间模式开关状态，默认false=关闭
  @State isOpen: boolean = false

  // UI构建函数，所有页面组件写在此处
  build() {
    // 最外层垂直布局容器，包裹全部内容
    Column() {
      // 水平行容器：左侧文字“夜览模式” + 右侧开关控件
      Row() {
        Text("夜览模式")
          .fontSize(30) // 设置文字字号30

        // 开关组件，类型为滑块开关
        Toggle({ type: ToggleType.Switch })
          .width("35%")   // 开关宽度占父容器35%
          .height(50)     // 开关高度50
          // 开关切换时触发事件
          .onChange(() => {
            // 布尔取反：true变false、false变true
            this.isOpen = !this.isOpen
          })
      }

      // 提示文本：根据isOpen状态动态切换文字
      Text(this.isOpen ? "夜览模式已开启" : "夜览模式已关闭")
    }
    // 外层Column铺满整个手机屏幕
    .width("100%")
    .height("100%")
    // 动态背景色：开启=深灰色0xd3d3d3；关闭=纯白色
    .backgroundColor(this.isOpen ? 0xd3d3d3 : Color.White)
  }
}

二、整体功能介绍（这个页面是做什么的）

这是鸿蒙 ArkTS 模拟 APP 夜览 / 深色模式切换的交互 Demo，核心功能 3 点：

1. 页面顶部横向排列「夜览模式」文字 + 滑动开关；
2. 滑动开关，页面背景会自动切换浅色 / 深灰色；
3. 开关下方同步文字提示：夜览模式已开启 / 夜览模式已关闭；

两种预览状态

1. 默认初始状态（开关关闭）
   • 开关为灰色关闭状态；
   • 页面背景纯白色；
   • 提示文字：夜览模式已关闭。
2. 滑动打开开关
   • 开关变为蓝色开启状态；
   • 页面整体变为深灰色（模拟夜间护眼深色背景）；
   • 提示文字同步变为：夜览模式已开启。

三、代码分模块深度拆解

1. 基础装饰器

ets

@Entry
@Component
struct Exam2 { }

• @Entry：标识当前Exam2是独立页面，预览器能直接加载；
• @Component：必须搭配build()函数，用来构建自定义界面组件。

2. 响应式状态变量 @State（核心）

ets

@State isOpen: boolean = false

• @State：鸿蒙的响应式装饰器，只要变量值改变，页面所有用到isOpen的地方会自动刷新 UI，无需手动刷新界面；
• boolean布尔类型，只有两个值：true（开启）、false（关闭）；
• 初始值false：页面打开默认关闭夜览模式。

3. 布局容器 Column / Row

1. 外层 Column ()垂直布局，从上到下摆放「开关行」和「状态提示文字」，同时控制全屏宽高与背景色；
2. 内层 Row ()水平布局，实现文字 + 开关左右并排的效果：左边显示文本 “夜览模式”，右边放置滑动开关。

4. Toggle 开关控件（交互核心）

ets

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

1. ToggleType.Switch：指定控件样式为滑动开关（还有单选框、复选框等其他类型）；
2. 宽高修饰器：控制开关尺寸；
3. .onChange()：开关滑动切换时触发的回调函数；
4. this.isOpen = !this.isOpen：布尔取反逻辑
   • 开关关闭 isOpen=false → 滑动后变成 true（开启）
   • 开关打开 isOpen=true → 滑动后变成 false（关闭）

5. 三元表达式动态 UI（三处共用同一变量）

代码里有 3 处靠isOpen实现动态变化，语法：条件 ? 满足时 : 不满足时

1. 提示文字动态切换

   ets

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

2. 页面背景色动态切换（最外层 Column）

   ets

   .backgroundColor(this.isOpen ? 0xd3d3d3 : Color.White)
   

   • 0xd3d3d3：十六进制浅深灰色（夜间护眼底色）
   • Color.White：系统内置纯白色常量

四、完整交互运行流程

1. 页面初始化：isOpen=false
   • 开关灰色关闭；页面白色背景；文字提示「夜览模式已关闭」；
2. 向右滑动开关，触发.onChange：isOpen = true
   • 开关变蓝色开启；页面整体变为深灰色；文字同步切换为「夜览模式已开启」；
3. 向左滑动关闭开关，isOpen = false
   • 所有 UI 自动还原白色背景、关闭提示文字。

五、学习知识点总结

1. @State响应式变量：实现数据驱动 UI 自动刷新；
2. Toggle滑动开关组件与onChange监听事件；
3. 三元运算符?:：动态控制文字、颜色等界面样式；
4. Row/Column横竖组合布局，实现图文并排效果；
5. 百分比宽高、全屏容器设置页面铺满屏幕。