衡阳派盒市场营销有限公司

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙ArkTS聲明式組件:ImageSpan

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-06-24 15:37 ? 次閱讀

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對齊。HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿

搜狗高速瀏覽器截圖20240326151344.png

事件

通用事件僅支持[點擊事件]。

示例

// 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 })
  }
}

imagespan

審核編輯 黃宇

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 組件
    +關注

    關注

    1

    文章

    518

    瀏覽量

    17925
  • 鴻蒙
    +關注

    關注

    57

    文章

    2392

    瀏覽量

    43055
收藏 人收藏

    評論

    相關推薦

    HarmonyOS/OpenHarmony應用開發-ArkTS聲明開發范式

    軌跡。狀態與數據管理狀態數據管理作為基于ArkTS聲明開發范式的特色,通過功能不同的裝飾器給開發者提供了清晰的頁面更新渲染流程和管道。狀態管理包括UI組件狀態和應用程序狀態,兩者協
    發表于 01-17 15:09

    鴻蒙ArkTS聲明組件:Blank

    空白填充組件,在容器主軸方向上,空白填充組件具有自動填充容器空余部分的能力。僅當父組件為Row/Column/Flex時生效。
    的頭像 發表于 06-19 16:21 ?612次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Blank

    鴻蒙ArkTS聲明組件:DataPanel

    數據面板組件,用于將多個數據占比情況使用占比圖進行展示。
    的頭像 發表于 06-21 09:42 ?484次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:DataPanel

    鴻蒙ArkTS聲明組件:Marquee

    跑馬燈組件,用于滾動展示一段單行文本。僅當文本內容寬度超過跑馬燈組件寬度時滾動,不超過時不滾動。
    的頭像 發表于 06-25 15:52 ?495次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Marquee

    鴻蒙ArkTS聲明組件:NavDestination

    作為NavRouter組件的子組件,用于顯示導航內容區。
    的頭像 發表于 06-27 14:05 ?595次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:NavDestination

    鴻蒙ArkTS聲明組件:PatternLock

    圖案密碼鎖組件,以九宮格圖案的方式輸入密碼,用于密碼驗證場景。手指在PatternLock組件區域按下時開始進入輸入狀態,手指離開屏幕時結束輸入狀態完成密碼輸入。
    的頭像 發表于 06-27 09:59 ?576次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:PatternLock

    鴻蒙ArkTS聲明組件:【RichText】

    富文本組件,解析并顯示HTML格式文本。
    的頭像 發表于 06-29 09:35 ?856次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:【RichText】

    鴻蒙ArkTS聲明組件:ScrollBar

    滾動條組件ScrollBar,用于配合可滾動組件使用,如List、Grid、Scroll。
    的頭像 發表于 07-01 15:52 ?600次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:ScrollBar

    鴻蒙ArkTS聲明組件:Span

    作為Text組件的子組件,用于顯示行內文本的組件
    的頭像 發表于 07-01 09:14 ?515次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Span

    鴻蒙ArkTS聲明組件:StepperItem

    用作[Stepper]組件的頁面子組件
    的頭像 發表于 07-02 17:47 ?465次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:StepperItem

    鴻蒙ArkTS聲明組件:TextArea

    多行文本輸入框組件,當輸入的文本內容超過組件寬度時會自動換行顯示。
    的頭像 發表于 07-02 15:02 ?801次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextArea

    鴻蒙ArkTS聲明組件:TextInput

    單行文本輸入框組件
    的頭像 發表于 07-03 09:14 ?1115次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextInput

    鴻蒙ArkTS聲明組件:TextPicker

    滑動選擇文本內容的組件
    的頭像 發表于 07-03 15:07 ?603次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextPicker

    鴻蒙ArkTS聲明組件:TextTimer

    通過文本顯示計時信息并控制其計時器狀態的組件
    的頭像 發表于 07-03 17:06 ?614次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextTimer

    鴻蒙ArkTS聲明組件:XComponent

    可用于EGL/OpenGLES和媒體數據寫入,并顯示在XComponent組件
    的頭像 發表于 07-05 09:56 ?811次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:XComponent
    圣安娜百家乐官网包杀合作| 威尼斯人娱乐场28gxpjwnsr| 德州扑克学校| 娱乐城百家乐官网可以代理吗 | 百家乐官网游戏论坛| 百家乐那个平台信誉高| 潜江市| 百家乐六合彩3535| 12倍百家乐官网秘籍| 筹码百家乐的玩法技巧和规则| 澳门百家乐官网博彩能做到不输吗| 百家乐游戏种类| 波音百家乐官网现金网投注平台排名导航| 洛克百家乐的玩法技巧和规则| 百家乐官网论坛香港马会| 百家乐牌壳| 世嘉百家乐官网的玩法技巧和规则| 博彩资讯| 百家乐澳门色子| 威斯汀百家乐官网的玩法技巧和规则 | 百家乐官网棋牌游戏源码| 威尼斯人娱乐城在线赌博网站| 百家乐官网博娱乐赌百家乐官网的玩法技巧和规则 | 属羊的和属猪的做生意| 新野县| 大都会百家乐的玩法技巧和规则 | 15人百家乐官网桌| 海立方百家乐赢钱| 湘潭县| 大都会百家乐的玩法技巧和规则 | 百家乐平预测软件| 阳宅24方位判断方法| 百家乐官网手机软件| 新东泰百家乐的玩法技巧和规则| 免水百家乐官网的玩法技巧和规则 | 皇冠现金网址| 百家乐8点直赢| 百家乐官网赢的秘诀| 新全讯网3344555| 至尊百家乐下载| 下载百家乐官网棋牌大厅|