鸿蒙5.0版开辟：ArkTS组件通用属性（背景设置）
背景设置设置组件的背景样式。
阐明：
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标志该内容的起始版本。
background10+
background(builder: CustomBuilder, options?: { align?: Alignment })
设置组件背景。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明builderCustomBuilder是自定义背景。options{align?:Alignment}否设置自定义背景与组件的对齐方式。
同时设置了background，backgroundColor，backgroundImage时，叠加显示，background在最上层。 阐明：
自定义背景渲染会有肯定耽误，不能响应事件，不能举举措态更新。该属性不支持嵌套使用，不支持预览器预览。
backgroundColor
backgroundColor(value: ResourceColor)
设置组件背景致。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valueResourceColor是设置组件的背景致。 backgroundImage
backgroundImage(src: ResourceStr | PixelMap, repeat?: ImageRepeat)
设置组件的背景图片。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明srcResourceStr | PixelMap12+是图片地点，支持网络图片资源地点和本舆图片资源地点和Base64或者PixelMap资源，不支持svg范例的图片。repeatImageRepeat否设置背景图片的重复样式，默认不重复。当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。 backgroundImageSize
backgroundImageSize(value: SizeOptions | ImageSize)
设置组件背景图片的宽高。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valueSizeOptions | ImageSize是设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比举行调整。默认保持原图的比例不变。
width和height取值范围： [0, +∞)
默认值：ImageSize.Auto
阐明：
设置为小于0的值时，按值为0显示。当设置了height未设置width时，width根据图片原始宽高比举行调整。 backgroundImagePosition
backgroundImagePosition(value: Position | Alignment)
设置背景图的位置。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valuePosition | Alignment是设置背景图在组件中显示位置，即相对于组件左上角的坐标。
默认值：
{
x: 0,
y: 0
}
x和y值设置百分比时，偏移量是相对组件自身宽高盘算的。 backgroundBlurStyle9+
backgroundBlurStyle(value: BlurStyle, options?: BackgroundBlurStyleOptions)
为当前组件提供一种在背景和内容之间的模糊能力。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valueBlurStyle是背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数。options10+BackgroundBlurStyleOptions否背景模糊选项。 backgroundEffect11+
backgroundEffect(options: BackgroundEffectOptions)
设置组件背景属性。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明optionsBackgroundEffectOptions是设置组件背景属性包括：饱和度，亮度，颜色。 backgroundImageResizable12+
backgroundImageResizable(value: ResizableOptions)
设置背景图在拉伸时可调整巨细的图像选项。
设置合法的ResizableOptions时，backgroundImage属性中的repeat参数设置不见效。
当设置top+bottom大于原图的高或者left+right大于原图的宽时，ResizableOptions属性设置不见效。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valueResizableOptions是图像拉伸时可调整巨细的图像选项。 BackgroundBlurStyleOptions10+对象阐明
继承自BlurStyleOptions
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
backgroundBrightness12+
backgroundBrightness(params: BackgroundBrightnessOptions)
设置组件背景提亮效果。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明paramsBackgroundBrightnessOptions是设置组件背景提亮效果，包括：亮度变革速率，提亮程度。 BackgroundBrightnessOptions12+对象阐明
名称参数范例必填描述ratenumber是亮度变革速率。亮度变革速率越大，亮度下降速度越快，亮度提升程度越低。
默认值：0.0
取值范围：(0.0, +∞)lightUpDegreenumber是提亮程度。提亮程度越大，亮度提升程度越大。
默认值：0.0
取值范围：[-1.0, 1.0] 示例
示例1
// xxx.ets
@Entry
@Component
struct BackgroundExample {
build() {
Column({ space: 5 }) {
Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 })
Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row()
.backgroundImage('/comment/bg.jpg', ImageRepeat.X)
.backgroundImageSize({ width: '250px', height: '140px' })
.width('90%')
.height(70)
.border({ width: 1 })
Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row()
.backgroundImage('/comment/bg.jpg', ImageRepeat.Y)
.backgroundImageSize({ width: '500px', height: '120px' })
.width('90%')
.height(100)
.border({ width: 1 })
Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row()
.width('90%').height(150)
.backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
.backgroundImageSize({ width: 1000, height: 500 })
.border({ width: 1 })
Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC)
// 不保证图片完整的情况下占满盒子
Row()
.width(200)
.height(50)
.backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Cover)
.border({ width: 1 })
Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC)
// 保证图片完整的情况下放到最大
Row()
.width(200)
.height(50)
.backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Contain)
.border({ width: 1 })
Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row()
.width(100)
.height(50)
.backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
.backgroundImageSize({ width: 1000, height: 560 })
.backgroundImagePosition({ x: -500, y: -300 })
.border({ width: 1 })
}
.width('100%').height('100%').padding({ top: 5 })
}
}
<strong>ts</strong> https://i-blog.csdnimg.cn/direct/59d5bd94afa342d982249e7d8ed57602.png
示例2
// xxx.ets
@Entry
@Component
struct BackgroundBlurStyleDemo {
build() {
Column() {
Row() {
Text("Thin Material")
}
.width('50%')
.height('50%')
.backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 })
.position({ x: '15%', y: '30%' })
}
.height('100%')
.width('100%')
.backgroundImage($r('app.media.bg'))
.backgroundImageSize(ImageSize.Cover)
}
}
<strong>ts</strong> https://i-blog.csdnimg.cn/direct/c37bd029e85d4adfbab343db11e11b7e.png
示例3
// xxx.ets
@Entry
@Component
struct BackgroundExample {
@Builder renderBackground() {
Column() {
Progress({value : 50})
}
}
build() {
Column() {
Text("content")
.width(100)
.height(40)
.fontColor("#FFF")
.position({x:50, y:80})
.textAlign(TextAlign.Center)
.backgroundColor(Color.Green)
}
.width(200).height(200)
.background(this.renderBackground)
.backgroundColor(Color.Gray)
}
}
<strong>ts</strong> https://i-blog.csdnimg.cn/direct/18626d9ccf6242e7ba941b94cb213126.png
示例4
设置组件背景提亮效果
// xxx.ets
@Entry
@Component
struct BackgroundBrightnessDemo {
build() {
Column() {
Row() {
Text("BackgroundBrightness")
}
.width(200)
.height(100)
.position({ x: 100, y: 100 })
.backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT})
.backgroundBrightness({rate:0.5,lightUpDegree:0.5}) // 背景提亮效果
}
.width('100%')
.height('100%')
.backgroundImage($r('app.media.image'))
.backgroundImageSize(ImageSize.Cover)
}
}
<strong>ts</strong> 效果图如下：
rate和lightUpDegree参数值为0.5,0.5：
https://i-blog.csdnimg.cn/direct/ff12348845aa41bf937e0b11775658fa.png
修改rate和lightUpDegree参数值为0.5,-0.1：
https://i-blog.csdnimg.cn/direct/0c880bb86d364092936700de926082ec.png
去掉backgroundBrightness的设置，效果如下：
https://i-blog.csdnimg.cn/direct/533fac1905f3474aa3203a690a50a9ee.png
看完三件事❤️
[*]如果你觉得这篇内容对你还蛮有帮助，我想约请你帮我三个小忙：
[*]点赞，转发，有你们的 『点赞和批评』，才是我创造的动力。
[*]关注作者龚众皓： 『 蜀道衫 』，不定期分享原创知识。
[*]关注后复兴【666】扫码即可获取学习文档。
[*]同时可以期待后续文章ing
页:
[1]