文本显示text

文本显示

text是文本组件

创建文本

Text('基础语法')
 //   引用字符串
     Text($r('app.string.hella'))

添加子组件

span能作为Text和RichEditor组件的子组件显示文本内容。

创建span

span组建需要写在text组件里面，无法单独使用，可以写多个子组件

Text('可以添加子组件'){
   Span('span组件无法单独使用，')
   }
Span('可以写多个子组件').fontSize(15)

decoration

decoration(value: DecorationStyleInterface)

设置文本装饰线及颜色

属性名	类型	必填	说明
value	DecorationStyleInterface12+	是	文本装饰线样式对象。默认值：{type: TextDecorationType.None,color: Color.Black,style: TextDecorationStyle.SOLID}

Text('可以添加子组件'){
   Span('span组件无法单独使用，')
   Span('可以写多个子组件').fontSize(15)
     .decoration({type:TextDecorationType.LineThrough,color:Color.Blue})//Overline上划线
 }.fontSize(20)

自定义文本样式

1.textCase

textCase(value: TextCase)

设置文本大小写。

属性名	类型	必填	描述
value	TextCase	是	文本大小写。默认值：TextCase.Normal

Span('设置文字大小写abc')//只支持onClick()添加组件
  .textCase(TextCase.UpperCase)

2.letterSpacing

letterSpacing(value: number | string | Resource)

设置文本字符间距。设置该值为百分比时，按默认值显示。设置该值为0时，按默认值显示。

当取值为负值时，文字会发生压缩，负值过小时会将组件内容区大小压缩为0，导致无内容显示。

属性名	类型	必填	说明
value	number | string | Resource	是	文本字符间距。

Span('字符间距').letterSpacing(10)

3.lineHeight

lineHeight(value: number | string | Resource)

设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小。

属性名	类型	必填	说明
value	Resource | number | string	是	文本行高，为number类型时单位为fp。

Span('行高').lineHeight(40)

4.font

font(value: Font)

设置字母索引条默认字体样式。

属性名	类型	必填	说明
value	Font	是	字母索引条默认字体样式。默认值：API version 11及以前：{size:‘12.0fp’,style:FontStyle.Normal,weight:FontWeight.Normal,family:‘HarmonyOS Sans’}API version 12及以后：{size:‘10.0vp’,style:FontStyle.Normal,weight:FontWeight.Medium,family:‘HarmonyOS Sans’}

Span('行高').lineHeight(40)
  .font({size:20,family:'HarmonyOS Sans',
    style:FontStyle.Italic,weight:FontWeight.Bolder})//文字大小，文字粗细

5.textShadow

textShadow(value: ShadowOptions | Array)

设置文字阴影效果。该接口支持以数组形式入参，实现多重文字阴影。不支持fill字段, 不支持智能取色模式。

属性名	类型	必填	描述
value	ShadowOptions | Array<ShadowOptions>	是	文字阴影效果。

Span('文字阴影')//普通形式
  .textShadow({color:Color.Blue,offsetX:5,offsetY:5,radius:10})//radius模糊度
Span('文字阴影')//数组形式
  .textShadow([
    {color:Color.Blue,offsetX:5,offsetY:5,radius:4},
    {color:Color.Red,offsetX:10,offsetY:10,radius:7}
  ])

6.textBackgroundStyle

textBackgroundStyle(style: TextBackgroundStyle)

设置文本背景样式。子组件在不设置该属性时，将继承此属性值。

属性名	类型	必填	说明
style	TextBackgroundStyle	是	文本背景样式。默认值：{color: Color.Transparent,radius: 0}

Span('背景样式')
  .textBackgroundStyle({
    color:'green',
    radius:0
  })

7.baselineOffset

baselineOffset(value: LengthMetrics)

设置ImageSpan基线的偏移量。此属性与父组件的baselineOffset是共存的

属性名	类型	必填	描述
value	LengthMetrics	是	设置ImageSpan基线的偏移量，设置该值为百分比时，按默认值显示。正数内容向上偏移，负数向下偏移。默认值：0设置为非0时会导致设置verticalAlign失效。

Text(){
   Span('调整基线')
     .baselineOffset(new LengthMetrics(-2,LengthUnit.VP))
   Span('普通文字')
   Span('调整基线')
     .baselineOffset(new LengthMetrics(2,LengthUnit.VP))
  Span('普通文字')
  ImageSpan($r('app.media.app_icon')).height(30)
    .baselineOffset(new LengthMetrics(0,LengthUnit.PX))
}

8.textAlign

textAlign(value: TextAlign)

设置文本在搜索框中的对齐方式。目前支持的对齐方式有：Start、Center、End。

属性名	类型	必填	说明
value	TextAlign	是	文本在搜索框中的对齐方式。默认值：TextAlign.Start

Text('左对齐').width(300).backgroundColor('gray').textAlign(TextAlign.Center)//对齐方式
Text('右对齐').width(300).backgroundColor('gray').textAlign(TextAlign.End)//对齐方式
Text('对齐').width(300).backgroundColor('gray').textAlign(TextAlign.Center)//对齐方式

9.textOverflow

textOverflow(value: { overflow: TextOverflow })

设置文本超长时的显示方式。

属性名	类型	必填	说明
value	{overflow: TextOverflow}	是	文本超长时的显示方式。默认值：{overflow: TextOverflow.Clip}

Text('超出滚动啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊')
 .width(300).backgroundColor('#ccc')
 .textOverflow({overflow:TextOverflow.MARQUEE})//MARQUEE滚动
Text('超出隐藏啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊')
  .width(300).backgroundColor('#ccc')
  .textOverflow({overflow:TextOverflow.Ellipsis})
  .maxLines(2)//最大行数，（最多2行）

10.maxLines

maxLines(value: number)

设置文本的最大行数。默认情况下，文本是自动折行的，如果指定此属性，则文本最多不会超过指定的行。如果有多余的文本，可以通过textOverflow来指定截断方式。

属性名	类型	必填	说明
value	number	是	文本的最大行数。

Text('最大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊')
  .width(300).backgroundColor('#ccc')
  .minFontSize(10).maxFontSize(30)
  .maxLines(2)

11.minFontSize

minFontSize(value: number | string | Resource)

设置文本最小显示字号。

属性名	类型	必填	说明
value	number | string | Resource	是	文本最小显示字号。

12.maxFontSize

maxFontSize(value: number | string | Resource)

设置文本最大显示字号。

属性名	类型	必填	说明
value	number | string | Resource	是	文本最大显示字号。

Text('最小啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊')
  .width(300).backgroundColor('#ccc')
  .minFontSize(10).maxFontSize(30)
  .maxLines(1)
Text('最大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊')
  .width(300).backgroundColor('#ccc')
  .minFontSize(10).maxFontSize(30)
  .maxLines(2)

13.copyOption

copyOption(value: CopyOptions)

设置图片是否可复制。当copyOption设置为非CopyOptions.None时，支持使用长按、鼠标右击、快捷组合键’CTRL+C’等方式进行复制。svg图片不支持复制。

当组件的参数类型为AnimatedDrawableDescriptor时设置该属性不生效。

属性名	类型	必填	说明
value	CopyOptions	是	图片是否可复制。默认值：CopyOptions.None

Text('是否可以粘贴').width(300).backgroundColor('#ddd')
  .copyOption(CopyOptions.InApp)

14.draggable

draggable(value: boolean)

设置该组件是否允许进行拖拽。

属性名	类型	必填	说明
value	boolean	是	设置该组件是否允许进行拖拽。默认值：false

Text('文本的拖拽').width(300).backgroundColor('#aaa')
  .draggable(true)//拖拽和事件一起使用
  .onDragStart(()=>{
    console.log('开始拖动')
  })

15.textIndent

textIndent(value: Dimension)

设置首行文本缩进。

属性名	类型	必填	说明
value	Dimension	是	首行文本缩进。默认值：0

Text('首行缩进啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊')
  .width(300).backgroundColor('#f0f')
  .textIndent(10)

16.wordBreak

wordBreak(value: WordBreak)

设置断行规则。WordBreak.BREAK_ALL与{overflow: TextOverflow.Ellipsis}，maxLines组合使用可实现英文单词按字母截断，超出部分以省略号显示

属性名	类型	必填	说明
value	WordBreak	是	断行规则。默认值：WordBreak.BREAK_WORD

Text('断行规则hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word ')
  .width(300).backgroundColor('#fcf').maxLines(2)
  .wordBreak(WordBreak.BREAK_WORD)
  .textOverflow({overflow:TextOverflow.Ellipsis})//超出隐藏

17.selection

selection(selectionStart: number, selectionEnd: number)

设置选中区域。选中区域高亮且显示手柄和文本选择菜单。

属性名	类型	必填	说明
selectionStart	number	是	所选文本的起始位置。默认值：-1
selectionEnd	number	是	所选文本的结束位置。默认值：-1

Text('设置选中hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word ')
  .width(300).backgroundColor('#faf').maxLines(2).copyOption(CopyOptions.InApp)//是否可以粘贴
  .selection(0,30)//选中30个

18.ellipsisMode

ellipsisMode(value: EllipsisMode)

设置省略位置。ellipsisMode属性需要配合overflow设置为TextOverflow.Ellipsis以及maxLines使用，单独设置ellipsisMode属性不生效。

属性名	类型	必填	说明
value	EllipsisMode	是	省略位置。默认值：EllipsisMode.END

Text('设置省略位置hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word hello word ')
  .width(300).backgroundColor('#fcf').maxLines(1)
  .textOverflow({overflow:TextOverflow.Ellipsis})
  .ellipsisMode(EllipsisMode.START)//设置省略位置只有单行可用

19.textSelectable

textSelectable(value: TextSelectableMode)

设置是否支持文本可选择、可获焦以及Touch后能否获取焦点

属性名	类型	必填	说明
value	TextSelectableMode	是	文本是否支持可选择、可获焦。默认值：TextSelectableMode.SELECTABLE_UNFOCUSABLE

Text('文字特性，Hello word Hello word Hello word Hello word Hello word Hello word Hello word Hello word ')
  .fontSize(20).maxLines(2).width(300)
  .lineSpacing(LengthMetrics.vp(5))//行间距
  .wordBreak(WordBreak.BREAK_WORD)
  .copyOption(CopyOptions.InApp)
  .textSelectable(TextSelectableMode.UNSELECTABLE)

20.enableDataDetecto

enableDataDetector(enable: boolean)

设置使能文本识别。

属性名	类型	必填	说明
enable	boolean	是	使能文本识别。默认值： false

21.dataDetectorConfig

dataDetectorConfig(config: TextDataDetectorConfig)

设置文本识别配置。需配合enableDataDetector一起使用，设置enableDataDetector为true时，dataDetectorConfig的配置才能生效。

属性名	类型	必填	说明
config	TextDataDetectorConfig	是	文本识别配置。默认值：{types: [ ],onDetectResultUpdate: null}

Text(
  '电话号码：1234234'+this.tel+'\n'+
    '链接：www.baidu.com'+this.ur+'\n'+
    this.em+'\n'
)
  .enableDataDetector(true)//识别
  .dataDetectorConfig({types:this.aa,onDetectResultUpdate:(a:string)=>{}})