SwiftUI中如何为已实现的多层环形视图添加前置标签？

1. 封装带标签的环形单元视图 #

先把标签和环形封装成一个可复用的组合视图，这样能轻松实现每个环形配前置标签的布局：

struct RingWithLabelView: View {
    // 标签文本及环形原有参数
    let label: String
    let progress: Double
    let ringColor: Color
    let backgroundColor: Color
    let lineWidth: CGFloat
    let size: CGSize
    
    var body: some View {
        HStack(alignment: .center, spacing: 16) {
            // 前置标签
            Text(label)
                .font(.subheadline)
                .fontWeight(.medium)
                .foregroundColor(.secondary)
                .frame(width: 80, alignment: .leading) // 固定宽度让标签对齐
            
            // 复用你已实现的环形视图
            RingView(
                progress: progress,
                ringColor: ringColor,
                backgroundColor: backgroundColor,
                lineWidth: lineWidth,
                size: size
            )
        }
    }
}

2. 修改环形调用视图 #

把原来CircularView里的RingView替换成上面的组合视图，传入对应的标签文本即可：

struct CircularView: View {
    var body: some View {
        VStack(spacing: 20) {
            RingWithLabelView(
                label: "完成率",
                progress: 0.75,
                ringColor: .blue,
                backgroundColor: .blue.opacity(0.2),
                lineWidth: 12,
                size: CGSize(width: 100, height: 100)
            )
            
            RingWithLabelView(
                label: "使用率",
                progress: 0.45,
                ringColor: .green,
                backgroundColor: .green.opacity(0.2),
                lineWidth: 12,
                size: CGSize(width: 100, height: 100)
            )
            
            // 按需添加更多带标签的环形
        }
        .padding()
    }
}

3. 自定义样式调整（可选） #

如果需要标签和环形颜色统一，或者调整标签样式，直接修改Text的属性即可：

Text(label)
    .font(.headline)
    .fontWeight(.semibold)
    .foregroundColor(ringColor) // 标签颜色和环形同步
    .frame(width: 90, alignment: .leading)

核心逻辑说明 #

• 用HStack实现标签与环形的横向排列，确保标签固定在环形左侧
• 给标签设置固定宽度，避免不同长度的标签导致布局错乱，提升视觉一致性
• 完全复用你已实现的RingView逻辑，无需修改原有环形的绘制代码

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