鸿蒙 ArkTS 实战：实现 Toggle 开关控制夜览模式

郭艾伦、

171人浏览 · 2026-06-24 10:47:40

郭艾伦、 · 2026-06-24 10:47:40 发布

在上一篇文章中我们实现了文本输入与按钮状态联动，本篇继续讲解鸿蒙常用组件 Toggle 开关，完成夜览模式切换功能。通过开关控件动态切换页面背景、提示文本，掌握开关组件使用、状态绑定与全局样式联动。

一、功能简介

本案例实现效果：

页面展示「夜览模式」文字 + 滑动开关；
滑动开关可切换开启 / 关闭状态；
状态改变时，自动更新提示文字与页面背景色；
关闭：白底 + 常规提示；开启：浅灰背景，模拟护眼夜览效果。

二、完整可运行代码

typescript

运行

@Entry
@Component
struct Examp2 {
  // 定义状态变量，控制夜览模式开关状态
  @State isOpen: boolean = false

  build() {
    Column() {
      // 水平布局：文字 + 开关
      Row() {
        Text("夜览模式: ")
          .fontSize(30)
        // 开关组件
        Toggle({ type: ToggleType.Switch })
          .width("35%")
          .height(50)
          // 监听开关切换事件
          .onChange(() => {
            this.isOpen = !this.isOpen
          })
      }

      // 状态提示文本，根据布尔值动态展示内容
      Text(this.isOpen ? "夜览模式已开启" : "夜览模式已关闭")
        .margin({ top: 30 })
        .fontSize(24)
    }
    .width("100%")
    .height("100%")
    // 根据状态动态修改页面背景色
    .backgroundColor(this.isOpen ? 0xd3d3d3 : Color.White)
  }
}

三、代码问题修正说明

原代码逻辑完整，仅补充一处细节优化：

给提示文本增加 margin({ top: 30 })，拉开和开关的间距，布局更美观；
颜色值 0xd3d3d3 为浅灰色，适合作为简易夜览背景；
ToggleType.Switch 代表滑动样式开关，是鸿蒙最常用的开关形态。

四、核心知识点解析

1. 状态管理 @State

typescript

运行

@State isOpen: boolean = false

布尔类型状态变量，默认值 false（夜览模式默认关闭）；
变量改变时，所有引用它的 UI 会自动刷新，实现数据驱动视图。

2. 布局容器

Column：根布局，垂直排列所有子组件，铺满全屏宽高；
Row：水平布局，将「文字」和「Toggle 开关」放在同一行展示。

3. Toggle 开关组件

typescript

运行

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

ToggleType.Switch：设置为滑动开关样式；
onChange：开关状态发生改变时触发回调；
this.isOpen = !this.isOpen：对布尔值取反，实现开关切换逻辑。

4. 三元表达式动态渲染

两处核心动态渲染逻辑：

提示文字：

typescript

运行

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

页面背景色：

typescript

运行

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

语法规则：条件 ? 成立结果 : 不成立结果，是 ArkTS 动态 UI 最常用写法。

五、运行效果

初始状态 开关处于关闭状态，页面白色背景，提示文字：夜览模式已关闭。
打开开关 开关滑至开启位置，页面变为浅灰色背景，提示文字同步变为：夜览模式已开启。
关闭开关 开关切回关闭状态，页面恢复白底，提示文字同步还原。

六、进阶优化版本（推荐使用）

原版仅修改背景色，这里升级为深色护眼夜览模式，同时联动文字颜色，提升体验：

typescript

运行

@Entry
@Component
struct Examp2 {
  @State isOpen: boolean = false

  build() {
    Column() {
      Row() {
        Text("夜览模式: ")
          .fontSize(30)
          // 动态修改文字颜色
          .fontColor(this.isOpen ? Color.White : Color.Black)
        Toggle({ type: ToggleType.Switch })
          .width("35%")
          .height(50)
          .onChange(() => {
            this.isOpen = !this.isOpen
          })
      }

      Text(this.isOpen ? "夜览模式已开启" : "夜览模式已关闭")
        .margin({ top: 30 })
        .fontSize(24)
        .fontColor(this.isOpen ? Color.White : Color.Black)
    }
    .width("100%")
    .height("100%")
    // 深色背景，更贴合夜间使用场景
    .backgroundColor(this.isOpen ? 0x222222 : Color.White)
    .justifyContent(FlexAlign.Center) // 整体内容垂直居中
  }
}

优化点：