一、ArkTS 核心语法速通

1. 基础数据类型与语法规范

ArkTS 基于 TypeScript 扩展，保留了 TS 的强类型特性，同时新增了鸿蒙应用专属的语法糖。核心数据类型包括：

• 基本类型：string、number、boolean、undefined、null
• 复杂类型：Array、Object、enum（枚举）、Tuple（元组）
• 鸿蒙专属：Resource（资源引用，如 $r ('app.string.title')）

语法规范要点：

• 组件定义使用@Component装饰器，页面入口必须包含build()方法
• 语句结尾可省略分号，推荐遵循鸿蒙官方代码规范
• 变量声明优先使用let（可变）和const（不可变），避免var

2. 组件生命周期与状态管理

（1）核心生命周期

• aboutToAppear()：组件即将渲染时调用（初始化数据、绑定事件）
• aboutToDisappear()：组件即将销毁时调用（释放资源、取消订阅）

（2）基础状态管理 @State

@State是组件内部状态管理的核心装饰器，用于声明响应式变量 —— 当变量值改变时，依赖该变量的 UI 会自动刷新。示例：

typescript

运行

@State userName: string = "张三"; // 响应式状态变量
@State isShow: boolean = true;

build() {
  Button("修改姓名")
    .onClick(() => {
      this.userName = "李四"; // 状态改变，UI自动更新
      this.isShow = !this.isShow;
    })
}

二、常用 UI 组件与布局实战

鸿蒙提供了丰富的原生 UI 组件，初级开发者需优先掌握高频组件的使用场景与属性配置：

1. 核心组件详解

组件名	作用	核心属性
Text	文本展示	fontSize、fontColor、fontWeight、maxLines
Button	按钮交互	type（默认 / 胶囊 / 圆形）、onClick（点击事件）、backgroundColor
Image	图片加载	src（本地 / 网络地址）、objectFit（适配模式）、width/height
List	列表展示	listDirection（排列方向）、itemBuilder（列表项构造）

2. 布局核心：Flex、Column 与 Row

鸿蒙布局采用 Flex 弹性布局为核心，搭配 Column（垂直排列）和 Row（水平排列）实现组件嵌套。关键属性：

• justifyContent：主轴对齐方式（FlexAlign.Start/Center/End/SpaceBetween）
• alignItems：交叉轴对齐方式（ItemAlign.Start/Center/End）
• padding/margin：内边距 / 外边距（支持数字、数组形式，如 padding: 20 或 padding: [10,20]）

三、实战：实现个人信息展示页

1. 需求说明

开发一个包含 “头像、姓名、性别、年龄、编辑按钮” 的个人信息页，要求：

• 垂直排列组件，居中对齐
• 头像圆形显示，点击按钮可切换姓名
• 适配不同屏幕尺寸

2. 完整代码示例

typescript

运行

// 导入鸿蒙核心组件
import router from '@ohos.router';
import { FlexAlign, ItemAlign } from '@ohos/ui';

@Component
export struct ProfilePage {
  // 响应式状态变量
  @State userName: string = "陈小明";
  @State userInfo: { gender: string; age: number } = { gender: "男", age: 25 };
  @State avatarUrl: string = $r('app.media.avatar'); // 本地资源（需在media目录放置图片）

  // 组件即将渲染时初始化
  aboutToAppear() {
    console.log("页面即将展示");
  }

  build() {
    // 垂直布局容器，占满全屏
    Column({ space: 30, alignItems: ItemAlign.Center })
      .width('100%')
      .height('100%')
      .padding(50)
      .backgroundColor('#f5f5f5') {

      // 圆形头像
      Image(this.avatarUrl)
        .width(150)
        .height(150)
        .borderRadius(75) // 圆角=宽度一半实现圆形
        .objectFit(ImageFit.Cover)
        .border({ width: 4, color: '#4a6cf7' })

      // 姓名文本
      Text(`姓名：${this.userName}`)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .fontColor('#333333')

      // 性别与年龄（水平排列）
      Row({ space: 60 }) {
        Text(`性别：${this.userInfo.gender}`)
          .fontSize(22)
          .fontColor('#666666')
        Text(`年龄：${this.userInfo.age}`)
          .fontSize(22)
          .fontColor('#666666')
      }

      // 编辑按钮（胶囊样式）
      Button("修改姓名")
        .type(ButtonType.Capsule)
        .width(200)
        .height(50)
        .fontSize(20)
        .backgroundColor('#4a6cf7')
        .onClick(() => {
          // 点击修改姓名，状态更新触发UI刷新
          this.userName = this.userName === "陈小明" ? "陈小华" : "陈小明";
        })
    }
  }

  // 组件销毁时释放资源
  aboutToDisappear() {
    console.log("页面即将销毁");
  }
}

3. 代码说明

• 资源引用：$r('app.media.avatar')对应main_pages.json同级的media目录下的图片资源，需手动放置图片并命名为avatar
• 布局适配：使用width('100%')和padding实现自适应，避免固定像素导致的屏幕适配问题
• 状态响应：点击按钮修改userName，Text 组件会自动刷新显示新姓名，无需手动操作 DOM

[加入班级，一起学习鸿蒙应用开发]