在SwiftUI中构建带徽标的交互组件时，单纯在按钮上叠加一个Text往往会导致角标位置随父视图尺寸变化而跳动，而且数字更新缺乏连贯的视觉过渡。要实现AnimatedBadge与NotificationDot，需要从ZStack的布局规则入手，配合自定义ViewModifier和动画系统，让小红点与计数变化既稳定又富有弹性。本文会逐步给出可复用的组件代码，涵盖数字截断、弹跳动画、脉冲效果以及与实际按钮和标签栏的整合方式。
一、徽标与小红点的定位基础：ZStack和Overlay的取舍
很多SwiftUI开发者在给按钮添加角标时，第一反应是用ZStack把角标叠在右上角。ZStack虽然能直接控制层级关系，但它会让父视图的尺寸受ZStack内所有子视图影响，如果角标偏移量较大，父视图的布局空间会被意外撑大。相比之下，overlay修饰符基于原视图的原始尺寸进行叠加，不会改变父视图在父容器中的占用空间，更适合做角标定位。配合alignment参数可以轻松将角标放在角落位置。
使用overlay时，角标默认紧贴原视图边缘，要达到消息应用中常见的半悬浮效果，需要额外使用offset进行偏移。这里有一个容易忽略的细节：offset只改变视图的绘制位置，不会改变命中测试区域，所以角标如果超出了原视图边界，仍然可以响应点击。如果希望角标纯粹作为视觉提示而不拦截按钮事件，可以给角标设置allowsHitTesting(false)，避免用户点击角标时没有触发按钮动作。
extension View {
func badge(count: Int) -> some View {
overlay(alignment: .topTrailing) {
if count > 0 {
Text("\(count)")
.font(.caption2.bold())
.foregroundStyle(.white)
.padding(6)
.background(Circle().fill(.red))
.offset(x: 10, y: -10)
.allowsHitTesting(false)
}
}
}
}
对于只需要显示未读状态而不显示具体数字的小红点NotificationDot，实现方式更简单。一个固定尺寸的Circle配合阴影即可，但需要控制好点的大小和颜色，使其在浅色和深色背景下都能清晰可见。圆点角标通常放在按钮右上角，偏移量比数字角标略小，因为圆形本身视觉重量更轻。
struct NotificationDot: View {
let color: Color
var body: some View {
Circle()
.fill(color)
.frame(width: 10, height: 10)
.shadow(color: color.opacity(0.4), radius: 2, x: 0, y: 1)
.allowsHitTesting(false)
}
}
二、AnimatedBadge：让计数变化产生弹性动画
静态角标只能完成信息展示，但当未读数量变化时，直接更新Text的数字会让界面显得生硬。在iOS 16及以上版本，SwiftUI为Text提供了contentTransition(.numericText())修饰符，可以对数字变化进行滚动过渡，但这种过渡比较克制，无法实现角标常见的弹跳放大效果。若想获得更明显的交互反馈，需要借助自定义动画状态来驱动scaleEffect和数字内容的同步变化。
AnimatedBadge的核心思路是维护一个displayedCount属性作为显示值，当外部count发生变化时，通过onChange触发动画：先将角标放大到1.3倍，同时更新数字，然后在短暂延迟后回落到原始大小。这种先放大再回弹的节奏模拟了物理弹簧的响应，能让用户清晰感知到计数已经更新。为了兼容不同iOS版本，可以在此基础上增加对contentTransition的条件使用，让系统版本支持时获得更细腻的数字滚动效果。
struct AnimatedBadge: View {
let count: Int
var maxCount: Int = 99
@State private var displayedCount: Int = 0
@State private var scale: CGFloat = 1.0
var body: some View {
Text(displayedCount > maxCount ? "\(maxCount)+" : "\(displayedCount)")
.font(.caption2.bold())
.foregroundStyle(.white)
.padding(.horizontal, 7)
.padding(.vertical, 4)
.background(Capsule().fill(.red))
.scaleEffect(scale)
.contentTransition(.numericText())
.animation(.spring(response: 0.3, dampingFraction: 0.6), value: displayedCount)
.onAppear {
displayedCount = count
}
.onChange(of: count) { newValue in
withAnimation(.spring(response: 0.3, dampingFraction: 0.5)) {
scale = 1.3
displayedCount = newValue
}
withAnimation(.spring(response: 0.25, dampingFraction: 0.6).delay(0.12)) {
scale = 1.0
}
}
}
}
如果应用需要支持iOS 15或更低版本，contentTransition(.numericText())不可用，此时可以完全依赖displayedCount和scale的组合动画。另一种更复杂的做法是使用AnimatableModifier对数字进行逐帧插值，让计数从旧值连续滚动到新值，这种方案适合购物车数量、步数统计等需要数字平滑变化的场景，但实现成本较高。对于大多数消息提醒场景，AnimatedBadge的弹簧缩放已经足够。
三、NotificationDot的脉冲动画与状态控制
小红点的作用是在不打断用户操作的前提下吸引注意力，静态圆点虽然清晰，但缺乏动态引导。为NotificationDot添加脉冲动画，可以让未读状态在视觉上更突出。脉冲动画通常使用scaleEffect和opacity的组合，让圆点周期性地放大并降低不透明度，模拟声波扩散或者呼吸效果。SwiftUI中可以通过repeatForever动画实现无限循环，但要注意动画的触发和停止时机，避免在不可见视图上持续消耗性能。
实现脉冲动画时，可以设计一个PulsingDot组件，内部维护一个布尔状态pulse，在视图出现后设置为true，并配合easeInOut曲线的repeatForever动画。重复动画会自动反向执行，使圆点从放大状态回到原始状态，形成平滑的呼吸节奏。如果希望脉冲表现得更有层次，还可以叠加一个环形扩散层，让一个半透明的大圆在圆点周围由小变大并淡出，进一步增强提醒效果。
struct PulsingDot: View {
@State private var pulse = false
var body: some View {
Circle()
.fill(.red)
.frame(width: 10, height: 10)
.scaleEffect(pulse ? 1.5 : 1.0)
.opacity(pulse ? 0.4 : 1.0)
.animation(.easeInOut(duration: 0.8).repeatForever(autoreverses: true), value: pulse)
.onAppear {
pulse = true
}
}
}
在实际产品中，脉冲动画可能只需要在消息刚到达时播放几秒，然后保持静态，以节省电量并避免干扰。可以给PulsingDot增加一个isPulsing参数，当参数改变时用withAnimation控制动画启动或停止。将动画绑定到状态值上，比直接使用全局repeating动画更容易管理视图的生命周期。
四、组合到按钮与TabBar场景的完整实践
AnimatedBadge和NotificationDot最终要嵌入到实际UI组件中才能发挥作用。在自定义按钮中，通过overlay将角标叠放在SF Symbol图标右上角，配合offset实现半浮出效果。按钮点击时通常需要清空未读计数或跳转到对应页面，此时角标的消失和出现也可以增加过渡动画。使用if条件包裹角标视图时，可以给整个角标添加transition，让它在移除时缩放并淡出，而不是瞬间消失。
struct BadgeButton: View {
@Binding var unreadCount: Int
let systemImage: String
var body: some View {
Button {
unreadCount = 0
} label: {
Image(systemName: systemImage)
.font(.title2)
.frame(width: 44, height: 44)
.overlay(alignment: .topTrailing) {
if unreadCount > 0 {
AnimatedBadge(count: unreadCount)
.offset(x: 8, y: -8)
.transition(.scale.combined(with: .opacity))
}
}
}
.accessibilityLabel("消息，未读\(unreadCount)条")
}
}
在TabBar场景中，原生TabView的badge功能在SwiftUI中仍有局限，尤其是自定义标签栏样式时，原生角标无法完全满足设计需求。这时可以通过重写tab item，将BadgeButton或PulsingDot作为每个标签的装饰视图。数据层面，可以将未读计数集中在一个ObservableObject中，各标签页订阅对应计数，这样角标能够在任意页面更新时自动刷新，同时触发AnimatedBadge的弹跳动画。
对于需要展示消息列表的场景，可以在List行尾添加NotificationDot，或者使用AnimatedBadge显示会话未读条数。一个常见的设计是数字超过99时显示99+，AnimatedBadge内部已经通过maxCount参数处理了这种截断逻辑。需要特别注意角标在不同字体缩放设置下的表现，建议使用相对尺寸和最小可点击区域，保证可访问性。将角标与按钮的accessibilityLabel合并，让VoiceOver能够朗读完整信息，也是不可忽视的细节。
通过上述实现，AnimatedBadge与NotificationDot不再是孤立的视觉元素，而是能够与SwiftUI动画系统、布局机制和可访问性特性协同工作的组件。开发者可以根据自己的产品风格调整弹簧参数、颜色和脉冲节奏，快速搭建出稳定且富有生命力的消息提醒交互。