鴻蒙 Next 中 Text 組件用法總結(jié)

鴻蒙 Next 中 Text 組件用法總結(jié)

一骨饿、基本信息

Text 組件從 API Version 7 開始支持『檠迹可包含 Span样刷、ImageSpan、SymbolSpan 和 ContainerSpan 子組件览爵,接口為 Text (content?: string | Resource, value?: TextOptions)置鼻。從 API version 9 開始支持在 ArkTS 卡片中使用,從 API version 11 開始支持在元服務(wù)中使用蜓竹,系統(tǒng)能力為 SystemCapability.ArkUI.ArkUI.Full箕母。

二、參數(shù)說明

  1. content:文本內(nèi)容俱济,可為字符串或資源嘶是。若包含子組件 Span 且未設(shè)置屬性字符串,則顯示 Span 內(nèi)容蛛碌,此時 text 組件樣式不生效聂喇,默認值為 ' '。
  2. value(11 +):文本組件初始化選項蔚携。

三希太、屬性介紹

  1. textAlign:設(shè)置文本段落在水平方向的對齊方式(從 API version 9 在 ArkTS 卡片、API version 11 在元服務(wù)中可用)酝蜒,參數(shù)類型為 TextAlign誊辉,默認值為 TextAlign.Start。通過 align 屬性控制垂直方向位置亡脑,結(jié)合 textAlign 控制水平位置堕澄,textAlign 為 TextAlign.JUSTIFY 時需設(shè)置 wordBreak 屬性。

  2. textOverflow:設(shè)置文本超長時的顯示方式(從 API version 9 在 ArkTS 卡片霉咨、API version 11 在元服務(wù)中可用)蛙紫,參數(shù)類型為 {overflow: TextOverflow},默認值為 {overflow: TextOverflow.Clip}躯护。截斷按字截斷惊来,不同 overflow 值與 maxLines、copyOption 等屬性有不同的配合效果棺滞,TextOverflow.MARQUEE 模式下有特殊情況裁蚁。

  3. maxLines:設(shè)置文本最大行數(shù)(從 API version 9 在 ArkTS 卡片矢渊、API version 11 在元服務(wù)中可用),參數(shù)類型為 number枉证。

  4. lineHeight:設(shè)置文本行高(從 API version 9 在 ArkTS 卡片矮男、API version 11 在元服務(wù)中可用),參數(shù)類型為 number | string | Resource室谚。

  5. decoration(12 +):設(shè)置文本裝飾線樣式及其顏色(從 API version 9 在 ArkTS 卡片毡鉴、API version 11 在元服務(wù)中可用),參數(shù)類型為 DecorationStyleInterface秒赤。

  6. baselineOffset:設(shè)置文本基線偏移量(從 API version 9 在 ArkTS 卡片猪瞬、API version 11 在元服務(wù)中可用),參數(shù)類型為 number | string入篮,默認值為 0陈瘦。

  7. letterSpacing:設(shè)置文本字符間距(從 API version 9 在 ArkTS 卡片、API version 11 在元服務(wù)中可用)潮售,參數(shù)類型為 number | string痊项。

  8. minFontSize:設(shè)置文本最小顯示字號(從 API version 9 在 ArkTS 卡片、API version 11 在元服務(wù)中可用)酥诽,需配合其他屬性使用鞍泉,參數(shù)類型為 number | string | Resource。

  9. maxFontSize:設(shè)置文本最大顯示字號(從 API version 9 在 ArkTS 卡片肮帐、API version 11 在元服務(wù)中可用)咖驮,需配合其他屬性使用,參數(shù)類型為 number | string | Resource训枢。

  10. textCase:設(shè)置文本大小寫(從 API version 9 在 ArkTS 卡片游沿、API version 11 在元服務(wù)中可用),參數(shù)類型為 TextCase肮砾,默認值為 TextCase.Normal。

  11. fontColor:設(shè)置字體顏色(從 API version 9 在 ArkTS 卡片袋坑、API version 11 在元服務(wù)中可用)仗处,參數(shù)類型為 ResourceColor。

  12. fontSize:設(shè)置字體大性婀(從 API version 9 在 ArkTS 卡片婆誓、API version 11 在元服務(wù)中可用),參數(shù)類型為 Resource | number | string也颤,默認字體大小 16fp洋幻,不支持百分比字符串。

  13. fontStyle:設(shè)置字體樣式(從 API version 9 在 ArkTS 卡片翅娶、API version 11 在元服務(wù)中可用)文留,參數(shù)類型為 FontStyle好唯,默認值為 FontStyle.Normal。

  14. fontWeight:設(shè)置文本字體粗細(從 API version 9 在 ArkTS 卡片燥翅、API version 11 在元服務(wù)中可用)骑篙,參數(shù)類型為 FontWeight | number | string,默認值為 FontWeight.Normal森书。

  15. fontFamily:設(shè)置字體列表(從 API version 9 在 ArkTS 卡片靶端、API version 11 在元服務(wù)中可用),參數(shù)類型為 Resource | string凛膏,默認字體 'HarmonyOS Sans'杨名。

  16. copyOption(9 +):設(shè)置組件是否支持文本可復(fù)制粘貼(從 API version 9 在 ArkTS 卡片、API version 11 在元服務(wù)中可用)猖毫,參數(shù)類型為 CopyOptions台谍,默認值為 CopyOptions.None”陕螅卡片長按文本無菜單彈出典唇。

  17. draggable(9 +):設(shè)置選中文本拖拽效果(從 API version 11 在元服務(wù)中可用),參數(shù)類型為 boolean胯府,默認值為 false介衔,需配合 CopyOptions 使用。

  18. font(10 +):設(shè)置文本樣式(從 API version 11 在元服務(wù)中可用)骂因,參數(shù)類型為 Font炎咖。

  19. textShadow(10 +):設(shè)置文字陰影效果(從 API version 10 在 ArkTS 卡片、API version 11 在元服務(wù)中可用)寒波,參數(shù)類型為 ShadowOptions | Array<ShadowOptions>(11 +)乘盼。

  20. heightAdaptivePolicy(10 +):設(shè)置文本自適應(yīng)高度的方式(從 API version 11 在元服務(wù)中可用),參數(shù)類型為 TextHeightAdaptivePolicy俄烁,默認值為 TextHeightAdaptivePolicy.MAX_LINES_FIRST绸栅。

  21. textIndent(10 +):設(shè)置首行文本縮進(從 API version 11 在元服務(wù)中可用),參數(shù)類型為 Length页屠,默認值為 0粹胯。

  22. wordBreak(11 +):設(shè)置斷行規(guī)則(從 API version 11 在元服務(wù)中可用),參數(shù)類型為 WordBreak辰企,默認值為 WordBreak.BREAK_WORD风纠,可與特定屬性組合實現(xiàn)英文單詞按字母截斷。

  23. selection(11 +):設(shè)置選中區(qū)域(從 API version 11 在元服務(wù)中可用)牢贸,參數(shù)類型為 selectionStart: number, selectionEnd: number竹观,有多種生效條件限制。

  24. ellipsisMode(11 +):設(shè)置省略位置(從 API version 12 在元服務(wù)中可用),參數(shù)類型為 EllipsisMode臭增,默認值為 EllipsisMode.END懂酱,需配合特定屬性使用。

  25. enableDataDetector(11 +):設(shè)置是否進行文本特殊實體識別(從 API version 11 在元服務(wù)中可用)速址,參數(shù)類型為 boolean玩焰。依賴設(shè)備底層文本識別能力,有不同設(shè)置下的樣式變化和功能差異芍锚,TextOverflow.MARQUEE 模式下功能不生效昔园。

    代碼示例

    // xxx.ets
    @Extend(Text)
    function style(TextAlign: TextAlign) {
      .textAlign(TextAlign)
      .fontSize(12)
      .border({ width: 1 })
      .padding(10)
      .width('100%')
    }
    
    @Entry
    @Component
    struct TextExample1 {
      build() {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
          // 文本水平方向?qū)R方式設(shè)置
          // 單行文本
          Text('textAlign').fontSize(9).fontColor(0xCCCCCC)
          Text('TextAlign set to Center.')
            .style(TextAlign.Center)
          Text('TextAlign set to Start.')
            .style(TextAlign.Start)
          Text('TextAlign set to End.')
            .style(TextAlign.End)
    
          // 多行文本
          Text('This is the text content with textAlign set to Center.')
            .style(TextAlign.Center)
          Text('This is the text content with textAlign set to Start.')
            .style(TextAlign.Start)
          Text('This is the text content with textAlign set to End.')
            .style(TextAlign.End)
    
    
          // 文本超長時顯示方式
          Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)
          // 超出maxLines截斷內(nèi)容展示
          Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
            .textOverflow({ overflow: TextOverflow.Clip })
            .maxLines(1)
            .style(TextAlign.Start)
    
          // 超出maxLines展示省略號
          Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.')
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
            .style(TextAlign.Start)
    
          Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
          Text('This is the text with the line height set. This is the text with the line height set.')
            .style(TextAlign.Start)
          Text('This is the text with the line height set. This is the text with the line height set.')
            .style(TextAlign.Start)
            .lineHeight(20)
        }.height(600).width(340).padding({ left: 35, right: 35, top: 35 })
      }
    }
    
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市并炮,隨后出現(xiàn)的幾起案子默刚,更是在濱河造成了極大的恐慌,老刑警劉巖逃魄,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荤西,死亡現(xiàn)場離奇詭異,居然都是意外死亡伍俘,警方通過查閱死者的電腦和手機邪锌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來癌瘾,“玉大人觅丰,你說我怎么就攤上這事》镣耍” “怎么了妇萄?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長咬荷。 經(jīng)常有香客問我冠句,道長,這世上最難降的妖魔是什么幸乒? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任懦底,我火速辦了婚禮,結(jié)果婚禮上罕扎,老公的妹妹穿的比我還像新娘基茵。我一直安慰自己,他們只是感情好壳影,可當(dāng)我...
    茶點故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著弥臼,像睡著了一般宴咧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上径缅,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天掺栅,我揣著相機與錄音烙肺,去河邊找鬼。 笑死氧卧,一個胖子當(dāng)著我的面吹牛桃笙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼短曾!你這毒婦竟也來了丢习?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤跋炕,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體虚循,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年样傍,在試婚紗的時候發(fā)現(xiàn)自己被綠了横缔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,626評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡衫哥,死狀恐怖茎刚,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情炕檩,我是刑警寧澤斗蒋,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站笛质,受9級特大地震影響泉沾,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜妇押,卻給世界環(huán)境...
    茶點故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一跷究、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧敲霍,春花似錦俊马、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至扩然,卻和暖如春艘儒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工界睁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留觉增,地道東北人。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓翻斟,卻偏偏與公主長得像逾礁,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子访惜,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,494評論 2 348

推薦閱讀更多精彩內(nèi)容