【鸿蒙基础系列】鸿蒙基础组件

Aic山鱼

于 2024-08-16 17:22:13 发布

阅读量399

点赞数 18

分类专栏：鸿蒙系列文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/zhaochen1127/article/details/141257099

版权

鸿蒙系列专栏收录该内容

1 篇文章 0 订阅

订阅专栏

🐟作者简介：一名大三在校生，喜欢编程🪴
🐡🐙个人主页🥇：Aic山鱼
🐠WeChat：z7010cyy
🦈系列专栏：🏞️

前端-JS基础专栏✨
前端-Vue框架专栏✨✨
Aic山鱼
前端-有趣特效专栏❤️‍🔥❤️‍🔥❤️‍🔥
鸿蒙OS专栏（更新中）
铭句：将所有微不足道的瞬间编织起来，你将得到绝伦壮丽的宇宙！

引言

鸿蒙基础组件概述

ArkTS与TypeScript/JavaScript的区别

引言

鸿蒙（HarmonyOS）作为华为推出的新一代操作系统，旨在构建万物互联的智能世界。在鸿蒙系统的开发过程中，基础组件是构建丰富、动态用户界面的基石。本文将介绍鸿蒙基础组件的基本概念、分类以及常用组件的使用方法，帮助开发者快速上手鸿蒙应用开发。

鸿蒙基础组件概述

组件（Component）是鸿蒙系统ArkUI声明式开发范式中界面搭建与显示的最小单位。鸿蒙系统为开发者提供了丰富多样的UI组件，这些组件可以根据功能分为五大类：基础组件、容器组件、媒体组件、绘制组件和画布组件。基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button等，它们是构建用户界面的基础。

ArkTS与TypeScript/JavaScript的区别

ArkTS（Ark TypeScript）是HarmonyOS优选的主力应用开发语言，它在TypeScript（TS）的基础上进行了进一步扩展，继承了TS的所有特性，是TS的超集。然而，为了增加语言的规范性并避免不必要的运行开销，ArkTS在TS/JS的基础上增加了一些约束：

不支持Symbol() API：限制了某些高级特性的使用。
不支持索引访问字段：增强了类型安全性。
不支持delete运算符：限制了对象的动态修改。
仅允许在表达式中使用typeof运算符：限定了类型检查的场景。
不支持in运算符：限制了属性的动态检查。
限制使用标准库：确保语言的一致性和安全性。

此外，ArkTS还具备强大的拓展能力，支持定义声明式UI、自定义组件、动态扩展UI元素，并提供ArkUI系统组件及其事件、方法和属性，共同构成了UI开发的主体。

组件基础

1. 组件结构

鸿蒙系统的组件通常通过@Component修饰符来定义。一个组件必须包含一个build函数，该函数用于描述组件的UI结构。例如：

@Component  
struct MyComponent {  
    build() {  
        // UI描述  
        Row() {  
            Text('Hello, HarmonyOS!')  
        }  
    }  
}

2. struct自定义组件

struct关键字用于描述UI，包含UI的所有信息，但不能有继承关系或重名。自定义组件的struct必须被@Component或@CustomDialog等修饰符修饰。

3. Component修饰符

@Component装饰器只能修饰struct关键字声明的数据结构，使其具有组件描述渲染能力。被修饰的struct需要实现build函数，以链式调用的方式描述UI。

4. build函数

build函数是组件的核心，用于定义组件的UI描述。在build函数中，开发者可以调用各种系统组件来构建UI界面。build函数的根节点必须为容器组件，且必须唯一。

5. 组件属性与方法

自定义组件还可以包含其他成员函数和属性，但这些成员函数和属性有一定的约束：

不支持静态函数和静态成员变量。
所有成员变量都是私有的，访问规则与成员函数的访问规则相同。
成员变量的初始化可以是可选的，具体取决于是否需要从父组件通过参数传递。

6. @Prop和@Link装饰器

@Prop装饰器用于将一个类的属性设置为组件的属性，使其可以从外部传入并在组件中使用。
@Link装饰器用于将一个类的属性与某个函数进行关联，允许在组件内部触发这个关联的函数。

常用基础组件

1. Text组件

Text组件用于在界面上展示一段文本信息，可以包含子组件Span。Text组件支持多种文本样式设置，如fontColor、fontSize、fontStyle、fontWeight和fontFamily。

@Entry @Component  
struct TextDemo {  
    build() {  
        Row() {  
            Column() {  
                Text('HarmonyOS')  
                Text('HarmonyOS')  
                    .fontColor(Color.Blue)  
                    .fontSize(20)  
                    .fontStyle(FontStyle.Italic)  
                    .fontWeight(FontWeight.Bold)  
                    .fontFamily('Arial')  
            }  
            .width('100%')  
        }  
        .backgroundColor(0xF1F3F5)  
    }  
}

2. Image组件

Image组件用于渲染展示图片，使界面更加丰富多彩。Image组件支持本地图片和网络图片的加载，并可以通过objectFit属性设置图片的缩放类型。

对于本地图片，Image组件通过指定图片资源的路径来加载。在鸿蒙项目中，图片资源通常放置在项目的resources/base/media/目录下。加载本地图片的示例代码如下：

@Entry  
@Component  
struct ImageDemo {  
    build() {  
        Column() {  
            Image('$r("app.media.icon")') // 加载本地图片  
                .width(100)  
                .height(100)  
        }  
    }  
}

除了本地图片，Image组件还支持加载网络图片。加载网络图片时，只需将图片的URL作为Image组件的源路径即可。但需要注意的是，为了安全起见，鸿蒙系统对网络访问进行了限制，因此在加载网络图片前，需要在项目的module.json5文件中声明网络访问权限。

@Entry  
@Component  
struct NetworkImageDemo {  
    build() {  
        Column() {  
      Image('https://i-blog.csdnimg.cn/direct/4a85e0e1e0d24ac3bdd29a2ad7124ff8.png')
                .width(150)  
                .height(150)  
        }  
    }  
}

效果：


@Entry
@Component
struct Index {
  @State message: string = '你好 World';

  //Image组件基础使用
  build() {
    Column() {
// 本地图片的添加方法
      Text('本地图片').fontSize(10).fontColor(Color.Gray)
      Image($r('app.media.bj2')).width(150)
      // 网络图片添加
      Text('网络图片').fontSize(10).fontColor(Color.Gray)
      Image('https://i-blog.csdnimg.cn/direct/4a85e0e1e0d24ac3bdd29a2ad7124ff8.png')
        .width(250)
    }.width('100%')

  }
}

Image组件样式设置

Image组件提供了丰富的样式设置选项，允许开发者根据需求调整图片的显示效果。以下是一些常用的样式设置方法。

2.1 图片缩放

为了使图片在界面中有更好的显示效果，开发者可以使用objectFit属性来设置图片的缩放类型。objectFit属性决定了图片如何适应其容器的大小，常见的值有Contain、Cover、Fill等。

Contain：保持图片的宽高比，将图片缩小或放大以适应容器，但保证图片完全显示在容器内。
Cover：保持图片的宽高比，将图片缩小或放大以适应容器，但允许图片的一部分超出容器边界。
Fill：不保持图片的宽高比，将图片放大或缩小以完全填充容器。

示例代码如下：

Image('path_to_image')  
    .objectFit(ImageFit.Cover)  
    .width(200)  
    .height(200)

2.2 图片裁剪

除了缩放，鸿蒙还提供了图片裁剪的功能。虽然Image组件本身不直接支持裁剪，但开发者可以通过设置objectPosition属性来控制图片在容器中的位置，从而间接实现裁剪效果。objectPosition属性定义了图片在容器中的对齐方式，如center、top left等。

2.3 边框与圆角

鸿蒙的Image组件还支持设置边框和圆角，使图片展示更加灵活多样。但需要注意的是，直接设置边框和圆角可能需要结合其他组件或自定义绘制来实现。不过，鸿蒙提供了borderRadius属性来设置图片的圆角，使得圆形图片或带圆角的图片展示变得简单。

Image('path_to_image')  
    .borderRadius(20) // 设置圆角  
    .width(100)  
    .height(100)

总结：

Image组件是鸿蒙UI框架中不可或缺的一部分，它提供了加载和展示图片的基本功能，并通过丰富的样式设置选项和高级应用技巧，使开发者能够轻松实现各种复杂的图片展示效果。

Aic山鱼

关注

18
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
9
评论
【鸿蒙基础系列】鸿蒙基础组件

组件（Component）是鸿蒙系统ArkUI声明式开发范式中界面搭建与显示的最小单位。鸿蒙系统为开发者提供了丰富多样的UI组件，这些组件可以根据功能分为五大类：基础组件、容器组件、媒体组件、绘制组件和画布组件。基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button等，它们是构建用户界面的基础。Image组件是鸿蒙UI框架中不可或缺的一部分，它提供了加载和展示图片的基本功能，并通过丰富的样式设置选项和高级应用技巧，使开发者能够轻松实现各种复杂的图片展示效果。
复制链接

扫一扫