背景图 - backgroundImage
属性:.backgroundImage(背景图地址)
Text()
.backgroundImage($r('app.media.flower')),ImageReapeat.XY)
背景图平铺方式 ImageRepeat:(可省略)
Noreapeat:不平铺,默认值
X:水平平铺
Y:垂直平铺
XY:水平垂直均平铺
背景图位置 - backgroundImagePosition
作用:调整背景图在组件内的显示位置,默认显示位置为组件左上角
属性:.backgroundImagePosition(坐标对象 或 枚举)
参数:
位置坐标:{ x:位置坐标,y:位置坐标 }
枚举 Alignment
Text()
.backgroundImage($r('app.media.图片名称'))
.backgroundImagePostion({ x: 100, y: 100 })
.backgroundImagePostion(Alignment.Center)
单位问题
背景定位默认定位 px:实际的物理像素点,设备出厂,就定好了【分辨率单位】
宽高默认单位 vp:虚拟像素,相对于不同的设备会自动转换,保证不同设备视觉一致(推荐)
函数:vp2px(数值)将vp进行转换,得到 px 的数值
背景图尺寸 - backgroundImageSize
作用:背景图缩放
属性:.backgroundImageSize(宽高对象 或 枚举)
参数:
背景图宽高:{ width:尺寸,height:尺寸 }
枚举 ImageSize:
Contain:等比例缩放背景图,当宽或高与组件尺寸相同停止缩放
Cover:等比例缩放背景图至图片完全覆盖组件范围
Auto:默认,原图尺寸
Text()
.backgroundImage($r('app.media.图片名称'))
.backgroundImageSize({ width: 250, height: 100})
.backgroundImageSize(ImageSize.COnver)
标签:平铺,鸿蒙,缩放,背景,枚举,backgroundImageSize,backgroundImage,背景图,属性
From: https://blog.csdn.net/2301_81915581/article/details/136813341