ImageSpan
[Text]組件的子組件,用于顯示行內圖片。
說明:
開發前請熟悉鴻蒙開發指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
該組件從API Version 10開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。
子組件
無
接口
ImageSpan(value: ResourceStr | PixelMap)
參數:
參數名 | 參數類型 | 必填 | 參數描述 |
---|---|---|---|
value | [ResourceStr] | [PixelMap] | 是 |
屬性
[通用屬性]方法支持尺寸設置、背景設置、邊框設置。
名稱 | 參數類型 | 描述 |
---|---|---|
verticalAlign | [ImageSpanAlignment] | 圖片基于文本的對齊方式。 默認值:ImageSpanAlignment.BOTTOM |
objectFit | [ImageFit] | 設置圖片的縮放類型。 默認值:ImageFit.Cover |
ImageSpanAlignment
名稱 | 描述 |
---|---|
TOP | 圖片上邊沿與文本上邊沿對齊。 |
CENTER | 圖片中間與文本中間對齊。 |
BOTTOM | 圖片下邊沿與文本下邊沿對齊。 |
BASELINE | 圖片下邊沿與文本BaseLine對齊。HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿 |
事件
通用事件僅支持[點擊事件]。
示例
// xxx.ets
@Entry
@Component
struct SpanExample {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start}) {
Text() {
Span('This is the Span and ImageSpan component').fontSize(25).textCase(TextCase.Normal)
.decoration({ type: TextDecorationType.None, color: Color.Pink })
}.width('100%').textAlign(TextAlign.Center)
Text() {
ImageSpan($r('app.media.icon'))
.width('200px')
.height('200px')
.objectFit(ImageFit.Fill)
.verticalAlign(ImageSpanAlignment.CENTER)
Span('I am LineThrough-span')
.decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(25)
ImageSpan($r('app.media.icon'))
.width('50px')
.height('50px')
.verticalAlign(ImageSpanAlignment.TOP)
Span('I am Underline-span')
.decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25)
ImageSpan($r('app.media.icon'))
.size({width:'100px', height:'100px'})
.verticalAlign(ImageSpanAlignment.BASELINE)
Span('I am Underline-span')
.decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25)
ImageSpan($r('app.media.icon'))
.width('70px')
.height('70px')
.verticalAlign(ImageSpanAlignment.BOTTOM)
Span('I am Underline-span')
.decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(50)
}
.width('100%')
.textIndent(50)
}.width('100%').height('100%').padding({ left: 0, right: 0, top: 0 })
}
}
審核編輯 黃宇
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。
舉報投訴
-
組件
+關注
關注
1文章
513瀏覽量
17855 -
鴻蒙
+關注
關注
57文章
2371瀏覽量
42911
發布評論請先 登錄
相關推薦
HarmonyOS/OpenHarmony應用開發-ArkTS的聲明式開發范式
軌跡。狀態與數據管理狀態數據管理作為基于ArkTS的聲明式開發范式的特色,通過功能不同的裝飾器給開發者提供了清晰的頁面更新渲染流程和管道。狀態管理包括UI組件狀態和應用程序狀態,兩者協
發表于 01-17 15:09
鴻蒙ArkTS聲明式組件:PatternLock
圖案密碼鎖組件,以九宮格圖案的方式輸入密碼,用于密碼驗證場景。手指在PatternLock組件區域按下時開始進入輸入狀態,手指離開屏幕時結束輸入狀態完成密碼輸入。
評論