这是一个伟大的使用覆盖组合与对准指南。

Circle().fill(Color.red)
        .frame(width: 100, height: 100)
        .overlay(alignment: .bottom) {
            Text("Title")
                .foregroundColor(.white)
                .alignmentGuide(.bottom) { _ in
                    0 // + additiona padding
                }
        }
        //  The last two lines are just the "blue container
        .frame(width: 200, height: 200)
        .background(Color.blue)

字符串
请注意，这是一个简单且可扩展的解决方案，不需要任何花哨的代码，只需要一个对齐指南。

你可以使用offset来设置circle后面的文字。下面的代码可以帮助你：

struct ContentView: View {
    @State private var circleRadius: CGFloat = 0
    var body: some View {
        ZStack {
            LinearGradient(colors: [.blue, .blue], startPoint: .trailing, endPoint: .bottomTrailing)

            VStack(alignment: .center) {
                Circle()
                    .frame(width: 100, height: 100)
                    .foregroundColor(.red)
                    .overlay(GeometryReader { geometry in
                        Color.clear
                        .onAppear {
                        self.circleRadius = geometry.size.width / 2
                    }
                })
            }
            HStack(alignment: .center) {
                Text("Text")
                    .offset(y: circleRadius + 20)
                    .foregroundColor(.white)
            }
        }
    }
}

字符串

我不是很确定你在这里真正想要实现的是什么，但是如果你只是想让文本集中在图像下面，这应该可以解决你的问题。但是，如果文本是多行的，则文本的y位置将向上移动，除非所有内容都是固定的，或者文本字体在单行中缩小。

struct CenteredImageView: View {
    let imageSize: CGSize = CGSize(width: 50, height: 50)
    let containerSize: CGSize = CGSize(width: 150, height: 150)
    var body: some View {
        ZStack(alignment: .center) {
            Circle()
                .fill(Color.red)
                .frame(width: imageSize.width, height: imageSize.height)
                .position(x: containerSize.width / 2, y: containerSize.height / 2)
            Text("Text")
                .foregroundColor(.white)
                .multilineTextAlignment(.center)
                .position(x: containerSize.width / 2, y: containerSize.height / 2 + (imageSize.height * 0.70))
        }
        .frame(width: containerSize.width, height: containerSize.height)
        .background(Color.blue)
        .cornerRadius(5)
    }
}

字符串

我需要这个UI：

的数据
下面是我的代码：

struct ContentView: View {
    @State private var circleRadius: CGFloat = 0
    let circleData = [
        CircleData(color: .red, text: "Text 1233"),
        CircleData(color: .green, text: "Text 22323"),
        CircleData(color: .purple, text: "Text 2323233"),
        CircleData(color: .yellow, text: "Text 4323")
    ]

    var body: some View {
        ZStack {
            LinearGradient(colors: [.blue, .blue], startPoint: .trailing, endPoint: .bottomTrailing)

            HStack(spacing: 4) {
                ForEach(circleData.indices, id: \.self) { index in
                    TupleView((
                        ZStack(alignment: .bottom) {
                            VStack {
                                Circle()
                                    .fill(circleData[index].color)
                                    .frame(width: 32, height: 32)
                                    .overlay(GeometryReader { geometry in
                                        Color.clear
                                            .onAppear {
                                                self.circleRadius = geometry.size.width / 2
                                            }
                                    })
                                
                                Text(circleData[index].text)
                                    .foregroundColor(.white)
                                    .font(.caption)
                                    .alignmentGuide(.bottom) { _ in circleRadius }
                                    .multilineTextAlignment(.center)
                            }
                        }
                    ))
                    
                    if index < 3 {
                        Rectangle()
                            .foregroundColor(.indigo) // You can set the desired color here
                            .frame(width: 30, height: 4)
                            .offset(y: -8) // Offset the rectangles to be below the circles
                    }
                }
            }
        }
    }
}

struct CircleData: Identifiable, Hashable {
    let id = UUID()
    let color: Color
    let text: String
}

字符串