本章继续Harmony OS中UI开发中的内容。

目录

SVG图标

1. SVG 图标的优势

2. 在 HarmonyOS 中使用 SVG

3.官方图标库

背景属性

.backgroundImage()

.backgroundImagePosition()

.backgroundImageSize()

---

SVG图标

SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图形格式，在 HarmonyOS 开发中广泛用于图标和矢量图形的显示。以下是关于在 HarmonyOS 中使用 SVG 图标的详细介绍：

1. SVG 图标的优势

• 矢量特性：可无限缩放而不失真

• 文件体积小：相比位图更节省空间

• 可编辑性：可直接修改颜色、大小等属性

• 动画支持：支持基于属性的动画效果

2. 在 HarmonyOS 中使用 SVG

svg图标的使用和普通图片一样

Image($r('app.media.图标名称'))

可以通过.fillColor修改图标颜色

3.官方图标库

Harmony OS官方为我们提供一套图标库

背景属性

属性方法	属性
背景色	backgroundColor
背景图	backgroundImage
背景图位置	backgroundImagePosition
背景图尺寸	backgroundImageSize

.backgroundImage()

.backgroundImage(图片地址,背景图平铺方式-ImageRepeat枚举类型)

背景图平铺方式（可省略）：

NoRepeat 不平铺（默认）

X 水平平铺

Y 垂直平铺

XY 水平垂直均平铺

.backgroundImagePosition()

调整背景图在组件内的显示位置，默认显示位置为组件左上角

.backgroundImagePosition(坐标对象或枚举)

位置坐标{x:坐标位置,y:坐标位置} 图片左顶点位置

枚举 Alignment

Text()
    .width(100)
    .height(100)
    .backgroundImage($r('app.media.startIcon'))
    .backgroundColor(Color.Red)
    .backgroundImagePosition(Alignment.Center)

单位问题：

背景定位的默认单位和宽高的默认单位不同

背景定位的单位：px 像素，实际的物理像素点

宽高默认单位：vp 虚拟像素，相对于不同的设备会自动转换，保证不同设备视觉一致（推荐）

函数vp2px()可以进行单位转换

.backgroundImageSize()

.backgroundImageSize(宽高对象或枚举)

背景图宽高{width:宽,height:高}

枚举ImageSize

Auto(默认) 原图尺寸

Cover 等比例缩放至完全覆盖组件范围 （多余内容被裁剪掉了）

Contain 等比例缩放至宽或高与组件尺寸相同停止缩放