ArkUI组件

原创

已于 2023-12-24 16:24:40 修改 · 2.6k 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙 #ArkUI

于 2023-12-09 21:24:16 首次发布

一、概述

方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。

ArkUI提供了非常多的组件供开发者使用，我们在使用时直接去查看官方文档即可。按钮（Button）-添加常用组件-添加组件-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发

或者我们使用DevEco Studio的时候，将鼠标在一个API上悬停一段时间，就会出现show in Api Reference选项，此时点击就可以查看IDE自带的官方API文档，这个文档与官方文档是一摸一样的，非常好用。

声明式UI

我们接下来使用的是声明式开发范式，当然官方也推荐这种开发方式

那什么是声明式开发？

与声明式开发相对的就是命令式开发，我们先来看一段代码

        List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

        // 命令式编程方式：计算所有偶数的平方和
        int evenSquaredSumImperative = 0;
        for (int num : numbers) {
            if (num % 2 == 0) {
                evenSquaredSumImperative += num * num;
            }
        }
        System.out.println("Imperative: " + evenSquaredSumImperative);

在这段Python代码中，它的目的是计算所有偶数的平方和，最终打印输出。我们要实现这个功能就要思考怎么去实现，并最终使用代码逻辑去完成这个功能。

但是我们现在使用声明式开发

int evenSquaredSumDeclarative = numbers.stream()
                .filter(num -> num % 2 == 0)
                .mapToInt(num -> num * num)
                .sum();
        System.out.println("Declarative: " + evenSquaredSumDeclarative);

我们直接调用了Java的流式API来进行实现，不用你去实现这个功能的底层逻辑，你只需要思考怎么去使用这些API来完成你需要的功能即可。

我们再来看我们以后使用的ArkUI开发代码

Text('hello')
  .fontSize(this.size)
Image('test.jpg')
  .width(this.count % 2 === 0 ? 100 : 200)    
  .height(this.offset + 100)

在这样的代码中，我们几乎看不到任何操作UI更新的代码，而这正是声明式UI的特点，它侧重于描述做什么，而不是怎么做，开发者只需要关注UI应该如何呈现，而不需要关心UI的具体实现过程。

应用界面是由一个个页面组成，ArkTS是由ArkUI框架提供，用于以声明式开发范式开发界面的语言。

声明式UI构建页面的过程，其实是组合组件的过程，声明式UI的思想，主要体现在两个方面：

描述UI的呈现结果，而不关心过程
状态驱动视图更新

开发者要做的，就只是提供不同UI与不同状态之间的映射关系，而无需编写如何在不同UI之间进行切换的代码。

应用模型

随着系统的演进发展，HarmonyOS先后提供了两种应用模型：

FA（Feature Ability）模型：HarmonyOS早期版本开始支持的模型，已经不再主推。

Stage模型：HarmonyOS 3.1 Developer Preview版本开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。

Stage模型与FA模型最大的区别在于：Stage模型中，多个应用组件共享同一个ArkTS引擎实例；而FA模型中，每个应用组件独享一个ArkTS引擎实例。因此在Stage模型中，应用组件之间可以方便的共享对象和状态，同时减少复杂应用运行对内存的占用。Stage模型作为主推的应用模型，开发者通过它能够更加便利地开发出分布式场景下的复杂应用。

总之，我们以后的开发发使用也会基于Stage模型进行开发

二、常用组件

1、Image：图片展示组件

（1）、声明Image组件并设置图片源

Image(src: string | PixelMap | Resource)

string格式通常用来加载网络图片，因此需要申请网络访问权限：ohos.permission.INTERNET

Image('https://xxx.png')

PiexlMap格式可以加载像素图，常用在图片编辑中

Image(pixelMapObject)

Resource格式用来加载本地图片，用的最多

有两个目录可以用来存放本地图片，media文件夹和rawfile文件夹

//读取media文件夹下的图片，图片后缀可省略
Image($r('app.media.mate60'))


//读取rawfile文件夹下的图片，图片后缀不可省略
Image($rawfile('mate60.png'))

$r("app.xxx") 就是寻找本地资源的意思，这些资源统一都以 app. 开头

media与rawfile是两个创建项目时自带的专门用来存放图片的文件夹

（2）、添加图片属性

属性	说明
width（100）	宽度
height（120）	高度
borderRadius（10）	边框圆角
interpolation（ImageInterpolation.High）	图片插值

图片插值使用用来消除图片锯齿的，就是能让一个模糊的图片变得平滑清晰

最低0.47元/天解锁文章

200万优质内容无限畅学