《鸿蒙HarmonyOS 5.0开发教程》基础篇06：颜色值和像素单位

鸿蒙应用的页面开发，在处理组件样式时会涉及到很多的颜色取值和长度大小取值。

一、颜色取值

ArkTS 中提供了 4 种描述资源颜色的类型，用来设置文字颜色、背景颜色还是边框颜色等。

颜色类型	说明	示例
Color 枚举类型	ArkTS 内置的颜色枚举类型	Color.Orange
颜色英文单词	支持一些基础的颜色单词	"green"
16进制	支持HEX格式的颜色取值	"#000000"、0xFFFFFF
rgb格式	以rgb三原色方式设置颜色（还可以添加a设置透明度）	rgb(0, 0, 0)、rgba(0, 0, 0, 0.5)

说明：以上 4 种颜色取值，适用于所有需要设置颜色样式的场景。

示例代码：

build() {
    Column() {
      Text("文字颜色")
        .fontColor("red")

      Row() {
        Column()
          .width(100).height(100)
          .backgroundColor('#eeeeee')

        Column()
          .width(100).height(100)
          .backgroundColor(0x999999)
      }

      Row() {
        Column()
          .width(100).height(100)
          .backgroundColor('rgb(125, 125, 1)')

        Column()
          .width(100).height(100)
          .backgroundColor('rgba(125, 125, 1, 0.5)')

        Column()
          .width(100).height(100)
          .borderWidth(1)
          .borderColor(Color.Orange)
      }
    }
  }

代码预览效果如下：

二、像素单位

ArkTS 中也提供了 4 种像素单位（官方文档），用来设置组件的宽高大小、位置、文字的字体大小等样式。

像素单位	说明
px	屏幕物理像素单位。
vp	屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。
fp	字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。
lpx	视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度的比值。

说明：

• 在鸿蒙应用的开发中，最常用的两个像素单位是 vp 和 fp；
• vp 单位可用于所有需要设置像素大小的样式，例如组件宽高大小、位置移动，以及文字大小；
• fp 单位专门用于设置文字字体大小，和 vp 不同的是，通过 fp 设置的文字大小，会随着设备系统字体大小一起缩放；

示例代码：

build() {
  Column() {
    Column() {
      Text('以vp作为单位的文字')
        .fontSize(20)
      Text('以fp作为单位的文字')
        .fontSize('20fp')
    }
    .width('200vp').height(100).border({ width: 1 })
  }
  .height('100%').width('100%')
}

说明：除了官方提到的 4 种像素单位以外，% 这些常规的单位在 ArkTS 中都可以正常使用。

代码预览效果如下：