HarmonyOS 鸿蒙Next：Span不能设置Margin，怎么办，有什么替代方案吗？

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

HarmonyOS 鸿蒙Next：Span不能设置Margin，怎么办，有什么替代方案吗？

Span不能设置Margin，怎么办，有什么替代方案吗？


关于HarmonyOS 鸿蒙Next：Span不能设置Margin，怎么办，有什么替代方案吗？的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。

Harmonyos Next教程
7 回复

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

没好办法，有一些特定场景可用的办法。

【1】Span内容加空格，Span(" 测试 "),缺点是只能左右添加间距，且间距以空格宽度为单位。

【2】RichText如果你的背景色是白色，可以把文字设置成白色通过调整字号来充当间距，缺点写起来麻烦，且不支持预览器，要模拟器或真机才能看效果

【3】Web,把当前页完全用h5逻辑去写，间距不是问题，甚至arkts实现不了的样式h5都能实现。缺点写起来麻烦，且不支持预览器，要模拟器或真机才能看效果

有没有什么操作可以自己实现一个可以设置宽度、高度和margin的span，同时也能作为Text的子组件。

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

有个RenderNode，可以放到Button里，通过x y坐标可以实现margin，不过计算量比较大，写起来挺费事的。参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-user-defined-arktsnode-rendernode-V5

HarmonyOS的流畅动画和过渡效果让操作更加顺畅，体验极佳。

最终解决方案：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>
回到顶部