Text是文本组件，通常用于展示用户视图，如显示文章的文字。具体用法请参考Text。
创建文本
- string字符串
Text('string文本')
- 引用Resource资源
资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json；/resources/zh_CN/element/string.json 语言包里可重写上面json文件
Text($r('app.string.module_desc'))
添加子组件
Span只能作为Text和RichEditor组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。
- 创建Span。
Span组件需要写到Text组件内，单独写Span组件不会显示信息，Text与Span同时配置文本内容时，Span内容覆盖Text内容。
Text('不会显示的文本'){
Span("文本")
}.backgroundColor(Color.Red)
- 设置文本装饰线及颜色。
通过decoration设置文本装饰线及颜色。
Text(){
Span('span1').decoration({
type: TextDecorationType.LineThrough, // 删除线
color: Color.Red
})
}
Text(){
Span('span1').decoration({
type: TextDecorationType.Underline, // 下划线
color: Color.Red
})
}
Text(){
Span('span1').decoration({
type: TextDecorationType.Overline, // 上划线
color: Color.Red
})
}
- 通过textCase设置文字一直保持大写或者小写状态。
Text(){
Span("i am SM").textCase(TextCase.LowerCase) // 小写
}
Text(){
Span("i am SM").textCase(TextCase.UpperCase) // 大写
}
- 添加事件。
由于Span组件无尺寸信息，事件仅支持添加点击事件onClick。
Text(){
Span('点击').onClick(()=>{
console.log('点击');
})
}
自定义文本样式
- 通过textAlign属性设置文本对齐样式。
Text('左对齐').textAlign(TextAlign.Start).width(300).backgroundColor(Color.Red)
Text('居中对齐').textAlign(TextAlign.Center).width(300).backgroundColor(Color.Red)
Text('靠右对齐').textAlign(TextAlign.End).width(300).backgroundColor(Color.Red)
- 通过textOverflow属性控制文本超长处理，textOverflow需配合maxLines一起使用（默认情况下文本自动折行）。
Text('sdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdf')
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(2)
- 通过lineHeight属性设置文本行高。
Text('sdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdf')
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(2)
.lineHeight(30)
- 通过decoration属性设置文本装饰线样式及其颜色。
Text('删除线').decoration({
type: TextDecorationType.LineThrough,
color: Color.Red
})
Text('下划线').decoration({
type: TextDecorationType.Underline,
color: Color.Red
})
Text('上划线').decoration({
type: TextDecorationType.Overline,
color: Color.Red
})
- 通过baselineOffset属性设置文本基线的偏移量。
Text('This is the text content with baselineOffset 0.')
.baselineOffset(-10)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
.margin(5)
- 通过letterSpacing属性设置文本字符间距。
Text('sadfasdfaasdfas')
.letterSpacing(10)
- 通过copyOption属性设置文本是否可复制粘贴。
Text('sadfasdfaasdfas')
.letterSpacing(10)
.copyOption(CopyOptions.InApp)
-- 添加事件
Text('sadfasdfaasdfas')
.letterSpacing(10)
.copyOption(CopyOptions.InApp)
.onClick((e)=>{
console.log('被点击');
})
- 添加边框
Text('添加边框')
.border({
width: 2,
color: Color.Red,
style: BorderStyle.Dotted
})
Text('添加左右边框')
.border({
width: {
left: 1,
right: 2
},
color:{
left: Color.Red,
right: Color.Blue
},
style: {
left: BorderStyle.Dotted,
right: BorderStyle.Solid
}
})
- 设置圆角
Text('圆角').border({
color: Color.Red,
style: BorderStyle.Solid,
width: 1
}).width(100).textAlign(TextAlign.Center)
.borderRadius(20)
Text('圆角').border({
color: Color.Red,
style: BorderStyle.Solid,
width: 1
}).width(100).textAlign(TextAlign.Center)
.borderRadius({
topLeft: 10,
bottomRight: 10
})
Text("圆形")
.width(100).height(100)
.border({
color: Color.Red,
style: BorderStyle.Solid,
width: 1
}).textAlign(TextAlign.Center)
.borderRadius(50)
- 背景图
Text('背景图')
.width(100).height(100)
.backgroundColor(Color.Red)
.backgroundImage($r('app.media.app_icon'), ImageRepeat.NoRepeat)
.backgroundImagePosition({
x: 10,
y: 20
})
// .backgroundImagePosition(Alignment.Center) // 居中
.backgroundImageSize(ImageSize.Contain)
