ArkTS中background相关的方法详细介绍

一、.background()

background(builder: CustomBuilder, options?: { align?: Alignment })

设置组件背景。

builder：自定义背景。 align：设置自定义背景与组件的对齐方式。 同时设置了background，backgroundColor，backgroundImage时，叠加显示，background在最上层。

说明： 自定义背景渲染会有一定延迟，不能响应事件，不能进行动态更新。该属性不支持嵌套使用，不支持预览器预览。

二、backgroundColor()

backgroundColor(value: ResourceColor)

设置组件背景色。

value:#FFFFFF

三、backgroundImage()

backgroundImage(src: ResourceStr | PixelMap, repeat?: ImageRepeat)

设置组件的背景图片。

src：图片地址，支持网络图片资源地址和本地图片资源地址和Base64，不支持svg类型的图片。 repeat：设置背景图片的重复样式，默认不重复。当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。

四、backgroundImageSize()

backgroundImageSize(value: SizeOptions | ImageSize)

设置组件背景图片的宽高。

设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。 width和height取值范围： [0, +∞) 默认值：ImageSize.Auto

说明： 设置为小于0的值时，按值为0显示。当设置了height未设置width时，width根据图片原始宽高比进行调整。 

Column() {
  Text('Hello')
 .backgroundImageSize('cover')  // 图片完全覆盖背景区域
}

 

五、backgroundImagePosition()

backgroundImagePosition(value: Position | Alignment)

设置背景图的位置。

top（顶部）、bottom（底部）、left（左边）、right（右边）、center（居中）等，还可以组合使用，如 top left（左上角）、center bottom（底部居中）等。

设置背景图在组件中显示位置，即相对于组件左上角的坐标。 默认值： { x: 0, y: 0 } x和y值设置百分比时，偏移量是相对组件自身宽高计算的。

Column() {
  Text('Hello')
 .backgroundImagePosition('center top')  // 将背景图片位置设置为垂直顶部居中
}

六、backgroundBlurStyle()

backgroundBlurStyle(value: BlurStyle, options?: BackgroundBlurStyleOptions)

为当前组件提供一种在背景和内容之间的模糊能力。

value: 背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数。 options: 可选参数，背景模糊选项。

Column() {
  Text('Hello')
 .backgroundBlurStyle(BlurStyle.Light)  // 应用轻度模糊样式
}

七、backgroundEffect()

backgroundEffect(options: BackgroundEffectOptions)

设置组件背景属性。

options:设置组件背景属性包括：饱和度，亮度，颜色。

Column() {
  Text('Hello')
 .backgroundEffect(BlurEffect(5))  // 应用模糊特效，模糊程度为 5
}

 

八、backgroundImageResizable()

backgroundImageResizable(value: ResizableOptions)

设置背景图在拉伸时可调整大小的图像选项。

设置合法的ResizableOptions时，backgroundImage属性中的repeat参数设置不生效。

当设置top+bottom大于原图的高或者left+right大于原图的宽时，ResizableOptions属性设置不生效。

value:图像拉伸时可调整大小的图像选项。

Column() {
  Text('Hello')
 .backgroundImageResizable(true) // 允许背景图片缩放
}

九、BackgroundFilter()

在 ArkTS 中，BackgroundFilter 通常用于设置组件背景的滤镜效果。

它可以实现诸如模糊、颜色调整等效果，增强视觉表现。

Column() {
  Text('Hello')
 .backgroundFilter(BlurEffect(5)) // 模糊程度为 5
}

十、backgroundBrightness()

backgroundBrightness(params: BackgroundBrightnessOptions)

设置组件背景提亮效果。

params:设置组件背景提亮效果，包括：亮度变化速率，提亮程度。

Column() {
  Text('Hello')
 .backgroundBrightness(0.5) // 将背景亮度设置为 50%
}