ArkUI-Text/Span 详解
@Entry
@Component
struct TextDemo {
build() {
Column({space: 16}) {
Text('我是文本Text组件')
// 引用Resource资源。
// 资源引用类型可以通过$r创建Resource类型对象
// 文件位置为/resources/base/element/string.json。
Text($r('app.string.my_text'))
// 设置基线偏移量。
.baselineOffset(5)
// 设置字体
.fontSize(20)
.fontStyle(FontStyle.Italic)
.fontWeight(FontWeight.Medium)
// 边框设置
.border({ width: 1 })
.borderColor(Color.Red)
.borderRadius(20)
// 边距设置
.padding(5)
// 宽度设置
.width(200)
// Span只能作为Text和RichEditor组件的子组件显示文本内容。
// 可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。
//
// 创建Span。
// Span组件需要写到Text组件内，单独写Span组件不会显示信息
// Text与Span同时配置文本内容时，Span内容覆盖Text内容。
Text('显示text') {
Span('显示 Span')
}
.padding(8)
.fontColor(Color.White)
.fontSize(20)
.backgroundColor(Color.Red)
.borderRadius(10)
// 设置文本装饰线及颜色。
// 通过decoration设置文本装饰线及颜色。
Text() {
Span('我是一名保安，')
.fontSize(16)
.fontColor(Color.Grey)
.decoration({ type: TextDecorationType.LineThrough, color: Color.Orange })
Span('保卫一方平安')
.fontColor(Color.Red)
.fontSize(16)
.fontStyle(FontStyle.Italic)
.decoration({ type: TextDecorationType.Underline, color: Color.Black })
Span('，最爱吃小熊饼干')
.fontSize(16)
.fontColor(Color.Blue)
.decoration({ type: TextDecorationType.Overline, color: Color.Red })
}
.maxLines(3)
.borderWidth(1)
.padding(10)
// 通过textCase设置文字一直保持大写或者小写状态。
Text() {
Span('I\'m a security guard')
.fontSize(12)
.textCase(TextCase.UpperCase)
}
.borderWidth(1)
.borderRadius(8)
.borderColor(Color.Red)
.padding(12)
// 添加事件。
// 由于Span组件无尺寸信息，事件仅支持添加点击事件onClick。
Text() {
Span('Keep one side safe')
.fontSize(12)
.textCase(TextCase.UpperCase)
.onClick(()=>{
console.info('我是一名保安，保卫一方平安')
})
}
.borderWidth(1)
.borderRadius(8)
.borderColor(Color.Red)
.padding(12)
// 自定义Text的Modifier
Text('自定义Text的Modifier')
.attributeModifier(new MyTextModifier())
// 自定义文本样式
// 通过textAlign属性设置文本对齐样式。
// 头部对齐（效果居左对齐）
Text('我是一名保安')
.textAlign(TextAlign.Start)
.attributeModifier(new MyTextModifier())
// 居中对齐
Text('保卫一方平安')
.fontSize(18)
.textAlign(TextAlign.Center)
.attributeModifier(new MyTextModifier())
// 尾部对齐（效果居右对齐）
Text('喜欢业主小丹')
.fontSize(20)
.fontColor(Color.Red)
.textAlign(TextAlign.End)
.attributeModifier(new MyTextModifier())
.padding(10)
// 通过textOverflow属性控制文本超长处理
// textOverflow需配合maxLines一起使用（默认情况下文本自动折行）。
// 自动折行
Text('我是一名保安，保卫一方平安，最爱吃小熊饼干，喜欢业主小丹。')
.attributeModifier(new MyTextModifier())
.textOverflow({ overflow: TextOverflow.None })
.maxLines(1)
.fontSize(12)
// 尾部截取...
Text('我是一名保安，保卫一方平安，最爱吃小熊饼干，喜欢业主小丹。')
.attributeModifier(new MyTextModifier())
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
.fontSize(12)
// 跑马灯效果
Text('我是一名保安，保卫一方平安，最爱吃小熊饼干，喜欢业主小丹。')
.attributeModifier(new MyTextModifier())
.textOverflow({ overflow: TextOverflow.MARQUEE })
.maxLines(1)
.fontSize(12)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Center)
}
}