SwiftUI如何实现圆角矩形边角叠加圆形图片的UI效果

这类控件没有苹果官方的专属命名，业内通常称其为角标叠加卡片，多用于日程提醒、联系人入口、商品提示等场景，RTL语言环境下只需要将圆形控件的位置从左上角切换到右上角即可适配。

参考效果示例：


你当前实现的裁剪异常效果：

你遇到的裁剪问题本质是布局层级错误：你将圆形控件放在了卡片内部的VStack中，再通过offset修改位置，此时圆形控件属于卡片VStack的子视图，SwiftUI容器默认会裁剪超出父视图布局边界的子内容，自然会把露在卡片外面的半圆裁掉。

不要把圆形控件嵌套在卡片内容布局里，正确的结构是用ZStack将卡片主体和圆形控件作为平级容器，对齐到卡片左上角，同时给卡片顶部预留等于圆形半径的内边距，既不会出现裁剪，也不会让圆形遮挡卡片顶部的文字内容。
可直接复用的实现代码如下：

struct BadgeOverlayCard: View {
    // 圆形角标配置
    private let badgeDiameter: CGFloat = 30
    private var badgeRadius: CGFloat { badgeDiameter / 2 }
    
    var body: some View {
        // ZStack对齐左上角，RTL适配可切换为.topTrailing
        ZStack(alignment: .topLeading) {
            // 底层：圆角卡片主体
            VStack(spacing: 8) {
                // 顶部预留透明占位，避免内容被角标遮挡
                Color.clear.frame(height: badgeRadius)
                Text("June 27, 2022")
                    .lineLimit(2)
                    .font(.headline)
                    .foregroundColor(.white)
                Spacer()
                Text("4:30 PM - 7:30 PM")
                    .lineLimit(2)
                    .font(.subheadline)
                    .foregroundColor(.white.opacity(0.8))
                Divider().background(.white.opacity(0.3))
            }
            .padding(12)
            .frame(maxWidth: .infinity)
            .background(Color(red: 34/255, green: 34/255, blue: 34/255))
            .cornerRadius(10)
            // 卡片顶部加内边距，给露出的角标留出布局空间，彻底避免裁剪
            .padding(.top, badgeRadius)
            
            // 顶层：圆形角标控件
            ZStack {
                Circle()
                    .foregroundColor(.white)
                    .shadow(radius: 4)
                Image(systemName: "plus.circle.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding(4)
                    .foregroundColor(.purple)
            }
            .frame(width: badgeDiameter, height: badgeDiameter)
            .padding(.leading, 16)
        }
        .padding(.horizontal, 16)
    }
}

如果不想手动封装，可选用成熟的开源组件直接实现：

• 通用角标卡片场景：可使用SwiftUI生态下的BadgeCard组件，自带角标位置自动适配、阴影、RTL翻转能力
• 头像类角标场景：直接用Kingfisher加载网络图片，设置圆形裁剪后按上述布局逻辑放置即可，不需要额外依赖重型组件

• 禁止将角标控件嵌套在卡片内部的VStack/HStack中做偏移，只要角标是卡片的子视图，超出边界就有被裁剪的风险
• 角标必须和卡片主体平级放在ZStack下，作为ZStack的子视图而非卡片的子视图
• 卡片顶部必须预留等于角标半径的空白空间，避免角标遮挡卡片顶部的文字、按钮等交互内容
• RTL适配不需要改动核心布局，只需要将ZStack的对齐方式从topLeading切换为topTrailing即可，也可通过flipsForRightToLeftLayoutDirection(true)实现自动翻转。

内容的提问来源于stack exchange，提问作者tech_human