ArkUI 框架核心介绍

ArkUI 是鸿蒙 HarmonyOS 系统的声明式 UI 开发框架，旨在通过简洁自然的 UI 信息语法、丰富的 UI 动效以及实时界面预览工具，帮助开发者提升应用界面开发效率。其核心在于使用基于 TypeScript 扩展的声明式 UI 语法规范（ArkTS），让开发者能够以更接近自然语义的方式描述 UI 结构、状态和交互逻辑。

核心优势与特点

特点 描述
声明式开发范式 摒弃了传统的命令式编程思维，开发者只需声明UI的最终状态，框架负责处理状态到界面的映射和更新，简化了代码逻辑。
统一开发语言 (ArkTS) 基于 TypeScript，提供了静态类型检查和更现代的编程特性，同时扩展了声明式UI语法，实现了UI描述、状态管理和逻辑表达的统一。
高性能渲染 采用高效的渲染管线，支持局部更新、异步渲染等机制，确保复杂界面也能流畅运行。
多设备适配 提供了丰富的布局组件和自适应能力，如 GridRow 栅格布局，能够便捷地实现应用在不同屏幕尺寸和设备上的适配。
丰富的组件与API 提供了从基础布局、展示、交互到多媒体、动画等覆盖全场景的 UI 组件和系统能力接口。

ArkUI 核心开发概念与用法

1. 组件 (Component)

组件是 ArkUI 构建界面的基本单元，分为容器组件和普通组件。容器组件用于定义布局结构，如 Column（纵向）、Row（横向）、Stack（堆叠）、Tabs（页签）等；普通组件则是具体的功能单元，如 Text、Button、Image、Video 等。

基础组件使用示例：

// 这是一个简单的 ArkTS 组件示例
@Component
struct MyComponent {
  // 定义组件内部状态
  @State count: number = 0

  build() {
    // Column 是一个纵向排列的容器组件
    Column({ space: 10 }) {
      // Text 是一个文本显示组件
      Text(`点击次数：${this.count}`)
        .fontSize(20)
        .fontColor(Color.Blue)
      // Button 是一个按钮组件
      Button('点击我')
        .onClick(() => {
          // 点击事件触发状态变更，UI自动更新
          this.count++
        })
        .borderRadius(10) // 设置边框圆角
        .backgroundColor(Color.Orange)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

代码展示了声明式UI的基本结构：使用 @Component 装饰器定义一个组件，在 build() 方法中通过嵌套的组件声明来描述UI树。@State 装饰的变量是响应式状态，其变化会触发UI的重新渲染。

2. 通用属性与方法

ArkUI 为组件提供了丰富的通用属性，用于设置样式、布局和事件。例如，边框、背景、尺寸、边距等。

边框与样式设置示例：

Text('带边框的文本')
  .fontSize(24)
  .border({ // 设置边框
    width: { // 边框宽度
      top: 2,
      right: 2,
      bottom: 2,
      left: 2
    },
    color: Color.Red, // 边框颜色
    style: BorderStyle.Solid, // 边框样式：实线
    radius: { // 边框圆角
      topLeft: 10,
      topRight: 10,
      bottomLeft: 10,
      bottomRight: 10
    }
  })
  .padding(10) // 内边距
  .margin({ top: 20 }) // 外边距
  .backgroundColor(Color.Yellow) // 背景色

border 是一个复合属性，可以一次性设置边框的宽度、颜色、样式和圆角。BorderStyle 枚举提供了 Solid（实线）、Dashed（虚线）等多种样式。

3. 布局与适配

ArkUI 提供了强大的布局组件来应对多设备适配的挑战。

栅格布局 (GridRow) 示例：

// GridRow 是用于响应式栅格布局的容器组件
GridRow({
  // 定义不同断点下的列数
  columns: { sm: 4, md: 8, lg: 12 },
  gutter: { x: 12, y: 12 } // 定义栅格间隔
}) {
  // GridCol 是栅格子组件，span 属性定义占据的列数
  GridCol({ span: { sm: 4, md: 4, lg: 6 } }) {
    Text('区块1').height(100).backgroundColor(Color.Gray)
  }
  GridCol({ span: { sm: 4, md: 4, lg: 6 } }) {
    Text('区块2').height(100).backgroundColor(Color.LightGray)
  }
}
.width('100%')

GridRow 和 GridCol 组件结合，可以轻松创建响应式布局。通过配置不同断点（如 sm, md, lg）下的列数和子项跨度，UI 能够自动适应不同尺寸的屏幕。

分割线布局 (ColumnSplit) 示例：

// ColumnSplit 用于在纵向布局中插入可拖拽的分割线
ColumnSplit() {
  // 分割线上方的组件
  Text('上方区域')
    .height('50%')
    .backgroundColor(Color.Blue)
  // 分割线下方的组件
  Text('下方区域')
    .height('50%')
    .backgroundColor(Color.Green)
}
.resizable(true) // 允许拖拽调整分割线位置
.width('100%')
.height(300)

ColumnSplit 组件常用于实现可调整大小的面板布局，如设置页面或文件管理器。

4. 多媒体与高级交互

ArkUI 集成了多媒体组件和复杂交互组件，以满足丰富的应用场景。

视频播放 (Video) 示例：

// 首先需要导入 video 模块
import media from '@ohos.multimedia.media';

// 创建视频控制器
private controller: media.VideoController = new media.VideoController();

build() {
  Column() {
    // Video 组件用于播放视频
    Video({
      src: $rawfile('sample.mp4'), // 视频资源路径
      controller: this.controller // 绑定控制器
    })
      .width('100%')
      .height(300)
      .autoPlay(false) // 不自动播放
      .controls(true) // 显示控制条

    Row({ space: 20 }) {
      Button('播放').onClick(() => {
        this.controller.start(); // 控制器控制播放
      })
      Button('暂停').onClick(() => {
        this.controller.pause();
      })
    }.margin({ top: 10 })
  }
}

Video 组件提供了基础的视频播放能力，通过 VideoController 可以实现播放、暂停、跳转等控制。需要注意，视频播放通常需要相应的权限声明。

可排序网格 (GridObjectSortComponent) 示例：

// 此组件用于实现网格项目的拖拽排序、新增和删除
@Entry
@Component
struct SortExample {
  // 定义数据源
  @State itemList: Array<string> = ['Item A', 'Item B', 'Item C', 'Item D'];

  build() {
    Column() {
      GridObjectSortComponent({ itemList: this.itemList }) {
        // 使用 ForEach 循环渲染每个网格项
        ForEach(this.itemList, (item: string) => {
          GridItem() {
            Text(item)
              .padding(20)
              .borderRadius(10)
              .backgroundColor(Color.White)
              .shadow({ radius: 5 })
          }
        }, (item: string) => item)
      }
      .onMove((from: number, to: number) => {
        // 监听移动事件，更新数据顺序
        let temp = this.itemList[from];
        this.itemList.splice(from, 1);
        this.itemList.splice(to, 0, temp);
      })
      .columnsTemplate('1fr 1fr') // 定义网格为两列
      .rowsGap(20)
      .columnsGap(20)
      .padding(20)
    }
  }
}

GridObjectSortComponent 是一个高级交互组件，它封装了拖拽排序的复杂逻辑，开发者只需关注数据源的更新，极大简化了此类功能的实现。

5. 动画

ArkUI 提供了丰富的动画 API，支持属性动画、显式动画、转场动画等。

属性动画示例：

@State rotateAngle: number = 0;

build() {
  Column() {
    // 使用 .animation 修饰符为属性变化添加动画
    Image($r('app.media.icon'))
      .width(100)
      .height(100)
      .rotate({ angle: this.rotateAngle })
      .animation({ // 配置动画参数
        duration: 1000, // 动画时长 1000ms
        curve: Curve.EaseOut, // 缓动曲线
        iterations: -1, // 无限循环 (-1)
        playMode: PlayMode.Alternate // 交替播放
      })
  }
  .onClick(() => {
    // 点击时改变角度，触发旋转动画
    this.rotateAngle = 360;
  })
}

通过 .animation() 方法，可以轻松地为组件的样式属性变化添加平滑的动画效果，Curve 枚举定义了多种缓动函数以模拟自然运动。

总结

ArkUI 框架通过声明式语法、统一的 ArkTS 语言、丰富的组件生态和强大的布局与动画能力，为鸿蒙应用开发提供了高效、高性能的解决方案。从简单的文本按钮到复杂的可拖拽网格和视频播放，开发者都能找到对应的组件和 API 来实现。其设计理念旨在降低 UI 开发复杂度，让开发者能更专注于业务逻辑和创新体验。

参考来源

 

# harmonyos # 华为 # 架构
Logo
HarmonyOS开发者社区

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

更多推荐

cover

莘莘学子，学习鸿蒙，致力自主系统开发

avatar HarmonyOS开发者社区
cover

鸿蒙三方库 | harmony-utils之NetworkUtil默认网络与绑定网络详解

avatar HarmonyOS开发者社区
cover

HarmonyOS新特性-沉浸光感在叠叠消小游戏中的落地实践

avatar HarmonyOS开发者社区