问题
Text部分字体变色,在应用中处理是很常见的操作。 RichText富文本组件,解析并显示HTML格式文本,通HTML实现,但是这个不太好用,在跟其他组件一起使用时自适应宽高的时候很难处理,要么就给固定宽高还可以。
解决方式
目前我的处理方式是:Text要显示的string做切割,然后用ForEach在Text中加Span组件,在Span组件中对文字做相应的特殊处理,这样可保证Text属性的延续,又可以处理各种特殊情况,就是拆分、计算等比较麻烦。
示例,高亮显示代码如下
export class StringUtils {
public static readonly REGEX_B_S = "<B>"
public static readonly REGEX_B_E = "</B>"
/**
* 获取高亮字符串列表
* @param str 原始字符串
*/
public static getHlList(str ?: string, regex ?: string): HlContent[] {
if (str == undefined) {
return []
}
let list: HlContent[] = []
if (regex == undefined || !str.includes(regex)) {
let content = new HlContent()
content.content = str
list.push(content)
return list
}
if (StringUtils.REGEX_B_S == regex) {
let splitStr: string[] = str.split(regex)
for (let i = 0; i < splitStr.length; i++) {
let temp = StringUtils.getHlList(splitStr[i], StringUtils.REGEX_B_E)
if (temp != null && temp.length > 0) {
list = list.concat(temp)
}
}
}
if (StringUtils.REGEX_B_E == regex) {
let content1 = new HlContent()
content1.isHl = true
content1.content = str.substring(0, str.indexOf(regex))
list.push(content1);
let startIndex = str.indexOf(regex) + StringUtils.REGEX_B_E.length
let endIndex = str.length
if (startIndex < endIndex) {
let content2 = new HlContent()
content2.content = str.substring(startIndex, endIndex)
list.push(content2);
}
}
return list
}
}
export class HlContent {
content: string = ""
isHl: boolean = false
}
import { HlContent, StringUtils } from './StringUtils';
@Entry
@Component
struct Index {
@State text : string = '测试一下<B>高亮</B>其他位置再来一个<B>高亮</B>'
build() {
Column(){
Text(){
ForEach(StringUtils.getHlList(this.text, StringUtils.REGEX_B_S), (item: HlContent) => {
if (item != null && item.content != null && item.content.length > 0) {
if (item.isHl) {
Span(item.content).fontColor("#ffff4500")
} else {
Span(item.content).fontColor("#ff000000")
}
}
})
}.fontSize(18).textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1).fontWeight(FontWeight.Bold).margin({top:8})
}
}
}
总结
示例中只是一种情况的处理,可自行根据需求特殊处理。
网友评论