鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：背景设置）

设置组件的背景样式。

background10+

background(builder: custombuilder, options?: { align?: alignment })

设置组件背景。

系统能力： systemcapability.arkui.arkui.full

参数：

参数名	类型	必填	说明
builder	custombuilder	是	自定义背景。
options	{align?:alignment}	否	设置自定义背景与组件的对齐方式。 同时设置了background，backgroundcolor，backgroundimage时，叠加显示，background在最上层。

backgroundcolor

backgroundcolor(value: resourcecolor)

设置组件背景色。

卡片能力： 从api version 9开始，该接口支持在arkts卡片中使用。

系统能力： systemcapability.arkui.arkui.full

参数：

参数名	类型	必填	说明
value	resourcecolor	是	设置组件的背景色。

backgroundimage

backgroundimage(src: resourcestr, repeat?: imagerepeat)

设置组件的背景图片。

卡片能力： 从api version 9开始，该接口支持在arkts卡片中使用。

系统能力： systemcapability.arkui.arkui.full

参数：

参数名	类型	必填	说明
src	resourcestr	是	图片地址，支持网络图片资源地址和本地图片资源地址和base64，不支持svg类型的图片。
repeat	imagerepeat	否	设置背景图片的重复样式，默认不重复。当设置的背景图片为透明底色图片，且同时设置了backgroundcolor时，二者叠加显示，背景颜色在最底部。

backgroundimagesize

backgroundimagesize(value: sizeoptions | imagesize)

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

卡片能力： 从api version 9开始，该接口支持在arkts卡片中使用。

系统能力： systemcapability.arkui.arkui.full

参数：

参数名	类型	必填	说明
value	sizeoptions | 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

参数：

参数名	类型	必填	说明
value	position | 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

参数：

参数名	类型	必填	说明
value	blurstyle	是	背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数。
options10+	backgroundblurstyleoptions	否	背景模糊选项。

backgroundeffect11+

backgroundeffect(options: backgroundeffectoptions)

设置组件背景属性。

系统能力： systemcapability.arkui.arkui.full

参数：

参数名	类型	必填	说明
options	backgroundeffectoptions	否	设置组件背景属性包括：饱和度，亮度，颜色。

backgroundbrightness11+

backgroundbrightness(params: backgroundbrightnessoptions)

设置组件背景提亮效果。

系统能力： systemcapability.arkui.arkui.full

系统api： 此接口为系统接口

参数：

参数名	类型	必填	说明
params	backgroundbrightnessoptions	是	设置组件背景提亮效果，包括：亮度变化速率，提亮程度。

backgroundblurstyleoptions10+对象说明

名称	参数类型	必填	描述
colormode	themecolormode	否	背景模糊效果使用的深浅色模式。 默认值：themecolormode.system
adaptivecolor	adaptivecolor	否	背景模糊效果使用的取色模式。<br/ > 默认值：adaptivecolor.default
scale	number	否	背景材质模糊效果程度。此参数为系统接口。 默认值：1.0 取值范围：[0.0, 1.0]
bluroptions11+	bluroptions	否	灰阶模糊参数。

backgroundbrightnessoptions11+对象说明

名称	参数类型	必填	描述
rate	number	是	亮度变化速率。亮度变化速率越大，亮度下降速度越快，亮度提升程度越低。此参数为系统接口。 默认值：0.0 取值范围：(0.0, +∞)
lightupdegree	number	是	提亮程度。提亮程度越大，亮度提升程度越大。此参数为系统接口。 默认值：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 })
  }
}

示例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)
  }
}

示例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)
  }
}

示例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, scale: 1.0 })
      .backgroundbrightness({rate:0.5,lightupdegree:0.5}) // 背景提亮效果
    }
    .width('100%')
    .height('100%')
    .backgroundimage($r('app.media.image'))
    .backgroundimagesize(imagesize.cover)
  }
}

效果图如下：

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学习资料

总结

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