文章目录组件功能概述核心 API 与参数1. Badge 组件扩展配置外描边 文本避让2. 关键工具类/枚举代码分段解析1. 状态变量定义2. Badge 核心配置外描边 文本避让3. 交互按钮切换文本避让状态4. 整体布局效果展示总结组件功能概述本示例基于 HarmonyOS ArkTS 实现了 Badge 标记组件的两大核心自定义能力为 Badge 标记添加自定义样式的外描边边框颜色、宽度控制 Badge 文本超出标记尺寸时的自动避让延伸行为。通过交互按钮可切换文本避让开关状态直观展示不同配置下的视觉效果适用于需要个性化标记样式、适配长文本展示的场景如多位数数字标记、自定义风格角标等。核心 API 与参数1. Badge 组件扩展配置外描边 文本避让参数/样式属性类型说明outerBorderColorColor外描边颜色示例中设置为粉色Color.PinkouterBorderWidthLength外描边宽度示例中通过LengthMetrics.vp(5)设为 5vpenableAutoAvoidanceboolean是否开启文本自动避让-false文本超出 Badge 尺寸时被截断/挤压-true文本超出时自动向外侧延伸展示badgeSizenumberBadge 标记基础尺寸宽高示例中设为 30vpfontSizenumberBadge 内部文本字号示例中设为 20vppositionBadgePositionBadge 相对于子组件的位置示例中为RightTop右上directionDirection文本延伸方向示例中为Ltr从左到右2. 关键工具类/枚举LengthMetrics.vp()将数值转换为 vp 单位鸿蒙自适应尺寸单位保证多设备适配BadgePosition.RightTopBadge 显示在子组件的右上角Direction.Ltr文本延伸方向为从左到右默认Color.Pink鸿蒙内置颜色常量也可自定义十六进制颜色如#FFC0CB。代码分段解析1. 状态变量定义State badgeValue: string 1234; // Badge 显示的文本内容长文本用于测试延伸效果 State textAvoid:boolean[] [false, true]; // 文本避让开关状态列表 State textAvoidIndex: number 0; // 切换状态的索引 State textAvoidString: string [] [false, true]; // 状态对应的文本展示值说明badgeValue: 1234选择4位数字超出 Badge 基础尺寸30vp可直观体现文本避让效果textAvoid数组存储两种开关状态通过textAvoidIndex切换实现交互演示。2. Badge 核心配置外描边 文本避让Badge({ value: this.badgeValue, style: { badgeSize : 30, // 标记基础尺寸30vp fontSize:20, // 文本字号20vp接近标记尺寸易触发超出场景 outerBorderColor : Color.Pink, // 外描边颜色粉色 outerBorderWidth : LengthMetrics.vp(5), // 外描边宽度5vp enableAutoAvoidance : this.textAvoid[this.textAvoidIndex] // 文本避让开关动态切换 }, position:BadgePosition.RightTop // 标记显示在子组件右上角 }) { // 子组件示例图片需替换为开发者自有资源 Image($r(app.media.startIcon)) .width(80) .height(80) } .direction(Direction.Ltr) // 文本延伸方向从左到右 .margin({ top: 20, bottom: 20 })核心配置说明外描边样式outerBorderColor outerBorderWidth组合实现粉色粗描边让 Badge 标记更醒目适配个性化UI设计文本避让enableAutoAvoidance绑定动态状态false时“1234”文本会因超出 30vp 标记尺寸被挤压/截断true时文本自动向右延伸展示完整内容位置与方向RightTop保证标记在图片右上角Direction.Ltr定义文本延伸方向为从左到右。3. 交互按钮切换文本避让状态Button(enableAutoAvoidance this.textAvoidString[this.textAvoidIndex]) .onClick(() { // 点击切换索引循环切换 false/true 状态 this.textAvoidIndex (this.textAvoidIndex 1) % this.textAvoidString.length; })说明按钮文本实时显示当前enableAutoAvoidance状态点击事件通过取模运算实现textAvoidIndex在 0/1 之间循环从而切换文本避让开关。4. 整体布局build() { Column() { // Badge 组件区域 ... // 交互按钮区域 ... } .width(100%) .height(80%) .alignItems(HorizontalAlign.Center) // 水平居中 .justifyContent(FlexAlign.Center) // 垂直居中 }说明整体采用 Column 纵向布局将 Badge 和按钮居中展示保证视觉聚焦便于查看状态切换效果。效果展示enableAutoAvoidance状态效果描述false默认Badge 标记为 30vp 粉色描边5vp方块“1234”文本因字号 20vp 超出尺寸被挤压在标记内部分字符可能截断trueBadge 标记基础尺寸不变“1234”文本自动向右延伸完整展示所有字符描边跟随文本延伸区域适配效果运行如图点击按钮变为true总结资源替换示例中$r(app.media.startIcon)需替换为开发者项目内的图片资源如本地 svg/png 格式否则会导致图片加载失败尺寸适配badgeSize和fontSize需合理搭配建议文本字号不超过标记尺寸的 70%避免未开启避让时文本过度挤压描边宽度outerBorderWidth不宜设置过大如超过 10vp否则会覆盖 Badge 内部文本影响可读性延伸方向direction(Direction.Ltr)仅控制文本延伸方向需结合position如 RightTop/RightBottom选择避免延伸方向与父组件重叠状态切换textAvoidIndex取模运算% this.textAvoidString.length保证索引不越界是循环切换状态的通用写法。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力