🐟作者简介：一名大三在校生，喜欢编程🪴
🐡🐙个人主页🥇：Aic山鱼
🐠WeChat：z7010cyy
🦈系列专栏：🏞️
- 前端-JS基础专栏✨
- 前端-Vue框架专栏✨✨
- Aic山鱼
- 前端-有趣特效专栏❤️🔥❤️🔥❤️🔥
- 鸿蒙OS专栏（更新中）
铭句：将所有微不足道的瞬间编织起来，你将得到绝伦壮丽的宇宙！
目录
引言
鸿蒙基础组件概述
ArkTS与TypeScript/JavaScript的区别
组件基础
1. 组件结构
3. Component修饰符
4. build函数
5. 组件属性与方法
6. @Prop和@Link装饰器
常用基础组件
1. Text组件
二、Image组件样式设置
2.1 图片缩放
2.3 边框与圆角
引言
鸿蒙（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框架中不可或缺的一部分，它提供了加载和展示图片的基本功能，并通过丰富的样式设置选项和高级应用技巧，使开发者能够轻松实现各种复杂的图片展示效果。
