鸿蒙5.0版开发：ArkTS组件通用属性（背景设置）

最新推荐文章于 2024-11-01 09:19:41 发布
最新推荐文章于 2024-11-01 09:19:41 发布
阅读量1.4k 收藏 29
点赞数 23
分类专栏： 鸿蒙5.0开发 ArkTS组件 文章标签： harmonyos 华为 android 鸿蒙 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/141606446
版权

背景设置

设置组件的背景样式。

说明：

从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 })
  }
}
ts

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

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

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

效果图如下：

rate和lightUpDegree参数值为0.5,0.5：

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

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

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注作者龚众皓： 『 蜀道衫 』，不定期分享原创知识。
  • 关注后回复【666】扫码即可获取学习文档。
  • 同时可以期待后续文章ing🚀。

炫酷盖茨猫先生
关注
专栏目录
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：背景设置）
m0_64420071的博客
03-01 8660
ArkTS声明式开发（通用属性：背景设置）
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：尺寸设置）
m0_64420071的博客
03-01 4553
ArkTS声明式开发（通用属性：尺寸设置）
鸿蒙HarmonyOS应用开发：ArkTS声明式UI设计中的背景设置艺术
qq_44103359的博客
05-05 876
在鸿蒙HarmonyOS的应用开发中，ArkTS（ArkUI）是一种新兴的声明式开发框架，它允许开发者以更简洁、直观的方式构建用户界面。在ArkTS中，有许多通用属性可以应用于各种组件，以增强其功能和视觉效果。本文将重点探讨其中一个重要属性：背景设置。
ArkTS中background相关的方法详细介绍
LIUCHANGSHUO的博客
08-29 1099
当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。同时设置了background，backgroundColor，backgroundImage时，叠加显示，background在最上层。当设置top+bottom大于原图的高或者left+right大于原图的宽时，ResizableOptions属性设置不生效。params:设置组件背景提亮效果，包括：亮度变化速率，提亮程度。options:设置组件背景属性包括：饱和度，亮度，颜色。
button设置点击更改背景图片
还没见过大海
11-19 8878
给button设置背景图片很简单，设置点击时的背景也简单，做一个selector选择器就好了。当我想在点击时和松开后背景不再改变回去时遇到了麻烦，无论怎么设置selector都不起作用。无奈上网求救，遇一好心人解答，感谢他，现将解决方法记录下来。 第一种方法：给按钮添加监听事件，并做标志。这个貌似要在xml文件给按钮加上背景。 button.setOnClickListener(new OnC
Harmony背景图片铺满
跟踪世界脚步
04-13 1070
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。系统能力： SystemCapability.ArkUI.ArkUI.Full。在对页面，弹框设置背景时，需要放大全屏。设置组件背景图片的宽高。
鸿蒙5.0版开发：ArkTS组件通用属性（多态样式）
m0_73088370的博客
09-03 1104
设置组件不同状态下的样式。
鸿蒙5.0版开发：ArkTS组件通用属性-尺寸设置
m0_69424697的博客
10-20 916
用于设置组件的宽高、边距。
鸿蒙5.0版开发：ArkTS组件通用属性（布局约束）
m0_73088370的博客
08-27 897
通过组件的宽高比和显示优先级约束组件显示效果。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：动态属性设置）
m0_64420071的博客
03-05 2330
ArkTS声明式开发（通用属性：动态属性设置）
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：ListItemGroup）
m0_64420071的博客
03-15 1343
ArkTS声明式开发（容器组件：ListItemGroup）
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Refresh）
m0_64420071的博客
03-15 2378
ArkTS声明式开发（容器组件：Refresh）
基于ArkUI实现类似.9图的拉伸能力
hongxiaomeng的博客
07-23 422
HarmonyOS 5.0应用开发——用户文件操作
最新发布
高心星的专栏
11-01 671
用户文件：文件所有者为登录到该终端设备的用户，包括用户私有的图片、视频、音频、文档等。 用户文件存放在用户目录下，归属于该设备上登录的用户。 用户文件存储位置主要分为内置存储、外置存储。 应用对用户文件的创建、访问、删除等行为，需要提前获取用户授权，或由用户操作完成。
鸿蒙进阶篇-Swiper组件的使用
2401_88463044的博客
10-30 825
在科技的浪潮中，鸿蒙操作系统宛如一颗璀璨的新星，引领着创新的方向。作为鸿蒙开天组，今天我们将一同踏上鸿蒙基础的探索之旅，为您揭开这一神奇系统的神秘面纱。各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今天的学习,鸿蒙进阶篇-Swiper组件的使用。
初体验鸿蒙 HarmonyOS NEXT开发
dawn0718的专栏
10-30 392
使用华为DevEco Studio做手机应用的初体验。
鸿蒙Harmony-矩形绘制组件Rect使用详解
袁震的博客
10-31 1170
Rect是鸿蒙提供的矩形绘制组件，利用该组件可以绘制矩形背景，矩形图案等官方提供的参数和属性：参数名参数类型必填默认值参数描述width否0宽度。异常值按照默认值处理。height否0高度。异常值按照默认值处理。radius否0圆角半径，支持分别设置四个角的圆角度数。该属性和radiusWidth/radiusHeight属性效果类似，在组合使用时优先于radiusWidth/radiusHeight生效异常值按照默认值处理。否0圆角宽度。
「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件
weixin_44217688的博客
10-30 985
Slider 和 Progress 是鸿蒙系统中的常用 UI 组件。Slider 控制数值输入，如音量调节；Progress 显示任务的完成状态，如下载进度。本文通过代码示例展示如何使用这些组件，并涵盖 进度条类型介绍、节流优化、状态同步 和 定时器动态更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值