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

aska0 · 2026-07-01 08:54:50 发布

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

typescript

运行

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

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

typescript

运行

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

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

typescript

运行

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

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

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

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 的更新。

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