第3章基础布局与组件3.1 常用组件鸿蒙 ArkTS 提供了很多基础组件，常见的有： Text：文本显示 Butto

3.1 常用组件

鸿蒙 ArkTS 提供了很多基础组件，常见的有：

Text：文本显示
Button：按钮
Image：图片
TextInput：输入框
List：列表
Slider：滑块
Switch：开关

📌 例子：

Column({ space: 10 }) {
  Text("我是文字")
    .fontSize(20)

  Button("点我一下")
    .onClick(() => {
      console.log("按钮被点击了")
    })

  Image($r('app.media.logo'))
    .width(100)
    .height(100)

  TextInput({ placeholder: "请输入用户名" })
    .width(200)

  Slider({ value: 50, min: 0, max: 100 })
    .onChange((value) => {
      console.log("滑动值:", value)
    })

  Switch({ checked: true })
    .onChange((isChecked) => {
      console.log("开关状态:", isChecked)
    })
}

3.2 布局容器

鸿蒙 UI 是 组件化 + 声明式布局，常用布局容器有：

1. Column（垂直布局）

垂直排列子组件。

Column({ space: 10, alignItems: HorizontalAlign.Center }) {
  Text("第一行")
  Text("第二行")
  Text("第三行")
}

2. Row（水平布局）

水平排列子组件。

Row({ space: 20, justifyContent: FlexAlign.SpaceBetween }) {
  Text("左")
  Text("中")
  Text("右")
}

3. Flex（弹性布局）

类似 Web 前端的 flexbox，支持复杂布局。

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) {
  Text("A").backgroundColor(Color.Red).width(50).height(50)
  Text("B").backgroundColor(Color.Green).width(50).height(50)
  Text("C").backgroundColor(Color.Blue).width(50).height(50)
}

4. Stack（层叠布局）

组件叠加（类似 CSS position: absolute）。

Stack() {
  Image($r('app.media.logo')).width(150).height(150)
  Text("LOGO").fontColor(Color.White).fontSize(20)
}

3.3 事件处理

鸿蒙组件支持常见事件绑定：

onClick：点击事件
onLongPress：长按事件
onTouch：触摸事件
onChange：状态变化

📌 例子：

Button("提交")
  .onClick(() => {
    console.log("提交按钮点击")
  })

3.4 状态管理（State / @State）

鸿蒙采用响应式编程，UI 与数据绑定。

示例：

@Entry
@Component
struct Counter {
  @State count: number = 0   // 定义状态变量

  build() {
    Column({ space: 20, alignItems: HorizontalAlign.Center }) {
      Text(`计数：${this.count}`)
        .fontSize(26)

      Button("增加")
        .onClick(() => {
          this.count += 1   // 修改状态 → UI 自动刷新
        })

      Button("减少")
        .onClick(() => {
          this.count -= 1
        })
    }
  }
}

✅ 点击按钮后，Text 会自动刷新显示 count 的新值。

3.5 实操：实现一个登录界面

下面我们做一个小 Demo：

包含用户名和密码输入框
一个“登录”按钮
点击后显示提示文字

代码：`index.ets`

@Entry
@Component
struct LoginPage {
  @State username: string = ""
  @State password: string = ""
  @State message: string = ""

  build() {
    Column({ space: 20, alignItems: HorizontalAlign.Center }) {
      Text("用户登录")
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 30 })

      TextInput({ placeholder: "请输入用户名" })
        .width(250)
        .onChange((value: string) => {
          this.username = value
        })

      TextInput({ placeholder: "请输入密码", textInputType: TextInputType.Password })
        .width(250)
        .onChange((value: string) => {
          this.password = value
        })

      Button("登录")
        .onClick(() => {
          if (this.username === "admin" && this.password === "123456") {
            this.message = "登录成功 ✅"
          } else {
            this.message = "用户名或密码错误 ❌"
          }
        })
        .backgroundColor("#007DFF")
        .fontColor(Color.White)
        .width(250)
        .height(40)

      if (this.message !== "") {
        Text(this.message)
          .fontSize(18)
          .fontColor(Color.Red)
      }
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#F8F8F8")
  }
}

运行效果：

界面上显示输入框 + 登录按钮
输入用户名 admin 和密码 123456 → 提示 “登录成功 ✅”
否则提示 “用户名或密码错误 ❌”

✅ 到这里，你已经掌握了：

常用组件（Text、Button、Input、Image、Slider...）
布局容器（Column、Row、Flex、Stack）
事件绑定
状态管理（@State）
实战：一个可交互的登录界面

第3章 基础布局与组件