鴻蒙 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ù)說明
- content:文本內(nèi)容俱济,可為字符串或資源嘶是。若包含子組件 Span 且未設(shè)置屬性字符串,則顯示 Span 內(nèi)容蛛碌,此時 text 組件樣式不生效聂喇,默認值為 ' '。
- value(11 +):文本組件初始化選項蔚携。
三希太、屬性介紹
textAlign:設(shè)置文本段落在水平方向的對齊方式(從 API version 9 在 ArkTS 卡片、API version 11 在元服務(wù)中可用)酝蜒,參數(shù)類型為 TextAlign誊辉,默認值為 TextAlign.Start。通過 align 屬性控制垂直方向位置亡脑,結(jié)合 textAlign 控制水平位置堕澄,textAlign 為 TextAlign.JUSTIFY 時需設(shè)置 wordBreak 屬性。
textOverflow:設(shè)置文本超長時的顯示方式(從 API version 9 在 ArkTS 卡片霉咨、API version 11 在元服務(wù)中可用)蛙紫,參數(shù)類型為 {overflow: TextOverflow},默認值為 {overflow: TextOverflow.Clip}躯护。截斷按字截斷惊来,不同 overflow 值與 maxLines、copyOption 等屬性有不同的配合效果棺滞,TextOverflow.MARQUEE 模式下有特殊情況裁蚁。
maxLines:設(shè)置文本最大行數(shù)(從 API version 9 在 ArkTS 卡片矢渊、API version 11 在元服務(wù)中可用),參數(shù)類型為 number枉证。
lineHeight:設(shè)置文本行高(從 API version 9 在 ArkTS 卡片矮男、API version 11 在元服務(wù)中可用),參數(shù)類型為 number | string | Resource室谚。
decoration(12 +):設(shè)置文本裝飾線樣式及其顏色(從 API version 9 在 ArkTS 卡片毡鉴、API version 11 在元服務(wù)中可用),參數(shù)類型為 DecorationStyleInterface秒赤。
baselineOffset:設(shè)置文本基線偏移量(從 API version 9 在 ArkTS 卡片猪瞬、API version 11 在元服務(wù)中可用),參數(shù)類型為 number | string入篮,默認值為 0陈瘦。
letterSpacing:設(shè)置文本字符間距(從 API version 9 在 ArkTS 卡片、API version 11 在元服務(wù)中可用)潮售,參數(shù)類型為 number | string痊项。
minFontSize:設(shè)置文本最小顯示字號(從 API version 9 在 ArkTS 卡片、API version 11 在元服務(wù)中可用)酥诽,需配合其他屬性使用鞍泉,參數(shù)類型為 number | string | Resource。
maxFontSize:設(shè)置文本最大顯示字號(從 API version 9 在 ArkTS 卡片肮帐、API version 11 在元服務(wù)中可用)咖驮,需配合其他屬性使用,參數(shù)類型為 number | string | Resource训枢。
textCase:設(shè)置文本大小寫(從 API version 9 在 ArkTS 卡片游沿、API version 11 在元服務(wù)中可用),參數(shù)類型為 TextCase肮砾,默認值為 TextCase.Normal。
fontColor:設(shè)置字體顏色(從 API version 9 在 ArkTS 卡片袋坑、API version 11 在元服務(wù)中可用)仗处,參數(shù)類型為 ResourceColor。
fontSize:設(shè)置字體大性婀(從 API version 9 在 ArkTS 卡片婆誓、API version 11 在元服務(wù)中可用),參數(shù)類型為 Resource | number | string也颤,默認字體大小 16fp洋幻,不支持百分比字符串。
fontStyle:設(shè)置字體樣式(從 API version 9 在 ArkTS 卡片翅娶、API version 11 在元服務(wù)中可用)文留,參數(shù)類型為 FontStyle好唯,默認值為 FontStyle.Normal。
fontWeight:設(shè)置文本字體粗細(從 API version 9 在 ArkTS 卡片燥翅、API version 11 在元服務(wù)中可用)骑篙,參數(shù)類型為 FontWeight | number | string,默認值為 FontWeight.Normal森书。
fontFamily:設(shè)置字體列表(從 API version 9 在 ArkTS 卡片靶端、API version 11 在元服務(wù)中可用),參數(shù)類型為 Resource | string凛膏,默認字體 'HarmonyOS Sans'杨名。
copyOption(9 +):設(shè)置組件是否支持文本可復(fù)制粘貼(從 API version 9 在 ArkTS 卡片、API version 11 在元服務(wù)中可用)猖毫,參數(shù)類型為 CopyOptions台谍,默認值為 CopyOptions.None”陕螅卡片長按文本無菜單彈出典唇。
draggable(9 +):設(shè)置選中文本拖拽效果(從 API version 11 在元服務(wù)中可用),參數(shù)類型為 boolean胯府,默認值為 false介衔,需配合 CopyOptions 使用。
font(10 +):設(shè)置文本樣式(從 API version 11 在元服務(wù)中可用)骂因,參數(shù)類型為 Font炎咖。
textShadow(10 +):設(shè)置文字陰影效果(從 API version 10 在 ArkTS 卡片、API version 11 在元服務(wù)中可用)寒波,參數(shù)類型為 ShadowOptions | Array<ShadowOptions>(11 +)乘盼。
heightAdaptivePolicy(10 +):設(shè)置文本自適應(yīng)高度的方式(從 API version 11 在元服務(wù)中可用),參數(shù)類型為 TextHeightAdaptivePolicy俄烁,默認值為 TextHeightAdaptivePolicy.MAX_LINES_FIRST绸栅。
textIndent(10 +):設(shè)置首行文本縮進(從 API version 11 在元服務(wù)中可用),參數(shù)類型為 Length页屠,默認值為 0粹胯。
wordBreak(11 +):設(shè)置斷行規(guī)則(從 API version 11 在元服務(wù)中可用),參數(shù)類型為 WordBreak辰企,默認值為 WordBreak.BREAK_WORD风纠,可與特定屬性組合實現(xiàn)英文單詞按字母截斷。
selection(11 +):設(shè)置選中區(qū)域(從 API version 11 在元服務(wù)中可用)牢贸,參數(shù)類型為 selectionStart: number, selectionEnd: number竹观,有多種生效條件限制。
ellipsisMode(11 +):設(shè)置省略位置(從 API version 12 在元服務(wù)中可用),參數(shù)類型為 EllipsisMode臭增,默認值為 EllipsisMode.END懂酱,需配合特定屬性使用。
-
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 }) } }