背景設(shè)置
設(shè)置組件的背景樣式。
說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
屬性
名稱 | 參數(shù)類型 | 描述 |
---|---|---|
background10+ | builder: [CustomBuilder], options?: {align?:[Alignment]} | builder:自定義背景。 align:設(shè)置自定義背景與組件的對齊方式。 同時(shí)設(shè)置了background,backgroundColor,backgroundImage時(shí),疊加顯示,background在最上層。**說明:**自定義背景渲染會(huì)有一定延遲,不能響應(yīng)事件,不能進(jìn)行動(dòng)態(tài)更新。該屬性不支持嵌套使用,不支持預(yù)覽器預(yù)覽。 |
backgroundColor | [ResourceColor] | 設(shè)置組件的背景色。 從API version 9開始,該接口支持在ArkTS卡片中使用。 |
backgroundImage | src: [ResourceStr], repeat?: [ImageRepeat] | src:圖片地址,支持網(wǎng)絡(luò)圖片資源地址和本地圖片資源地址和Base64,不支持svg類型的圖片。 repeat:設(shè)置背景圖片的重復(fù)樣式,默認(rèn)不重復(fù)。當(dāng)設(shè)置的背景圖片為透明底色圖片,且同時(shí)設(shè)置了backgroundColor時(shí),二者疊加顯示,背景顏色在最底部。 從API version 9開始,該接口支持在ArkTS卡片中使用。 |
backgroundImageSize | { width?: [Length], height?: [Length] } | [ImageSize] |
backgroundImagePosition | [Position] | [Alignment] |
backgroundBlurStyle9+ | value:[BlurStyle], options10+?:[BackgroundBlurStyleOptions] | 為當(dāng)前組件提供一種在背景和內(nèi)容之間的模糊能力。 value: 背景模糊樣式。模糊樣式中封裝了模糊半徑、蒙版顏色、蒙版透明度、飽和度、亮度五個(gè)參數(shù)。 options: 可選參數(shù),背景模糊選項(xiàng)。 該接口支持在ArkTS卡片中使用。 |
BackgroundBlurStyleOptions10+對象說明
名稱 | 參數(shù)類型 | 必填 | 描述 |
---|---|---|---|
colorMode | [ThemeColorMode] | 否 | 背景模糊效果使用的深淺色模式。 默認(rèn)值:ThemeColorMode.System |
adaptiveColor | [AdaptiveColor] | 否 | 背景模糊效果使用的取色模式。 默認(rèn)值:AdaptiveColor.Default |
scale | number | 否 | 背景材質(zhì)模糊效果程度。此參數(shù)為系統(tǒng)接口。 默認(rèn)值:1.0 取值范圍:[0.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)
// 不保準(zhǔn)圖片完整的情況下占滿盒子
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)
// 保準(zhǔn)圖片完整的情況下放到最大
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
`HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿`
// 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)
}
}
審核編輯 黃宇
聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。
舉報(bào)投訴
-
鴻蒙
+關(guān)注
關(guān)注
59文章
2588瀏覽量
43936
發(fā)布評(píng)論請先 登錄
相關(guān)推薦
熱點(diǎn)推薦
鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【圖片邊框設(shè)置】 通用屬性
從API Version 9開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

HarmonyOS/OpenHarmony應(yīng)用開發(fā)-ArkTS的聲明式開發(fā)范式
基于ArkTS的聲明式開發(fā)范式的方舟開發(fā)框架是一套開發(fā)極簡、高性能、
發(fā)表于 01-17 15:09
鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【按鍵事件】
按鍵事件指組件與鍵盤、遙控器等按鍵設(shè)備交互時(shí)觸發(fā)的事件,適用于所有可獲焦組件,例如Button。對于Text,Image等默認(rèn)不可獲焦的組件,可以設(shè)置focusable屬性為true后使用按鍵事件。

鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【尺寸設(shè)置】 通用屬性
從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【邊框設(shè)置】 通用屬性
從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【透明度設(shè)置】 通用屬性
從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【顯隱控制】 通用屬性
控制當(dāng)前組件顯示或隱藏。注意,即使組件處于隱藏狀態(tài),在頁面刷新時(shí)仍存在重新創(chuàng)建過程,因此當(dāng)對性能有嚴(yán)格要求時(shí)建議使用[條件渲染]代替。 默認(rèn)值:Visibility.Visible 從API version 9開始,該接口支持在ArkTS卡片中使用。

鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【形狀裁剪】 通用屬性
參數(shù)為相應(yīng)類型的組件,按指定的形狀對當(dāng)前組件進(jìn)行裁剪;參數(shù)為boolean類型時(shí),設(shè)置是否按照父容器邊緣輪廓進(jìn)行裁剪。 默認(rèn)值:false 從API version 9開始,該接口支持在ArkTS卡片中使用。

鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【柵格設(shè)置】 通用屬性
默認(rèn)占用列數(shù),指useSizeType屬性沒有設(shè)置對應(yīng)尺寸的列數(shù)(span)時(shí),占用的柵格列數(shù)。

鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【菜單控制】 通用屬性
為組件綁定彈出式菜單,彈出式菜單以垂直列表形式顯示菜單項(xiàng),可通過長按、點(diǎn)擊或鼠標(biāo)右鍵觸發(fā)。

鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【多態(tài)樣式】 通用屬性
設(shè)置組件不同狀態(tài)的樣式。 從API version 9開始,該接口支持在ArkTS卡片中使用。

評(píng)論