HarmonyOS 鸿蒙Next 如何解决Text组件含有多种字符时两端对齐间距大小不一致问题 鸿蒙场景化案例

HarmonyOS 鸿蒙Next 如何解决Text组件含有多种字符时两端对齐间距大小不一致问题 鸿蒙场景化案例

【问题现象】

使用TextAlign.Justify或TextAlign.Start均未实现两端对齐的效果，不同字符间距大小不一。如图：

【背景知识】

Text组件中的TextAlign与WordBreak相关部分如下：

1. TextAlign属性和描述

2. WordBreak属性和描述

【解决方案】

中文字符必定是全角字符，但数字英文特殊字符等存在全角和半角两种格式，一般情况下数字英文特殊字符等都会简化半角格式，这些字符只有在作为文本处理时会出现会产生格式问题，使用断行规则可以自动将其转成半角。

当使用TextAlign.JUSTIFY或TextAlign.Start无法达到两端对齐时，可以搭配设置断行规则wordBreak来实现对应效果。

WordBreak.BREAK_ALL与TextAlign.JUSTIFY组合使用可实现英文单词按字母截断，汉字按字截断，方便控制间距。

代码示例如下：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) text: string = ''
  build() {
    Text('测试Test测试123456789!@#$%-测试Test测试123456789!@#$%-测试Test测试123456789!@#$%-测试Test测试123456789!@#$%-测试Test测试123456789!@#$%')
      .width('100%')
      .textAlign(TextAlign.JUSTIFY)
      .backgroundColor(Color.Red)
      .wordBreak(WordBreak.BREAK_ALL)//配合TextAlign.JUSTIFY实现两端对齐，解决间距大小不一的问题
      .fontSize(16)
  }
}

【总结】

文字对齐，不仅仅可以用单参数实现，有时候可以通过两个参数组合实现一个对齐效果。