SwiftUI中ZStack内两个矩形无法完全居中对齐的解决方法

问题代码 #

struct Clock10View: View {
    let light: Bool
    var body: some View {
        ZStack() {
            Rectangle()
                .frame(width: 6, height: 6)
                .foregroundColor(.gray)
            Rectangle()
                .frame(width: 5, height: 5)
                .foregroundColor(.red)
        }
    }
}

问题描述 #

将模拟器截图放大后，发现两个 Rectangle 的中心点并未完全对齐，需要调整布局让它们精准重合。

解决方案 #

问题根源是 SwiftUI 处理不同奇偶尺寸视图时，可能将中心点定位在亚像素位置（比如 2.5px），而物理屏幕像素是整数，导致视觉偏移。以下是几种可行的解决方法：

方法一：强制对齐到整数像素

通过 alignmentGuide 把两个视图的中心点强制对齐到整数坐标：

struct Clock10View: View {
    let light: Bool
    var body: some View {
        ZStack(alignment: .center) {
            Rectangle()
                .frame(width: 6, height: 6)
                .foregroundColor(.gray)
                .alignmentGuide(.center) { $0[.center].rounded(.down) }
            Rectangle()
                .frame(width: 5, height: 5)
                .foregroundColor(.red)
                .alignmentGuide(.center) { $0[.center].rounded(.down) }
        }
    }
}

方法二：明确指定位置

用 GeometryReader 获取父容器尺寸，手动设置两个视图的位置到中心点：

struct Clock10View: View {
    let light: Bool
    var body: some View {
        GeometryReader { geo in
            ZStack {
                Rectangle()
                    .frame(width: 6, height: 6)
                    .foregroundColor(.gray)
                    .position(x: geo.size.width / 2, y: geo.size.height / 2)
                Rectangle()
                    .frame(width: 5, height: 5)
                    .foregroundColor(.red)
                    .position(x: geo.size.width / 2, y: geo.size.height / 2)
            }
        }
        .frame(width: 6, height: 6) // 固定容器尺寸
    }
}

方法三：全局对齐修正

给整个 ZStack 添加全局对齐规则，确保所有子视图的坐标都是整数：

struct Clock10View: View {
    let light: Bool
    var body: some View {
        ZStack() {
            Rectangle()
                .frame(width: 6, height: 6)
                .foregroundColor(.gray)
            Rectangle()
                .frame(width: 5, height: 5)
                .foregroundColor(.red)
        }
        .alignmentGuide(.horizontal) { $0[.horizontal].rounded() }
        .alignmentGuide(.vertical) { $0[.vertical].rounded() }
    }
}

原理说明 #

SwiftUI 默认的布局系统会根据视图尺寸自动计算居中位置，但当尺寸为奇数时，计算出的中心点会是半像素值。物理屏幕无法显示半像素，渲染时会自动模糊偏移，导致视觉上的不对齐。通过强制将坐标取整，就能让两个视图的中心点完全重合。

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