【ArkUI】| 构建高效应用的框架

狮子也疯狂

2222人浏览 · 2025-10-13 15:51:49

狮子也疯狂 · 2025-10-13 15:51:49 发布

🦁 一. 写在前面

为什么ArkUI是鸿蒙生态的开发利器？
在万物互联时代，开发者面临的最大挑战之一就是多端适配。智能手机、平板、智慧屏、车机、可穿戴设备等不同设备各有不同的屏幕尺寸、输入方式和硬件能力。传统的多端单独开发方式不仅耗时耗力，还难以保证体验的一致性。
华为鸿蒙提出的 ArkUI 框架，正是为了解决这一痛点。它是一套构建分布式应用界面的声明式UI开发框架，使用简洁的 UI 信息语法、丰富的 UI 组件、以及实时界面预览工具，帮助开发者提升 HarmonyOS 应用界面开发效率。只需使用一套 ArkTS API，就能在多个 HarmonyOS 设备上提供生动而流畅的用户界面体验。
ArkUI 的核心理念可以概括为三点：一次开发，多端运行；状态驱动，声明式编程；自适应布局与分布式能力的完美结合。这意味着开发者写一次代码，UI 就能自动适配不同设备，逻辑通过分布式软总线实现多端交互。
与传统的命令式UI开发相比，ArkUI的声明式开发范式让开发者只需描述"界面应该是什么样"，而无需关心"如何实现渲染"。举个例子，要创建一个显示"Hello ArkUI"的文本和一个点击按钮，命令式开发可能需要50行以上代码（包括findViewById、setOnClickListener等），而ArkUI只需不到20行代码就能完成。
接下来狮子哥将通过对比来展示ArkUI的强大。

🦁 二. 声明式UI vs 命令式UI

传统命令式UI开发（如Android的XML+Java）需要开发者手动操作界面元素的创建、更新和销毁，代码与界面逻辑高度耦合。
而ArkUI的声明式开发范式，让开发者只需描述界面的最终呈现效果，而不是一步步详细规定每个操作。举个简单例子，当我们想要实现一个计数器功能时，两种方式的差异非常明显：

在命令式UI中，实现计数器功能需要获取组件引用、设置监听器、手动更新UI等繁琐步骤。而在ArkUI中，只需以下简洁代码

@Entry
@Component
struct Counter {
  @State count: number = 0; // 状态变量
  
  build() {
    Column() {
      Text(`Count: ${this.count}`) // 文本显示，自动绑定数据
        .margin(10)
      Button('Increment')
        .onClick(() => {
          this.count++; // 点击时修改状态
        })
    }
  }
}

当点击按钮修改count值时，Text组件会自动更新显示，无需手动操作UI元素。这种数据驱动UI的模式，保证了界面与数据的一致性，大大简化了开发流程。

🦁 三. 一套代码，多端部署

ArkUI通过"断点系统+原子化布局"实现跨设备适配，开发者无需为不同屏幕尺寸编写多套代码。断点系统根据屏幕宽度自动切换布局（如手机<720px用2列布局，平板≥720px用3列布局）。原子化布局采用12列栅格系统+弹性布局，确保组件尺寸随屏幕自适应。比如，在设计稿上，竖屏手机的宽度是“360vp”，折叠屏的宽度是“600vp”。那么，在布局组件的宽度设置上，不要使用固定值“360vp”或“600vp”，而是用“100%”这种相对值。示例代码如下：


@Entry@Componentstruct 
Index {  
    build() {    
        Column({space:8}){ 
        // 根容器（本例使用垂直布局容器作为根容器）      
            Row() { // 水平布局容器        
                Text('鸿蒙开发ArkUI最佳实践')          
                    .fontSize(20)      
                    }      
                    .width('100%') // 相对于父级容器Column的宽度（占满）      
                    .padding(10)      
                    .backgroundColor('#FFFFFF')    
                    }.width('100%') // 相对于手机屏幕的宽度（占满）    
                    .height('100%') // 相对于手机屏幕的高度（占满）   
                    .padding({top:48,bottom:24,left:24,right:24}) // 屏幕内边距
                    .backgroundColor('#F1F3F5')  
                }
}

根容器“Column”的宽度和高度要占满整个手机屏幕，使用“100%”这个相对值实现。在根容器内部放了一个水平布局容器“Row”，相对于根容器“Column”的宽度也是“100%”。同时，因为根容器“Column”设置了屏幕内边距"padding",其中左边距和右边距都是“24vp”，所以，实际上“Row”容器的宽度在竖屏手机的值为“312vp”（360 - 24 -24 = 312），而在折叠屏的实际宽度为“552vp”（600 -24 -24 = 552）。效果如下图所示

在这里插入图片描述

另外，ArkUI还提供了丰富的布局容器组件，如Column（垂直布局）、Row（水平布局）、Flex（弹性布局）、Grid（网格布局）等，可以灵活应对各种布局需求。

🦁 四. 渲染引擎的底层优化

4.1 UI 更新机制升级

ArkUI在渲染性能方面做了大量优化。通过使用编译器生成特定函数的方式，将UI组件更新和数据变更进行细粒度地绑定，实现UI更新Diff算法从COMPONENT和ELEMENT树形结构对比升级为单节点NODE的函数式更新，大幅简化了声明式开发范式UI组件的树形结构，优化了UI组件布局渲染性能。

在这里插入图片描述

4.2 逻辑和 UI 分离

逻辑和 UI 分离通过利用数据双向绑定机制传递页面变化逻辑，将流转7个步骤简化为2个步骤。可将跨端迁移和协同的开发代码量降低40%以上。

在这里插入图片描述

4.3 Stage 模型

提供十几种不同场景的扩展服务 Extension 机制，在保证了应用后台进程合理运行的基础上，规避了应用进程之间无序拉起，达到保证前台资源供给，应用调度更加有序的目的。

在这里插入图片描述

4.4 高级UI组件扩展能力

提供了基于 XComponent 组件的 C++ 自绘制引擎接入（比如游戏引擎）能力，和基于 Web 组件的 HTML5/Web 的渲染能力。满足你在游戏、相机、地图、浏览器等复杂应用场景的开发诉求，降低了这类应用移植的门槛。

在这里插入图片描述

🦁 五. 优秀的ArkUI状态管理机制

通过状态装饰器实现数据与UI的绑定，当数据变化时，界面自动更新，无需手动操作。ArkUI提供了多种状态装饰器，每种都有其特定的使用场景：

@State 组件内部状态
@Link 父子组件双向绑定
@Provide/@Consume 跨组件数据共享
@Prop 从父组件单向同步

使用流程：

// 定义数据模型
class ShopItem {
  id: number
  name: string
  price: number
  count: number
}

@Entry
@Component
struct ShoppingCart {
  // 商品列表数据，@State装饰使其成为响应式状态
  @State shopItems: Array<ShopItem> = [
    { id: 1, name: '商品A', price: 199, count: 0 },
    { id: 2, name: '商品B', price: 299, count: 0 }
  ]
  
  // 计算总价，依赖的@State变化时会触发UI更新
  get totalPrice(): number {
    let total = 0
    this.shopItems.forEach(item => {
      total += item.price * item.count
    })
    return total
  }
  
  build() {
    Column({ space: 20 }) {
      Text('HarmonyOS购物车')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      
      // 列表渲染
      ForEach(this.shopItems, (item: ShopItem, index?: number) => {
        // 使用@Link建立与数组元素中count的双向绑定
        ProductComponent({ 
          name: item.name, 
          price: item.price, 
          count: $shopItems[index].count 
        })
      }, (item: ShopItem) => item.id.toString())
      
      // 底部总价栏
      Row() {
        Text(`总计：￥${this.totalPrice}`)
          .fontSize(22)
          .fontColor(Color.Red)
          .layoutWeight(1)
        
        Button('去结算')
          .width(120)
          .enabled(this.totalPrice > 0) // 总价大于0时才可点击
      }
    }
  }
}

@Component
struct ProductComponent {
  private name: string = ''
  private price: number = 0
  @Link count: number // 与父组件双向绑定
  
  build() {
    Row() {
      Column() {
        Text(this.name).fontSize(20)
        Text(`￥${this.price}`).fontColor(Color.Red)
      }
      .layoutWeight(1)
      
      Button('-')
        .width(40)
        .onClick(() => { if (this.count > 0) this.count-- })
      
      Text(`${this.count}`).width(30)
      
      Button('+')
        .width(40)
        .onClick(() => { this.count++ })
    }
  }
}