前言
属性字符串StyledString/MutableStyledString(MutableStyledString继承于StyledString,以下统一简称StyledString)是功能强大的标记对象,可用于字符或段落级别设置文本样式。通过将StyledString附加到文本组件, 可以通过多种方式更改文本,包括修改字号、添加字体颜色、使文本可点击以及自定义方式绘制文本等。具体用法可参考StyledString。
属性字符串提供多种类型样式对象,涵盖各种常见的文本样式格式。也可以自行创建CustomSpan, 以应用自定义样式。
创建并应用StyledString和MutableStyledString
可以通过TextController提供的setStyledString(StyledString)方法将属性字符串附加到文本组件,并推荐在onPageShow中触发绑定,在aboutToAppear中调用setStyledString无法实现页面初始即可见属性字符串文本内容,因为aboutToAppear运行时组件还没有完成创建并成功挂载节点树。
@Entry
@Component
struct styled_string_demo1 {
styledString1: StyledString = new StyledString("运动45分钟");
mutableStyledString1: MutableStyledString = new MutableStyledString("运动35分钟");
controller1: TextController = new TextController();
controller2: TextController = new TextController();
async onPageShow() {
this.controller1.setStyledString(this.styledString1)
this.controller2.setStyledString(this.mutableStyledString1)
}
build() {
Column() {
// 显示属性字符串
Text(undefined, { controller: this.controller1 })
Text(undefined, { controller: this.controller2 })
}
.width('100%')
}
}
设置文本样式
属性字符串目前提供了TextStyle、TextShadowStyle、DecorationStyle、BaselineOffsetStyle、LineHeightStyle、LetterSpacingStyle各种Style对象来实现设置文本的各类样式。
- 创建及应用文本字体样式对象(TextStyle)
import { LengthMetrics } from '@kit.ArkUI'
@Entry
@Component
struct styled_string_demo2 {
textStyleAttrs: TextStyle = new TextStyle({ fontWeight: FontWeight.Bolder, fontSize: LengthMetrics.vp(24), fontStyle: FontStyle.Italic })
mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟 目标达成", [
{
start: 2,
length: 2,
styledKey: StyledStringKey.FONT,
styledValue: this.textStyleAttrs
},
{
start: 7,
length: 4,
styledKey: StyledStringKey.FONT,
styledValue: new TextStyle({ fontColor: Color.Orange, fontSize: LengthMetrics.vp(12)})
}
]);
controller: TextController = new TextController();
async onPageShow() {
this.controller.setStyledString(this.mutableStyledString)
}
build() {
Column() {
// 显示属性字符串
Text(undefined, { controller: this.controller })
.margin({ top: 10 })
}
.width('100%')
}
}
- 创建及应用文本阴影对象(TextShadowStyle)
// xxx.ets
@Entry
@Component
struct styled_string_demo3 {
mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟", [
{
start: 0,
length: 3,
styledKey: StyledStringKey.TEXT_SHADOW,
styledValue: new TextShadowStyle({
radius: 5,
type: ShadowType.COLOR,
color: Color.Red,
offsetX: 10,
offsetY: 10
})
}
]);
controller: TextController = new TextController();
async onPageShow() {
this.controller.setStyledString(this.mutableStyledString)
}
build() {
Column() {
// 显示属性字符串
Text(undefined, { controller: this.controller })
}
.width('100%')
}
}
- 创建及应用文本装饰线对象(DecorationStyle)
// xxx.ets
@Entry
@Component
struct styled_string_demo4 {
mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟", [
{
start: 0,
length: 3,
styledKey: StyledStringKey.DECORATION,
styledValue: new DecorationStyle({type: TextDecorationType.LineThrough, color: Color.Red})
}
]);
controller: TextController = new TextController();
async onPageShow() {
this.controller.setStyledString(this.mutableStyledString)
}
build() {
Column() {
// 显示属性字符串
Text(undefined, { controller: this.controller })
}
.width('100%')
}
}
- 创建及应用文本基线偏移量对象(Baseli