HarmonyOS鸿蒙Next中给文字右上角加数字角标

HarmonyOS鸿蒙Next中给文字右上角加数字角标 已知用容器套两个子元素，根据具体情况来设置相应属性就可以达成效果，那么有没有更好用的办法呢？

3 回复

有的兄弟，有的！！

鸿蒙可以用控件的显示越界来实现效果，也就是用position属性。

鸿蒙中容器对子元素越界是这样规定的：

容器类型 是否支持子组件溢出 关键配置
Stack 支持 .clip(false)
List 支持 .clip(false)
RelativeContainer 支持（默认不裁剪） 无特殊配置
Row/Column 受父容器尺寸限制 需结合 layoutWeight或尺寸约束

具体实现就是，给要展示右上角数字角标的Text或者其他控件，设置position属性，然后调整他的位置，到你要的效果，最终实现数字角标。实现的时候要根据这个控件的父布局是什么，来做相应的配置。

下面贴上个简单例子：

Row({space:'8lpx'}){
  Image($r('app.media.icon_event_operations_checked'))
    .width('30lpx')
    .height('28.75lpx')

  Text('已点')
    .fontSize('24lpx')
    .fontColor(Color.White)

  Text('88')
    .borderRadius('64lpx')
    .padding({top:'4lpx',bottom:'4lpx',left:'8lpx',right:'8lpx'})
    .fontColor('#fe4f4f')
    .fontSize('20lpx')
    .fontWeight(FontWeight.Bold)
    .position({x:'75lpx',y:'-12lpx'})
    .backgroundColor(Color.White)
}
.height('60lpx')
.width('158lpx')
.borderRadius('34lpx')
.padding({left:'32lpx',right:'32lpx'})
.backgroundColor("#1ae7e7e7")

实际显示效果：

更多关于HarmonyOS鸿蒙Next中给文字右上角加数字角标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可通过Text组件结合Badge组件实现文字右上角数字角标。使用Badge的count属性设置数字，placement属性设为"topRight"定位。示例代码：

Badge({count: 5, placement: 'topRight'}) {
  Text('主文字')
}

通过maxCount控制最大显示数值，overflowCount设置超出时的替代符号。样式可通过badgeColor、textColor等属性自定义。

在HarmonyOS Next中，可以通过Badge组件轻松实现文字右上角数字角标。示例代码：

import { Badge } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Column() {
      Badge({
        count: 5,
        position: BadgePosition.RightTop,
        style: { color: '#FFFFFF', fontSize: 12, badgeSize: 20, badgeColor: '#FA2A2D' }
      }) {
        Text('消息')
          .fontSize(16)
      }
    }
  }
}

关键参数：

  • count：角标数字
  • position：位置设置，支持右上/左上等
  • style：自定义角标样式

这种方法比手动布局容器更简洁高效，支持动态更新数字和丰富的样式定制。

回到顶部