🐟作者简介:一名大三在校生,喜欢编程🪴
🐡🐙个人主页🥇: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框架中不可或缺的一部分,它提供了加载和展示图片的基本功能,并通过丰富的样式设置选项和高级应用技巧,使开发者能够轻松实现各种复杂的图片展示效果。