SwiftUI实现左右镜像扇形Chip布局问题求助

你的左侧面板布局混乱，核心问题出在HStack的spacing设置错误，以及没有利用SwiftUI的对齐特性实现镜像布局：

1. 左侧HStack用了spacing: -80，这个过大的负值直接导致圆形元素重叠错位；而右侧使用的spacing: -20才是正确的重叠间距。
2. 实现镜像效果不需要修改spacing，只需保持左右侧间距一致，通过布局容器的对齐规则就能完成反向排列。

修正后的代码 #

import SwiftUI
let w = UIScreen.main.bounds.width

struct ContentView: View {
    var body: some View {
        HStack(spacing:0) {
            VStack(alignment: .trailing) {
                ForEach(1 ..< 5, id: \.self) { row in
                    HStack(spacing: -20) { // 统一和右侧相同的重叠间距
                        ForEach(1 ... row, id: \.self) { _ in
                            Circle().fill(.white).stroke(.black, lineWidth: 1).frame(width: 50, height: 50)
                        }
                    }
                    .frame(maxWidth: .infinity, alignment: .trailing) // 让圆形组靠右对齐
                    .background(.red)
                }
            }
            .frame(width: w / 2)
            .background(Color.gray)
            
            VStack(alignment: .leading) {
                ForEach(1 ..< 5, id: \.self) { row in
                    HStack(spacing: -20) {
                        ForEach(1 ... row, id: \.self) { _ in
                            Circle().fill(.white).stroke(.black, lineWidth: 1).frame(width: 50, height: 50)
                        }
                    }
                    .frame(maxWidth: .infinity, alignment: .leading) // 让圆形组靠左对齐
                }
            }
            .frame(width: w / 2)
            .background(Color.black)
        }
    }
}

#Preview {
    ContentView()
}

关键修改点 #

• 将左侧HStack的spacing: -80改为-20，保证左右侧元素重叠间距统一
• 给每行的HStack添加.frame(maxWidth: .infinity, alignment: .trailing)（左侧）和.alignment: .leading（右侧），让圆形组分别向各自面板的边缘对齐，自然形成镜像效果
• 移除左侧外层多余的.frame(maxWidth: .infinity, alignment: .trailing)，内层HStack的对齐通过自身frame控制更精准

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