各位同学们好呀！上一篇搞定了开发环境和 Hello World，这篇直接冲核心 ——ArkTS 语法！这可是 HarmonyOS 5.0 + 声明式开发的基石，更是开发者认证中占比 15% 的重点内容，不管是做项目还是备考试，都得吃透～ 今天从基础语法到实战案例，手把手教你掌握组件、布局、数据绑定，全程实操无废话，跟着练就能上手！

一、ArkTS 基础语法体系（认证高频考点，必背！）

1. 核心装饰器用法（5 分考点，直接背代码！）

装饰器是 ArkTS 的灵魂，认证常考 @Entry、@Component、@State、@Link、@Watch 的用法和区别，直接上实战代码，抄一遍就懂：

// 装饰器实战示例（可直接运行）
@Entry // 标记为页面入口，整个应用的启动页
@Component // 声明为可复用组件，每个页面/模块都要加
struct StateDemo {
    @State count: number = 0 // 局部状态：组件内生效，数据变UI自动更
    @Watch('onCountChange') countWatch: number = 0 // 状态监听：值变化时触发回调
    
    // 监听回调函数（认证考点：参数必须包含旧值和新值）
    onCountChange(oldVal: number, newVal: number) {
        console.log(`计数从${oldVal}变为${newVal}`) // 日志打印，调试用
    }
    
    build() { // 构建UI的核心方法，所有组件都写在这里
        Button(`点击计数：${this.count}`)
            .onClick(() => {
                this.count++ // 点击修改状态，UI自动刷新
                this.countWatch = this.count // 同步触发监听
            })
            .margin(20)
            .fontSize(18)
    }
}

�� 认证考点：@Entry 和 @Component 必须成对出现，@State 是单向绑定，@Watch 的回调参数格式不能错！

2. 数据类型与资源引用（实战必备）

  • 支持 TypeScript 基础类型（number、string、boolean 等）
  • 新增鸿蒙专属类型：Resource（资源引用）、Dimension（尺寸单位）
  • 表达式支持三元运算、函数调用，直接嵌在 UI 属性里：
Text(`当前状态：${this.count > 5 ? '已超过5次' : '未超过5次'}`)
    .fontColor($r("app.color.primary_color"))
    .fontSize($r("app.float.font_size"))

�� 最佳实践：所有颜色、尺寸、文字都放在 element 目录，用 $r ("app.xxx.xxx") 引用，适配多设备还方便修改！

3. 生命周期方法（认证考执行顺序）

组件的生命周期就 3 个关键方法，记住执行顺序：aboutToAppear () → build () → aboutToDisappear ()

// 生命周期实战示例
@Component
struct LifeCycleDemo {
  aboutToAppear() {
    // 组件即将渲染时执行（初始化数据、请求接口）
    console.log("组件准备渲染啦")
  }

  build() {
    Text("生命周期演示")
  }

  aboutToDisappear() {
    // 组件即将销毁时执行（释放资源、取消请求）
    console.log("组件要销毁啦")
  }
}

�� 认证考点：aboutToAppear () 不能写异步操作（比如 setTimeout），会导致 UI 渲染异常！

二、声明式 UI 核心组件（全场景适配，直接抄）

1. 基础组件实战（Text/Button/Image/TextInput）

基础组件是所有页面的基石，掌握属性链式调用，代码简洁又好维护：

// 基础组件组合实战（用户信息卡片）
@Component
struct UserCard {
  build() {
    Row({ space: 15 }) { // 水平布局，子组件间距15
      // 图片组件：引用media目录下的图片
      Image($r("app.media.avatar"))
        .width(60)
        .height(60)
        .borderRadius(30) // 圆形图片

      // 文本组件：多行文字排列
      Column({ space: 5 }) {
        Text("鸿蒙开发者")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
        Text("专注ArkTS开发")
          .fontSize(14)
          .fontColor($r("app.color.gray_color"))
      }

      // 按钮组件：带图标的按钮
      Button("关注")
        .type(ButtonType.Capsule) // 胶囊样式
        .width(80)
        .height(35)
        .fontSize(14)
        .backgroundColor($r("app.color.primary_color"))
    }
    .padding(15)
    .width('100%')
  }
}

�� 避坑点：Image 组件的图片必须放在 resources/media 目录，引用时用 $r ("app.media. 图片名")，别写错路径！

2. 容器组件布局（自适应多设备）

布局是认证的 4 分考点，重点掌握 Column、Row、Flex、Grid、List，直接上实战代码（支持手机 / 平板 / 车机自适应）：

// 复杂布局实战（首页框架，可直接复用）
@Component
struct LayoutDemo {
  build() {
    // 垂直布局：整个页面的外层容器
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
      // 网格布局：顶部导航栏（3列等分）
      Grid() {
        GridItem() { Text("首页").fontSize(16).textAlign(TextAlign.Center) }
        GridItem() { Text("分类").fontSize(16).textAlign(TextAlign.Center) }
        GridItem() { Text("我的").fontSize(16).textAlign(TextAlign.Center) }
      }
      .columnsTemplate("1fr 1fr 1fr") // 3列等分，自适应屏幕宽度
      .width('100%')
      .height(80)
      .backgroundColor($r("app.color.bg_color"))

      // 列表布局：内容展示区
      List() {
        ListItem() { Text("鸿蒙开发实战教程").padding(15).fontSize(16) }
        ListItem() { Text("开发者认证备考指南").padding(15).fontSize(16) }
        ListItem() { Text("多设备适配技巧").padding(15).fontSize(16) }
      }
      .width('100%')
      .height(200)
      .marginTop(10)
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r("app.color.page_bg_color"))
  }
}

�� 认证考点：Flex 的 direction 和 justifyContent 属性，Grid 的 columnsTemplate 用法，List 的自适应高度配置！

三、数据绑定与状态管理（实战核心，6 分考点）

1. 单向绑定与双向绑定

  • 单向绑定：@State → 组件内生效，父传子可直接用
  • 双向绑定：@Link → 父子组件数据同步，子组件改父组件也变
// 双向绑定实战（父组件+子组件）

@Entry

@Component

struct LinkDemo {

  @State parentCount: number = 0 // 父组件状态

  build() {

    Column({ space: 20 }) {

      Text(`父组件计数：${this.parentCount}`).fontSize(18)

      // 子组件：用@Link接收父组件状态，双向绑定

      ChildComponent(count: $parentCount)

      Button("父组件修改计数")

        .onClick(() => this.parentCount++)

    }

    .margin(20)

  }

}

// 子组件

@Component

struct ChildComponent {

  @Link count: number // 接收父组件的双向绑定状态

  build() {

    Button(`子组件修改计数：${this.count}`)

      .onClick(() => this.count++) // 子组件修改，父组件同步变化

  }

}

2. 跨层级数据共享（@Provide/@Consume）

当组件嵌套多层时，用 @Provide/@Consume 实现跨层级数据共享，不用层层传递：

// 跨组件数据共享示例（可直接运行）

@Entry

@Component

struct ShareStateDemo {

  @Provide themeColor: string = "#FF007DFF" // 顶层提供数据，所有子组件可消费

  build() {

    Column({ space: 20 }) {

      ChildComponent() // 子组件，无需传参

      GrandChildComponent() // 孙组件，无需传参

      Button("切换主题色")

        .onClick(() => {

          // 切换颜色，所有消费的组件自动刷新

          this.themeColor = this.themeColor === "#FF007DFF" ? "#FF7A00" : "#FF007DFF"

        })

    }

    .margin(20)

  }

}

// 子组件

@Component

struct ChildComponent {

  build() {

    Column() {

      Text("子组件展示主题色")

        .fontColor($r("app.color.primary_color"))

    }

  }

}

// 孙组件（跨层级消费数据）

@Component

struct GrandChildComponent {

  @Consume themeColor: string // 直接消费顶层数据，无需中间传递

  build() {

    Text("孙组件展示主题色")

      .fontColor(this.themeColor)

      .fontSize(18)

      .fontWeight(FontWeight.Bold)

  }

}

�� 认证考点：@Provide 和 @Consume 必须同名，不能跨 Ability 共享，只能在同一组件树内使用！

3. 长列表性能优化（LazyForEach，3 分考点）

当列表数据超过 100 条时，必须用 LazyForEach 实现懒加载，否则会卡顿，认证必考：

// 长列表懒加载实战（1000条数据不卡顿）

@Entry

@Component

struct LazyListDemo {

  // 模拟1000条数据（实际开发从接口获取）

  private dataList: number[] = Array.from({ length: 1000 }, (_, i) => i + 1)

  build() {

    List() {

      // LazyForEach：懒加载核心，只渲染可视区域的组件

      LazyForEach(

        this.dataList, // 数据源（必须是可迭代对象）

        (item) => { // 渲染每一项的组件

          ListItem() {

            Text(`列表项：${item}`)

              .padding(15)

              .width('100%')

          }

        },

        (item) => item.toString() // 唯一标识（必须写，否则会错乱）

      )

    }

    .width('100%')

    .height('100%')

  }

}

�� 避坑点：LazyForEach 的第三个参数（唯一标识）不能少，否则列表滑动时会出现数据错乱！

四、实战案例：用户登录页面（完整可运行代码）

学完基础语法，直接上实战项目 —— 用户登录页面，包含输入框、按钮、加载状态，可直接集成到项目中：

// entry/src/main/ets/pages/LoginPage.ets（完整路径，直接创建运行）

@Entry

@Component

struct LoginPage {

  @State username: string = "" // 用户名输入状态

  @State password: string = "" // 密码输入状态

  @State isLoginLoading: boolean = false // 登录加载状态

  build() {

    Column() {

      // 应用Logo

      Image($r("app.media.logo")) // 需在media目录放logo图片

        .width(120)

        .height(120)

        .margin({ top: 100, bottom: 50 })

        .layoutAlignment(Alignment.Center)

      // 用户名输入框

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

        .value(this.username) // 绑定状态

        .onChange((val) => this.username = val) // 输入变化时更新状态

        .width('80%')

        .margin({ bottom: 20 })

        .padding(15)

        .backgroundColor($r("app.color.bg_color"))

        .borderRadius(8)

        .fontSize(16)

      // 密码输入框（隐藏输入内容）

      TextInput({

        placeholder: "请输入密码",

        type: InputType.Password // 密码类型，输入时隐藏

      })

        .value(this.password)

        .onChange((val) => this.password = val)

        .width('80%')

        .margin({ bottom: 30 })

        .padding(15)

        .backgroundColor($r("app.color.bg_color"))

        .borderRadius(8)

        .fontSize(16)

      // 登录按钮（带加载状态）

      Button(this.isLoginLoading ? "登录中..." : "登录")

        .width('80%')

        .height(48)

        .fontSize(18)

        .backgroundColor($r("app.color.primary_color"))

        .borderRadius(8)

        .onClick(() => {

          this.isLoginLoading = true // 点击开始加载

          // 模拟登录请求（实际开发替换为真实接口）

          setTimeout(() => {

            this.isLoginLoading = false // 加载结束

            if (this.username && this.password) {

              console.log("登录成功，跳转到首页")

              // 登录成功后跳转（后续讲路由时详细说）

            } else {

              console.log("请完善用户名或密码")

            }

          }, 1500) // 模拟1.5秒接口请求时间

        })

    }

    .width('100%')

    .height('100%')

    .backgroundColor($r("app.color.page_bg_color"))

  }

}

配套资源配置（别漏了！直接复制）

  1. 颜色配置（resources/element/color.json）
{

  "color": [

    {

      "name": "primary_color",

      "value": "#FF007DFF" // 鸿蒙蓝，主色调

    },

    {

      "name": "bg_color",

      "value": "#F5F5F5" // 输入框、卡片背景色

    },

    {

      "name": "page_bg_color",

      "value": "#EEEEEE" // 页面整体背景色

    },

    {

      "name": "gray_color",

      "value": "#999999" // 辅助文字颜色

    }

  ]

}

2.尺寸配置（resources/element/float.json）

{

  "float": [

    {

      "name": "font_size",

      "value": "18vp" // 常用字体大小

    },

    {

      "name": "margin_size",

      "value": "20vp" // 常用边距

    }

  ]

}

五、认证考点总结 + 学习建议（冲证必看！）

1. 认证考点分值分布（直接记，备考不迷路）

  • 装饰器用法：5 分（@Entry/@Component/@State/@Link/@Watch）
  • 声明式 UI 布局：4 分（Flex/Grid/List 的属性配置）
  • 状态管理：6 分（单向绑定、双向绑定、跨组件共享）
  • 性能优化：3 分（LazyForEach 懒加载）

2. 学习建议（少走弯路！）

  1. 别光看不动手！每个代码示例都要亲手敲一遍，运行看效果，DevEco Studio 的 Preview 窗口能实时预览，不用反复跑模拟器；
  2. 重点练状态管理：@State、@Link、@Provide/@Consume 的区别，用不同场景练（比如计数器、表单、主题切换）；
  3. 做性能优化练习：用 LazyForEach 实现 1000 条数据的长列表，对比普通 List 和 LazyForEach 的性能差异；
  4. 遇到问题先查日志：用 console.log 打印状态，在 Logcat 窗口找问题，比瞎猜高效多了！
  5. 欢迎各位同学加入班级：https://developer.huawei.com/consumer/cn/training/classDetail/6b5617ffd9264d6daa2f3d9250204f1e?type=1%3Fha_source%3Dhmosclass&ha_sourceId=89000248，进行系统性学习。

最后说两句

ArkTS 语法看着多，其实核心就围绕 “组件 + 状态 + 布局”，多写两个页面就能熟练。现在鸿蒙生态正在快速发展，掌握 ArkTS 就是抢占红利，不管是求职还是副业，都是加分项～ 下一篇我们继续学习相关知识，点点关注不迷路~

# harmonyos # ui # 华为
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

HarmonyOS6半年磨一剑 - RcButton组件交互逻辑与事件处理机制

avatar HarmonyOS开发者社区
cover

HarmonyOS与Android开发对比：迁移挑战、实践策略与未来机遇

avatar HarmonyOS开发者社区

HarmonyOS 6.0+ APP智能种植监测系统开发实战：农业传感器联动与AI种植指导落地

本文基于HarmonyOS 6.0+开发智能种植监测系统，针对传统农业种植中精准管理缺失问题，提出分布式解决方案。系统采用AgricultureKit快速接入农业传感器，支持Modbus-RTU/LoRaWAN/NB-IoT多协议通信，结合端侧AI作物生长模型实现实时环境监测与种植指导。开发过程中重点优化了传感器数据采集、离线AI计算和多设备协同功能，并通过分片存储、数据压缩和动态采集频率实现低功

avatar HarmonyOS开发者社区