ArkTS 入门实战：构建一个交互式信息展示页面

一、代码核心功能概览

这段代码实现了以下功能：

1. 信息输入：用户可以在文本框中输入任意内容。
2. 状态切换：通过一个按钮来切换布尔状态（开 / 关）。
3. 模式切换：通过一个开关组件来切换 “夜览模式”，改变整个页面的背景色。
4. 实时反馈：页面会实时显示用户输入的内容以及两个开关的当前状态。

二、核心知识点拆解

1. 组件定义：@Entry与@Component

typescript

运行

@Entry @Component struct Examp1 { // ... }

• @Component: 这是一个装饰器，用于声明一个自定义组件。struct Examp1由此成为一个可复用的 UI 单元。每个组件都必须实现build()方法来描述其 UI 结构。
• @Entry: 这同样是一个装饰器，用于标记当前组件作为应用的入口组件。一个应用只能有一个@Entry组件，它是 UI 界面的起点。

2. 状态管理：@State

typescript

运行

@State msg:string="" @State isOpen:boolean=false @State iskai:boolean=false

• @State: 这是 ArkTS 中最核心的状态管理装饰器。被它标记的变量（如msg,isOpen,iskai）是组件内部的状态数据。
• 核心特性：当这些状态变量的值发生变化时，ArkUI 框架会自动检测到变化，并重新渲染（rebuild）依赖这些变量的 UI 部分。这就是所谓的 “状态驱动 UI 更新”。

3. UI 构建：build()方法与布局组件

typescript

运行

build() { Column({space:60}){ // ... Row() { // ... } } }

• build()方法: 所有@Component都必须实现此方法。它是用来描述 UI 结构的地方，返回一个组件树。
• 布局组件:
  • Column: 垂直布局容器，子组件从上到下依次排列。{space:60}设置了子组件之间的垂直间距为 60vp。
  • Row: 水平布局容器，子组件从左到右依次排列。
  • 通过嵌套Column和Row，我们可以构建出复杂的页面布局。

4. 基础 UI 组件详解

• Text: 用于显示文本内容。可以通过.fontSize(),.width(),.textAlign()等方法设置样式。
• TextInput: 用于用户输入文本。
  • placeholder: 设置输入框为空时的提示文字。
  • .onChange(): 输入内容变化时的回调事件，我们在这里更新msg状态变量。
• Button: 按钮组件，响应用户点击。
  • 按钮的标题使用了条件渲染：this.isOpen ? "开关已打开" : "开关已关闭"，根据isOpen的状态动态显示不同文本。
  • .onClick(): 点击事件的回调，我们在这里取反isOpen的值。
• Toggle: 开关组件，这里使用了ToggleType.Switch样式。
  • .onChange(): 开关状态变化时的回调，我们在这里取反iskai的值。

5. 数据绑定与条件渲染

ArkTS 采用声明式 UI 范式，UI 是状态数据的直观反映。

• 数据绑定:

  • TextInput的text属性绑定到this.msg。
  • Text的内容直接绑定到this.msg,this.isOpen,this.iskai。
  • Column的backgroundColor绑定到this.iskai，实现了夜览模式的背景色切换。

• 条件渲染:

  • 三元表达式是实现条件渲染的常用方式：
    • this.isOpen ? "开关已打开" : "开关已关闭"
    • this.iskai ? 0xd3d3d3 : Color.White
  • 当状态变量变化时，这些表达式的结果也会随之变化，从而触发 UI 的更新。

三、完整代码逻辑解析

1. 初始化: 页面加载时，msg为空字符串，isOpen和iskai均为false。
2. 输入交互: 用户在TextInput中输入文字，onChange事件触发，msg变量被更新。绑定了msg的Text组件会自动刷新，显示最新输入的内容。
3. 按钮交互: 用户点击按钮，onClick事件触发，isOpen变量取反。绑定了isOpen的按钮标题和下方的状态文本会同步更新。
4. 开关交互: 用户切换Toggle开关，onChange事件触发，iskai变量取反。绑定了iskai的背景色和状态文本会同步更新，实现 “夜览模式” 的切换。