qidao123.com技术社区-IT企服评测·应用市场

标题: 鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：配景设置） [打印本页]

---

作者: 羊蹓狼    时间: 2024-6-14 21:22
标题: 鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：配景设置）
设置组件的配景样式。
   说明：
  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  background10+

background(builder: CustomBuilder, options?: { align?: Alignment })
设置组件配景。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明builderCustomBuilder是自定义配景。options{align?:Alignment}否设置自定义配景与组件的对齐方式。
同时设置了background，backgroundColor，backgroundImage时，叠加显示，background在最上层。   说明：
  自定义配景渲染会有一定延迟，不能相应变乱，不能举行动态更新。该属性不支持嵌套使用，不支持预览器预览。
  backgroundColor

backgroundColor(value: ResourceColor)
设置组件配景色。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是设置组件的配景色。 backgroundImage

backgroundImage(src: ResourceStr, repeat?: ImageRepeat)
设置组件的配景图片。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明srcResourceStr是图片地点，支持网络图片资源地点和当舆图片资源地点和Base64，不支持svg类型的图片。repeatImageRepeat否设置配景图片的重复样式，默认不重复。当设置的配景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，配景颜色在最底部。 backgroundImageSize

backgroundImageSize(value: SizeOptions | ImageSize)
设置组件配景图片的宽高。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueSizeOptions | ImageSize是设置配景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比举行调解。默认保持原图的比例不变。
width和height取值范围： [0, +∞)
默认值：ImageSize.Auto
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
设置为小于0的值时，按值为0显示。当设置了height未设置width时，width根据图片原始宽高比举行调解。 backgroundImagePosition

backgroundImagePosition(value: Position | Alignment)
设置配景图的位置。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuePosition | Alignment是设置配景图在组件中显示位置，即相对于组件左上角的坐标。
默认值：
{
x: 0,
y: 0
}
x和y值设置百分比时，偏移量是相对组件自身宽高盘算的。
从API version 9开始，该接口支持在ArkTS卡片中使用。 backgroundBlurStyle9+

backgroundBlurStyle(value: BlurStyle, options?: BackgroundBlurStyleOptions)
为当前组件提供一种在配景和内容之间的模糊本领。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueBlurStyle是配景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数。options10+BackgroundBlurStyleOptions否配景模糊选项。 backgroundEffect11+

backgroundEffect(options: BackgroundEffectOptions)
设置组件配景属性。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明optionsBackgroundEffectOptions否设置组件配景属性包罗：饱和度，亮度，颜色。 backgroundBrightness11+

backgroundBrightness(params: BackgroundBrightnessOptions)
设置组件配景提亮结果。
体系本领： SystemCapability.ArkUI.ArkUI.Full
体系API： 此接口为体系接口
参数：
参数名类型必填说明paramsBackgroundBrightnessOptions是设置组件配景提亮结果，包罗：亮度厘革速率，提亮程度。 BackgroundBlurStyleOptions10+对象说明

名称参数类型必填形貌colorModeThemeColorMode否配景模糊结果使用的深浅色模式。
默认值：ThemeColorMode.SystemadaptiveColorAdaptiveColor否配景模糊结果使用的取色模式。<br/ > 默认值：AdaptiveColor.Defaultscalenumber否配景材质模糊结果程度。此参数为体系接口。
默认值：1.0
取值范围：[0.0, 1.0]blurOptions11+BlurOptions否灰阶模糊参数。 BackgroundBrightnessOptions11+对象说明

名称参数类型必填形貌ratenumber是亮度厘革速率。亮度厘革速率越大，亮度降落速率越快，亮度提升程度越低。此参数为体系接口。
默认值：0.0
取值范围：(0.0, +∞)lightUpDegreenumber是提亮程度。提亮程度越大，亮度提升程度越大。此参数为体系接口。
默认值：0.0
取值范围：[-1.0, 1.0] 示例

示例1

1. // xxx.ets
2. @Entry
3. @Component
4. struct BackgroundExample {
6.   build() {
7.     Column({ space: 5 }) {
8.       Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)
9.       Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 })
11.       Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC)
12.       Row()
13.         .backgroundImage('/comment/bg.jpg', ImageRepeat.X)
14.         .backgroundImageSize({ width: '250px', height: '140px' })
15.         .width('90%')
16.         .height(70)
17.         .border({ width: 1 })
19.       Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC)
20.       Row()
21.         .backgroundImage('/comment/bg.jpg', ImageRepeat.Y)
22.         .backgroundImageSize({ width: '500px', height: '120px' })
23.         .width('90%')
24.         .height(100)
25.         .border({ width: 1 })
27.       Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC)
28.       Row()
29.         .width('90%').height(150)
30.         .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
31.         .backgroundImageSize({ width: 1000, height: 500 })
32.         .border({ width: 1 })
34.       Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC)
35.       // 不保证图片完整的情况下占满盒子
36.       Row()
37.         .width(200)
38.         .height(50)
39.         .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
40.         .backgroundImageSize(ImageSize.Cover)
41.         .border({ width: 1 })
43.       Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC)
44.       // 保证图片完整的情况下放到最大
45.       Row()
46.         .width(200)
47.         .height(50)
48.         .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
49.         .backgroundImageSize(ImageSize.Contain)
50.         .border({ width: 1 })
52.       Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC)
53.       Row()
54.         .width(100)
55.         .height(50)
56.         .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
57.         .backgroundImageSize({ width: 1000, height: 560 })
58.         .backgroundImagePosition({ x: -500, y: -300 })
59.         .border({ width: 1 })
60.     }
61.     .width('100%').height('100%').padding({ top: 5 })
62.   }
63. }

复制代码

示例2

1. // xxx.ets
2. @Entry
3. @Component
4. struct BackgroundBlurStyleDemo {
5.   build() {
6.     Column() {
7.       Row() {
8.         Text("Thin Material")
9.       }
10.       .width('50%')
11.       .height('50%')
12.       .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 })
13.       .position({ x: '15%', y: '30%' })
14.     }
15.     .height('100%')
16.     .width('100%')
17.     .backgroundImage($r('app.media.bg'))
18.     .backgroundImageSize(ImageSize.Cover)
19.   }
20. }

复制代码

示例3

1. [/code] [code]// xxx.ets
2. @Entry
3. @Component
4. struct BackgroundExample {
5.   @Builder renderBackground() {
6.     Column() {
7.       Progress({value : 50})
8.     }
9.   }
11.   build() {
12.     Column() {
13.       Text("content")
14.         .width(100)
15.         .height(40)
16.         .fontColor("#FFF")
17.         .position({x:50, y:80})
18.         .textAlign(TextAlign.Center)
19.         .backgroundColor(Color.Green)
20.     }
21.     .width(200).height(200)
22.     .background(this.renderBackground)
23.     .backgroundColor(Color.Gray)
24.   }
25. }

复制代码

示例4

设置组件配景提亮结果

1. // xxx.ets
2. @Entry
3. @Component
4. struct BackgroundBrightnessDemo {
5.   build() {
6.     Column() {
7.       Row() {
8.         Text("BackgroundBrightness")
9.       }
10.       .width(200)
11.       .height(100)
12.       .position({ x: 100, y: 100 })
13.       .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 })
14.       .backgroundBrightness({rate:0.5,lightUpDegree:0.5}) // 背景提亮效果
15.     }
16.     .width('100%')
17.     .height('100%')
18.     .backgroundImage($r('app.media.image'))
19.     .backgroundImageSize(ImageSize.Cover)
20.   }
21. }

复制代码

结果图如下：
rate和lightUpDegree参数值为0.5,0.5：

修改rate和lightUpDegree参数值为0.5,-0.1：

去掉backgroundBrightness的设置，结果如下：

最后，有许多小伙伴不知道学习哪些鸿蒙开发技能？不知道必要重点把握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。以是有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 
这份鸿蒙（Harmony NEXT）资料包罗了鸿蒙开发必把握的焦点知识要点，内容包罗了（ArkTS、ArkUI开发组件、Stage模子、多端摆设、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技能知识点。
盼望这一份鸿蒙学习资料能够给大家带来资助，有必要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（Harmony NEXT）最新学习路线

•  HarmonOS基础技能
  

• HarmonOS就业必备技能 
  
  
  
•  HarmonOS多媒体技能
  

• 鸿蒙NaPi组件进阶
  

• HarmonOS高级技能
  

• 初识HarmonOS内核 
  
  
  
• 实战就业级装备开发
  

有了路线图，怎么能没有学习资料呢，小编也预备了一份团结鸿蒙官方发布笔记整理收纳的一套体系性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包罗：ArkTS、ArkUI、Web开发、应用模子、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

 《鸿蒙开发基础》

• ArkTS语言
  
• 安装DevEco Studio
  
• 运用你的第一个ArkTS应用
  
• ArkUI声明式UI开发
  
• .……
  

 《鸿蒙开发进阶》

• Stage模子入门
  
• 网络管理
  
• 数据管理
  
• 电话服务
  
• 分布式应用开发
  
• 通知与窗口管理
  
• 多媒体技能
  
• 安全技能
  
• 任务管理
  
• WebGL
  
• 国际化开发
  
• 应用测试
  
• DFX面向未来计划
  
• 鸿蒙体系移植和裁剪定制
  
• ……
  

《鸿蒙进阶实战》

• ArkTS实践
  
• UIAbility应用
  
• 网络案例
  
• ……
  

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对厘革，不绝学习和提升自己，他们才能在这个厘革的时代中立于不败之地。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)

Powered by Discuz! X3.4