HarmonyOS 鸿蒙Next 文本怎么实现前加标签,目前我看只支持背景,无支持描边

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

HarmonyOS 鸿蒙Next 文本怎么实现前加标签,目前我看只支持背景,无支持描边

textBackgroundStyle 仅支持背景颜色和圆角,无法支持描边

2 回复

可以参考demo:

@Entry

@Component

struct Index {

  @State message: string = 'Hello World';

  build() {

     Row(){

       ImageSpan($r('app.media.ic_public_play_norm'))

         .width(20)

       Text('95新')

         .border(

           {

             width:{

               left:2

             }

           }

         )

     }

     .width(60)

     .margin(

       {

         left:50

       }

     )

    .border(

      {

        width:1,

      }

    )

  }

}

目前span无法单独设置边框,可考虑使用text配合stack,以及配合测量文字宽度实现:

@Entry
@Component
struct Example {
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Text('123').fontSize(20).textIndent(20 + 150).width(300)
      Text('999')
        .fontSize(20)
        .width(150)
        .margin({ left: 10 })
        .padding({ left: 10 })
        .border({ width: 1, color: Color.Red, radius: 10 })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 文本怎么实现前加标签,目前我看只支持背景,无支持描边的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中,对于文本添加标签或描边效果,虽然原生组件可能未直接提供该功能,但可以通过一些编程技巧来实现类似效果。

一种常见的方法是使用自定义绘制。你可以通过Canvas类在文本周围绘制描边。这通常涉及以下几个步骤:

  1. 创建自定义组件:继承一个基础组件(如Text),在其onDraw方法中实现自定义绘制逻辑。
  2. 计算文本边界:使用Paint类的getTextBounds方法获取文本的边界矩形。
  3. 绘制描边:根据计算出的边界矩形,使用稍大或稍小的尺寸和不同的颜色绘制一个或多个矩形作为描边。
  4. 绘制文本:在描边内部绘制实际文本。

需要注意的是,这种方法可能需要你对Canvas绘图有较为深入的理解,包括颜色、路径、画笔等属性的设置。

另外,你也可以考虑使用图片资源来实现类似效果,即在文本周围添加一个带有描边的图片,然后将其与文本组合显示。

如果上述方法对你来说仍然难以实现,或者你在操作过程中遇到具体问题,可以直接联系官网客服获取更专业的帮助。官网地址是:https://www.itying.com/category-93-b0.html

回到顶部