ArkUI的样式 原创

在上一篇章中我们介绍完了在ArkTs中状态管理的内容知识点，以及基础的用法，这一篇幅中我们来介绍一下ArkUI中的样式。
在ArkTs中以声明式和类Web式两种开发范式，其中我们主要来介绍声明式的用法
声明式开发范式：采用基于TypeScript声明式UI语法扩展而来的ArkTs语言，从组件、动画和状态管理三个维度提供UI绘制能力。
样式属性分为两类: 一类为通用的属性，一类为组件的特有属性，但是它们在声明式的使用方法都是相同的。是以.链式调用的方式配置系统组件的样式和其他属性。 例如:

@Entry
@Component
struct TypeDemoPage {
@State message: string = ‘Hello World’;

build() {
Column() {
Text(this.message)
.fontSize(25)
}
.width(“100%”)
.height(“100%”)
}
}
其中该代码中的.fonSize, .width, .height都是叫做样式属性，其中的.fonSize是Text组件样式属性，如果我们在其他的不包含文字的组件中是无法使用该样式属性的
还有一些样式是通过枚举值使用的比如：

其中这个fontColor中的Color就是ArkUI给我们预设的一个枚举值，但是往往我们大多数开发场景下是自己会定义项目相关的枚举值
样式中的像素单位：在我们定义一些组件的时候通常会去定义它的宽度或者高度其中.width(20)比如这样，我们在这个括号内写的20的数字默认的单位像素是vp，也是我们开发中默认的像素单位。其中还有px, fp, lpx
总共四种像素单位,在官方文档中有详细的介绍，它们的描述以及如何进行相互转换
https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-pixel-units#像素单位转换
图片样式：在我们的开发目录中有个resources的目录，该目录下的base下面的media就是我们存放图片的文件夹，其中Image()这个组件我们点进去之后可以看到它支持加载string， PixelMap 和Resource类型的数据源，其中支持的图片类型为png，jpg， bmp， svg和gif 类型的图片格式
使用示例如下:

@Entry
@Component
struct TypeDemoPage {
@State message: string = ‘Hello World’;

build() {
Column() {
Image($r(“app.media.app_icon”))
.width(40).height(40)
}
.width(“100%”)
.height(“100%”)
}
}

其中我演示的数据源是Resource的，我们也可以定义一个文件专门的存放该项目中的图片 例如:

@Entry
@Component
struct TypeDemoPage {
@State message: string = ‘Hello World’;

build() {
Column() {
Image(“/img/startIcon.png”)
.width(40).height(40)
}
.width(“100%”)
.height(“100%”)
}
}
其中的效果和上面的图片效果是一致的。

Harmony OS NEXT API12
本次就暂时介绍这么多， 在下一篇内容中我会给大家介绍一下样式复用的修饰器
谢谢各位的观看，有错误不足的地方， 本人乐于接受各位的意见