SwiftUI HStack中图片间存在1像素间隙，如何实现紧贴显示？

我创建了一个包含HStack的简单View，并列放置两张图片，已将HStack的spacing设为0，但渲染后两张图片之间仍出现1像素的间隙，如何让它们完全紧贴显示？

代码如下：

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            Image("left")
            Image("right")
        }
    }
}

left和right图片：
左侧为带红色填充区域的矩形图片，右侧为带蓝色填充区域的矩形图片
输出效果：
两张图片并列显示，中间存在1像素的明显间隙

解决方法 #

这种间隙通常是SwiftUI Image的默认布局逻辑、像素对齐偏差，或图片本身的透明边导致的，以下是几种有效的解决方式：

1. 为图片添加resizable并固定尺寸

默认情况下，Image会以原始尺寸渲染，若尺寸与屏幕像素网格未对齐，易出现偏移间隙。添加.resizable()并明确尺寸，确保像素严格贴合：

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            Image("left")
                .resizable()
                .frame(width: 150, height: 100) // 根据你的图片实际尺寸调整
            Image("right")
                .resizable()
                .frame(width: 150, height: 100)
        }
    }
}

2. 自定义对齐指南强制边缘贴合

通过修改图片的对齐规则，让右侧图片的左边缘与左侧图片的右边缘完全重合：

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            Image("left")
                .alignmentGuide(.trailing) { $0[.trailing] }
            Image("right")
                .alignmentGuide(.leading) { $0[.leading] }
        }
    }
}

3. 检查图片本身是否有透明边

打开图片编辑工具（如Photoshop、Sketch），确认两张图片的边缘没有多余的透明像素。若存在透明边，裁剪掉即可消除视觉间隙。

4. 使用overlay合并图片

将其中一张图片作为另一张的叠加层，从布局层面消除间隙：

struct ContentView: View {
    var body: some View {
        let leftImageSize = CGSize(width: 150, height: 100) // 匹配图片实际尺寸
        Image("left")
            .resizable()
            .frame(size: leftImageSize)
            .overlay(
                Image("right")
                    .resizable()
                    .frame(size: leftImageSize)
                    .offset(x: leftImageSize.width)
            )
    }
}

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