如何在SwiftUI中为文本创建6个不同颜色和大小的环绕圆形？

直接用可控的参数定义每个圆环，替代随机值，就能精准实现你要的效果。以下是完整代码：

struct CircleItem {
    let color: Color
    let radius: CGFloat
    let angle: Angle
    let lineWidth: CGFloat
}

struct SurroundingCirclesView: View {
    // 按需求配置6个指定颜色的圆环参数
    private let circleItems: [CircleItem] = [
        CircleItem(color: .yellow, radius: 120, angle: .degrees(0), lineWidth: 12),
        CircleItem(color: .red, radius: 90, angle: .degrees(60), lineWidth: 10),
        CircleItem(color: .blue, radius: 110, angle: .degrees(120), lineWidth: 8),
        CircleItem(color: .orange, radius: 80, angle: .degrees(180), lineWidth: 14),
        CircleItem(color: .cyan, radius: 100, angle: .degrees(240), lineWidth: 9),
        CircleItem(color: .purple, radius: 130, angle: .degrees(300), lineWidth: 7)
    ]
    
    var body: some View {
        ZStack {
            // 中心文本
            Text("Welcome to SwiftUI")
                .font(.title)
                .fontWeight(.bold)
            
            // 生成环绕的圆环
            ForEach(circleItems.indices, id: \.self) { index in
                let item = circleItems[index]
                Circle()
                    .stroke(item.color, lineWidth: item.lineWidth)
                    .frame(width: item.radius, height: item.radius)
                    .offset(y: -item.radius / 2)
                    .rotationEffect(item.angle)
            }
        }
        .frame(width: 300, height: 300)
    }
}

// 预览视图
struct SurroundingCirclesView_Previews: PreviewProvider {
    static var previews: some View {
        SurroundingCirclesView()
    }
}

关键说明： #

• 用CircleItem结构体统一管理每个圆环的颜色、大小、角度和线宽，方便随时调整参数匹配设计样式
• ZStack实现层叠布局，确保文本始终在圆环上层
• 每个圆环先通过offset(y: -item.radius/2)将圆心移到视图中心正上方，再用rotationEffect旋转指定角度，保证6个圆环均匀环绕文本
• 放弃随机值改用手动配置参数，能完全控制每个圆环的位置和样式，避免随机导致的布局混乱

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