HarmonyOS鸿蒙Next中是否有组件可以实现斜角标签的效果

HarmonyOS鸿蒙Next中是否有组件可以实现斜角标签的效果 【问题描述】：请问下是否有直接可用的组件实现下图中的‘免费’标签效果

【问题现象】：

cke_4340.png

【版本信息】：不涉及

【复现代码】：不涉及

【尝试解决方案】：不涉及


更多关于HarmonyOS鸿蒙Next中是否有组件可以实现斜角标签的效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

这种非标组件最好自己封装，

更多关于HarmonyOS鸿蒙Next中是否有组件可以实现斜角标签的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你可以自己封装一个绿条条，然后把这个组件放在外面listItem的右上角（通过offset和旋转属性），然后把外面listItem的.Cilp（true）属性设置一下就能实现这个效果

HarmonyOS Next中可通过@ohos/graphicUI模块的Badge组件实现斜角标签效果。该组件支持设置位置偏移量、颜色和文本内容，通过调整BadgePosition枚举值与offset参数可控制标签显示在容器右上角等位置。开发者需在ArkTS中导入组件并配置参数，无需依赖Java或C语言实现。

在HarmonyOS Next中，可以通过自定义组件实现斜角标签效果。系统未提供直接的内置组件，但可以使用Canvas或Shape结合布局属性快速构建。

推荐实现方案：

  1. 使用Shape容器设置背景色
  2. 通过rotate变换实现斜角效果
  3. 配合padding和margin调整文字位置

示例代码框架：

@Component
struct DiagonalTag {
  build() {
    Shape() {
      Text('免费')
        .fontSize(12)
        .fontColor(Color.White)
    }
    .rotate({ angle: -45 })
    .backgroundColor('#FF3366')
    .padding(10)
  }
}

可通过调整rotate角度值和背景色参数来适配不同设计需求。这种实现方式在性能和维护性上都有较好表现。

回到顶部