HarmonyOS 鸿蒙Next 如何解决使用px2vp将px转换为vp后长度不正确的问题 鸿蒙场景化案例

HarmonyOS 鸿蒙Next 如何解决使用px2vp将px转换为vp后长度不正确的问题 鸿蒙场景化案例

【问题现象】

使用measure.measureText获取文本的长度，返回单位是px，获取结果后再用px2vp转换成vp使用，结果发现转换后的结果长度并不等于真实的文本长度，导致无法实现将一个元素Text定位到父级元素的右边。

【背景知识】

• 组件的组合搭配出现在如今的互联网应用软件或者页面中十分常见，它能通过为主组件通过添加附属组件的方式添加更多的信息。如常见的消息气泡：

• 在鸿蒙端提供其他单位与px单位互相转换的方法，同时提供measure计算文本单行布局下长度（返回值为px）的方法。

【定位思路】

我们可以通过measure计算主组件中文本单行布局的长度，以此来确定偏移量，实现主副组件紧邻的搭配效果。如果是偏移量计算有误，则可能会出现元素位置不精准的问题。

【解决方案】

（1）通过measure计算主组件以及副组件中文本单行布局的长度。

代码示例如下：

@State titleSize: SizeOptions = measure.measureTextSize({
    textContent: this.textTitle,
    fontSize: '30vp'
  })

@State numberSize : SizeOptions = measure.measureTextSize({
       textContent: this.textNumber,
       fontSize: '15vp'
     })

（2）使用RelativeContainer将副组件叠放在主组件上，并通过alignRules进行一侧对齐。

代码示例如下：

RelativeContainer() {
        //主组件UI
        Row(){
          Text(this.textTitle).fontSize('30vp')
        }
        .backgroundColor("#FFCC00")
        .id("row1")
        //副组件UI
        Row(){
          Text(this.textNumber).fontSize('15vp').textAlign(TextAlign.Start).maxLines(1)
        }
        .backgroundColor(Color.Green)
        .alignRules({
          top: {anchor: "__container__", align: VerticalAlign.Top},
          right: {anchor: "__container__", align: HorizontalAlign.End}
        })
        .id("row2")
      }
      .width(px2vp(this.titleSize.width as number)).height(px2vp(this.titleSize.height as number))

代码实现效果如下：

（3）通过offset属性将副组件向目标侧平移，平移长度为副组件文本单行布局的长度。

代码示例如下：

Row(){
  Text(this.textNumber).fontSize('15vp').textAlign(TextAlign.Start).maxLines(1);
}
.backgroundColor(Color.Green)
.alignRules({
  top: {anchor: "__container__", align: VerticalAlign.Top},
  right: {anchor: "__container__", align: HorizontalAlign.End}
})
.offset({
  x:px2vp(this.numberSize.width as number),
  y:0
})
.id("row2")

代码实现效果如下：

【总结】

px2vp将px转换为vp本身不会造成偏差，想要保证元素组件的精准定位，常规操作：

（1）RelativeContainer将元素组件和父组件放在同一空间。

（2）通过.alignRules属性将元素进行侧边对齐。

（3）通过元素组件的offset属性添加偏移量（通过measure元素组件内容的长度决定）实现元素组件置于父组件侧边。