HarmonyOS 鸿蒙Next:row组件内多个Text组件文案baseLine对齐方法

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next:row组件内多个Text组件文案baseLine对齐方法

cke_991.png
尝试解决方案:

用span,但是span不支持margin

用flex父组件,但是flex会撑满一行,不能自适应文案长度

故尝试了两种方案,都没有解决我的问题,求助大神帮忙看下



关于HarmonyOS 鸿蒙Next:row组件内多个Text组件文案baseLine对齐方法的问题,您也可以访问:https://www.itying.com/category-93-b0.html 联系官网客服。

8 回复

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:https://www.bilibili.com/video/BV1S4411E7LY/?p=17

最终解决方案:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-styled-string-V5

采用属性字符串的方式来搞,完美解决。

自定义一个SpaceSpan,然后拼接在属性字符串即可。

export class SpaceSpan extends CustomSpan {
  // 实现相应逻辑即可
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

span虽然不支持margin,但是有letterSpacing属性,可以试一下

Span('¥') .letterSpacing(8)

这个操作不太行,这个的含义是每个字符的间隔。不是我span之间的间隔,会有问题。

Text() { Span(‘¥’) .letterSpacing(8) .fontSize(12) Span(this.selectMemberType + ‘’) .fontSize(16) .fontWeight(600) Span(‘元 立即购买’) .fontSize(12) } .width(‘100%’) .fontColor(’#000000’) .textAlign(TextAlign.Center)

我是这样使用的

你的使用场景比较简单。 比如下面这个case: 如果“元”和“立即购买”要求有不同的样式呢? 如果用空格当间距,怎么保证是自己要的间距呢?(因为不同的尺寸空格的大小也不一样)

设置baselineOffset属性

baselineOffset(value: number | string)

value为文本基线的偏移量。默认值:0,设置该值为百分比时,按默认值显示。

  1. //数值大于零,偏向上,数值小于零,偏向下
  2. Text('This is the text content with baselineOffset -30.')
  3. .baselineOffset(-30)

这个操作试过,但是这种操作也太局限了,每次修改字体的大小,都要手动去调整这个值,不太靠谱

回到顶部