鸿蒙 ArkTS 学习入门

前言

ArkTS 作为鸿蒙应用开发的核心语言，基于 TypeScript 扩展，采用声明式 UI 开发范式，语法简洁、渲染高效，是零基础入门鸿蒙开发的最优选择。

本文循序渐进讲解 ArkTS 核心语法、基础布局、核心展示组件与交互式组件，覆盖从页面搭建到简单交互的全流程，适配鸿蒙开发新手快速上手。

开发环境：DevEco Studio，API 10 及以上

前置要求：具备基础编程思维即可

一、ArkTS 基础页面结构

ArkTS 页面有固定的标准结构，由装饰器、自定义组件、build 渲染函数三部分构成，这是所有鸿蒙页面的基础模板。

核心装饰器说明：

@Entry：标记页面入口组件，一个页面仅能使用一次
@Component：标记自定义组件，所有 UI 模块都需要该装饰器

基础页面模板

typescript 复制代码

import { Column, Text, Color, FlexAlign, FontWeight } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("Hello ArkTS")
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

二、核心语法规范

所有 UI 组件必须编写在 build 函数内部，遵循父子组件嵌套规则
组件样式采用链式调用，直接通过。属性名配置样式
命名规范：组件名大驼峰，变量名小驼峰
响应式数据驱动 UI 更新，数据变化自动刷新页面

三、基础布局组件

布局组件是页面的骨架，用于排列子组件，无交互功能，仅负责 UI 排版，入门核心掌握两种基础布局。

Column 垂直布局

子组件从上至下依次排列，作为页面根容器最常用

typescript 复制代码

Column() {
  Text("垂直布局1")
  Text("垂直布局2")
}
.space(15)
.padding(20)

Row 水平布局

子组件从左至右依次排列，适配横向内容展示

typescript 复制代码

Row() {
  Text("水平布局左")
  Text("水平布局右")
}
.space(30)
.justifyContent(FlexAlign.Center)

通用布局属性

width/height：设置组件宽高，支持百分比和固定数值

padding：组件内边距，控制内部留白

margin：组件外边距，控制组件间距

space：子组件之间的统一间距

四、基础展示组件

Text 文本组件是最核心的静态展示组件，用于页面所有文字内容的展示，支持丰富的样式配置。

typescript 复制代码

Text("ArkTS基础学习")
  .fontSize(22)
  .fontColor(Color.Blue)
  .fontWeight(FontWeight.Bold)
  .textAlign(TextAlign.Center)

五、响应式状态管理 @State

@State 是 ArkTS 最基础的状态装饰器，用于定义组件内部可变数据，数据变更自动触发 UI 刷新，是实现交互的核心基础。

typescript 复制代码

@Entry
@Component
struct StateDemo {
  @State msg: string = "初始文本"

  build() {
    Column() {
      Text(this.msg)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

六、核心交互式组件

交互式组件支持响应用户操作，是实现页面功能的核心，本文重点讲解输入框与按钮两大基础交互组件。

TextInput 输入框组件

用于接收用户文本输入，支持占位符、输入监听，搭配 @State 实现数据双向同步

typescript 复制代码

@Entry
@Component
struct InputDemo {
  @State inputText: string = ""

  build() {
    Column() {
      TextInput({ placeholder: "请输入内容" })
        .width('90%')
        .height(50)
        .borderRadius(8)
        .backgroundColor('#F5F5F5')
        .onChange(value => {
          this.inputText = value
        })

      Text("输入内容：" + this.inputText)
        .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .space(20)
  }
}

Button 按钮组件

用于触发用户点击操作，搭配 onClick 事件实现业务逻辑，是页面交互的核心入口

typescript 复制代码

@Entry
@Component
struct ButtonDemo {
  @State num: number = 0

  build() {
    Column() {
      Button("点击计数：" + this.num)
        .width('80%')
        .height(50)
        .backgroundColor(Color.Green)
        .borderRadius(25)
        .onClick(() => {
          this.num++
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

七、综合实战案例

整合布局、状态、输入框与按钮，实现完整的用户输入交互页面，包含输入校验与结果反馈

typescript 复制代码

import { Column, Text, TextInput, Button, Color, FlexAlign, FontWeight } from '@kit.ArkUI';

@Entry
@Component
struct ArkTSDemo {
  @State username: string = ""
  @State showText: string = ""

  build() {
    Column() {
      Text("ArkTS交互实战")
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 40 })

      TextInput({ placeholder: "请输入用户名" })
        .width('90%')
        .height(50)
        .borderRadius(8)
        .backgroundColor('#F5F5F5')
        .onChange(value => {
          this.username = value
        })

      Button("确认提交")
        .width('90%')
        .height(50)
        .backgroundColor(Color.Blue)
        .margin({ top: 30 })
        .onClick(() => {
          if (this.username.trim() === "") {
            this.showText = "用户名不能为空"
          } else {
            this.showText = "欢迎你，" + this.username
          }
        })

      Text(this.showText)
        .fontSize(18)
        .margin({ top: 40 })
        .fontColor(this.username.trim() ? Color.Green : Color.Red)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding(20)
  }
}

八、学习总结

本文全面覆盖 ArkTS 入门核心知识点，从基础页面结构、布局组件，到响应式状态管理，再到输入框、按钮等交互式组件，形成完整的入门知识体系。

核心掌握内容：

ArkTS 标准页面结构与基础语法规范
Column、Row 两种核心基础布局的使用
Text 文本组件样式配置与 @State 响应式状态
TextInput 输入监听与 Button 点击事件
组合组件实现完整的用户交互功能

掌握以上内容，即可完成鸿蒙基础页面开发，为后续复杂组件、高级布局与业务功能开发打下坚实基础。