SwiftUI如何将ZStack调整为图片的尺寸？

这个问题我之前也碰到过，核心原因很简单：ZStack默认会占据父视图的全部可用空间，而你的Image使用了.aspectRatio(contentMode: .fit)，只会按自身宽高比缩放到合适大小，不会填满ZStack的整个区域，所以背景色就会在图片两侧形成条纹。

下面给你两种可行的解决方案：

方案一：用Overlay替代ZStack（最简单） #

既然你的需求是在图片上叠加文本，直接用Image的.overlay修饰符会更合适——这样整个视图的尺寸完全由图片决定，背景色只会作用在图片范围内。

修改后的代码：

Image(schema.image)
    .resizable()
    .aspectRatio(contentMode: .fit)
    .border(Color.white)
    .shadow(color: self.colorShadow ? Color.green : Color.gray.opacity(0.5), radius: 10)
    .overlay(
        ForEach(schema.item) { item in
            Text(String(item.id))
                .font(.headline)
                .foregroundColor(Color.black)
                .padding(5)
                .overlay(Circle().stroke(Color.black, lineWidth: 1))
                .position(x: CGFloat(item.coordinatesX), y: CGFloat(item.coordinatesY))
        }
    )
.background(Color.yellow.opacity(0.5))

原理：overlay会将文本层叠在图片上方，整个视图的边界完全匹配图片的尺寸，背景色自然只会覆盖图片区域，不会出现两侧条纹。

方案二：强制ZStack匹配图片尺寸（保留ZStack结构） #

如果你必须保留ZStack的结构，可以通过PreferenceKey获取图片的实际尺寸，然后约束ZStack的frame与图片一致。

步骤1：定义PreferenceKey #

先创建一个用于传递图片尺寸的PreferenceKey：

struct ImageSizePreferenceKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

步骤2：修改ZStack代码 #

@State private var imageSize: CGSize = .zero

ZStack {
    Image(schema.image)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .border(Color.white)
        .shadow(color: self.colorShadow ? Color.green : Color.gray.opacity(0.5), radius: 10)
        // 通过GeometryReader获取图片尺寸并传递
        .background(GeometryReader { proxy in
            Color.clear.preference(key: ImageSizePreferenceKey.self, value: proxy.size)
        })
    
    ForEach(schema.item) { item in
        Text(String(item.id))
            .font(.headline)
            .foregroundColor(Color.black)
            .padding(5)
            .overlay(Circle().stroke(Color.black, lineWidth: 1))
            .position(x: CGFloat(item.coordinatesX), y: CGFloat(item.coordinatesY))
    }
}
// 监听图片尺寸变化，更新状态变量
.onPreferenceChange(ImageSizePreferenceKey.self) { newSize in
    imageSize = newSize
}
// 强制ZStack使用图片的尺寸
.frame(width: imageSize.width, height: imageSize.height)
.background(Color.yellow.opacity(0.5))

原理：通过GeometryReader捕获图片的实际渲染尺寸，再通过PreferenceKey传递给ZStack，用frame约束ZStack的大小与图片一致，这样背景色就只会填充ZStack（即图片）的区域。

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