鸿蒙开发03样式相关介绍（一）

---

前言

ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。
ArkTS使用函数形式直接对页面UI进行创建（对应HTML的功能），使用属性实现对页面的样式修整（对应CSS的功能），使用事件实现页面交互（对应JS的功能）。

下面着重对样式相关内容进行一些介绍。

---

一、样式语法

1.1 样式属性

样式属性主要分为通用属性和组件属性。通用属性就是组件都能调用的通用属性，组件属性则是不同组件的自身属性（不同组件不一样）。

属性方法以.进行链式调用。

@Entry
@Component
struct Index {
  build() {
    Text('演示')
      .backgroundColor('red')
      .fontSize(50)
      .width('100%')
      .height(100)
  }
}

1.2 枚举值

针对系统组件，ArkUI为其属性预定义了一些枚举类型。

@Entry
@Component
struct Index {
  build() {
    Text('演示')
      .fontSize(50)
      .width('100%')
      .height(100)
      .backgroundColor(Color.Blue)
      .textAlign(TextAlign.Center)
      .fontColor(Color.White)
  }
}

二、样式单位

• 虚拟像素vp
  虚拟像素(virtual pixel)是屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位 vp。
  

• 像素单位px
  屏幕物理像素单位。

• 字体像素fp
  字体像素(font pixel) 大小默认情况下与 vp 相同，即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体，字体的实际显示大小就会在 vp 的基础上乘以用户设置的缩放系数，即 1 fp = 1 vp * 缩放系数。

• 视窗逻辑像素lpx
  视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值。

系统提供了对应的像素转化方法。如：vp2px(value:number) number

三、图片资源

Image组件可以支持加载多图片类型。

3.1 本地资源

可以加载本地资源。在ets文件夹（根目录）下，新建目录放置本地图片。

// 1.本地图片 自定义的assets
Image('/assets/Geo.png').width(100).height(100)

3.2 内置资源

系统自身提供的一些图片资源文件，可以直接使用。

// 2.系统内置资源图片
Image($r('sys.media.wifi_router_fill')).width(100).aspectRatio(1)

3.3 媒体资源

在resource内置文件夹下media资源，将图片复制进该路径即可直接使用。

// 3.本地图片 预置设置资源图片 mdeia
Image($r('app.media.foreground')).width(100)

3.4 在线资源

直接使用网络资源的网址作为路径，即可使用该图片。
模拟器和真机需要开启网络权限

// 4.在线图片 网络地址
mage('https://img.alicdn.com/imgextra/i2/O1CN01FF1t1g1Q3PDWpSm4b_!!6000000001920-55-tps-508-135.svg').width(100).aspectRatio(1) // 实际使用时请替换为真实地址

3.5 字体图标

使用svg字体图标资源，可以修改颜色。

// 5.下载的字体图标
Image($r('app.media.font')).width(100)

3.6 媒体资源

在resource内置文件夹下rawfile资源，将图片复制进该路径即可直接使用。一般是放置视频资源。

// 6.本地图片 预置设置资源图片 rawfile
Image($rawfile('Geo.png'))