完整代码 + 逐行详细讲解（ArkTS / 鸿蒙 HarmonyOS）

LLLrrrrrrr

133人浏览 · 2026-06-24 10:37:44

LLLrrrrrrr · 2026-06-24 10:37:44 发布

完整代码 + 逐行详细讲解（ArkTS / 鸿蒙 HarmonyOS）

一、完整可运行代码

ets

// 页面入口装饰器，标识当前页面是应用启动页
@Entry
// 自定义组件装饰器
@Component
struct Exam1{
  // 响应式状态变量：存储输入框文本，UI会随变量自动刷新
  @State msg: string = ""
  // 响应式布尔变量：控制开关按钮状态
  @State isOpen: boolean = false

  // 页面UI构建函数，所有界面组件写在这里
  build() {
    // 最外层垂直容器，子组件上下间距25
    Column({ space: 25 }) {

      // 【上半区域：输入框+切换按钮】高度占页面35%
      Column({ space: 25 }) {
        // 提示文本
        Text("请输入信息：")
          .fontSize(26)         // 字号26
          .textAlign(TextAlign.Start) // 文字左对齐
          .width('100%')        // 宽度铺满父容器

        // 文本输入框，双向绑定msg变量
        TextInput({ text: this.msg, placeholder: "请输入内容：" })
          .width('100%')
          .height(50)
          .fontSize(24)
          // 输入内容改变时触发，把输入值赋值给msg
          .onChange((value: string) => {
            this.msg = value
          })

        // 切换按钮：根据isOpen动态显示文字
        Button(this.isOpen ? "开关已打开" : "开关已关闭")
          .width('100%')
          .height(50)
          .fontSize(18)
          // 点击按钮，取反isOpen状态（true变false，false变true）
          .onClick(() => {
            this.isOpen = !this.isOpen
          })
      }
      .height('35%') // 这个输入区域整体高度占屏幕35%

      // 【下半区域：内容展示区】高度55%，灰色背景圆角盒子
      Column({ space: 15 }) {
        Text("你输入的内容是：")
          .fontSize(20)
          .textAlign(TextAlign.Start)
          .width('100%')
          .padding({ top: 15 }) // 顶部内边距15

        // 实时显示输入框输入的文字msg，灰色字体
        Text(this.msg)
          .width('100%')
          .fontSize(24)
          .fontColor(Color.Gray)

        // 水平行容器：展示开关状态
        Row(){
          Text("开关状态：")
            .fontSize(26)
          // 三元表达式：isOpen为true显示“开启”，否则显示“关闭”，红色字体
          Text(this.isOpen ? "开启" : "关闭")
            .fontSize(26)
            .fontColor(Color.Red)
        }
        .width('100%')
      }
      // 下半区域样式：浅灰背景、铺满宽、占屏幕55%高、圆角、内边距
      .backgroundColor("#F5F5F5")
      .width('100%')
      .height('55%')
      .borderRadius(12)
      .padding(15)

    }
    // 最外层大容器铺满全屏，四周内边距20
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

二、整体功能说明（这个页面是干什么的）

这是一个鸿蒙 ArkTS 交互演示页面，包含两大交互功能：

文本输入实时回显 在顶部输入框打字，下方灰色盒子里会立刻同步显示你输入的所有文字；
按钮状态切换 点击蓝色按钮，按钮文字会在「开关已打开 / 开关已关闭」之间切换，同时下方红色文字同步更新开关状态。

页面布局分上下两块：

上半部分（35% 屏幕高度）：文字提示 + 输入框 + 切换按钮；
下半部分（55% 屏幕高度）：浅灰色圆角展示区，同时显示输入内容、当前开关状态。

三、核心知识点逐块拆解讲解

1. 装饰器：@Entry、@Component

@Entry：标记当前 struct 是页面入口，应用启动后直接渲染这个页面；
@Component：标记这是一个自定义 UI 组件，必须搭配build()函数写界面。

2. @State 响应式变量（核心重点）

ets

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

@State修饰的变量是响应式数据：只要变量值发生变化，页面上所有用到这个变量的组件会自动刷新 UI，不用手动更新界面。

msg：字符串，专门存储输入框里用户输入的文字；
isOpen：布尔值（只有 true/false），记录开关的两种状态，默认false= 关闭。

3. 布局容器 Column / Row

Column({space:25})：垂直布局，内部组件从上到下排列，space控制组件之间上下间距；
Row()：水平布局，内部组件从左到右排列，用来放 “开关状态：红色文字” 这一行；
页面分层逻辑：外层大 Column 包裹上下两大区域；上区域用 Column 放输入框按钮，限制高度 35%；下区域 Column 做展示盒子，限制高度 55%。

4. TextInput 输入框交互

ets

TextInput({ text: this.msg, placeholder: "请输入内容：" })
  .onChange((value: string) => {
    this.msg = value
  })

text: this.msg：输入框绑定响应式变量 msg；
placeholder：输入框空白时显示的灰色提示文字；
.onChange()：输入监听事件，用户每输入 / 删除一个字都会触发，把最新输入内容赋值给this.msg；
因为 msg 带@State，下方Text(this.msg)会立刻同步显示输入内容，实现实时回显。

5. Button 点击切换逻辑

ets

Button(this.isOpen ? "开关已打开" : "开关已关闭")
  .onClick(() => {
    this.isOpen = !this.isOpen
  })

三元表达式控制按钮文字 条件 ? 满足时显示 : 不满足时显示
- isOpen=true → 按钮文字：开关已打开
- isOpen=false → 按钮文字：开关已关闭
onClick 点击事件 this.isOpen = !this.isOpen：取反操作
- 当前是 false（关闭）→ 点击变成 true（打开）
- 当前是 true（打开）→ 点击变成 false（关闭）
下方状态展示区同步刷新：
ets
```
Text(this.isOpen ? "开启" : "关闭")
```
同样用三元表达式，和按钮状态完全同步，红色字体突出显示。