SwiftUI中.scaledToFill()导致视图溢出，Horizontal ScrollView无法访问

我在SwiftUI中实现了一个横向ScrollView，但没法操作它。原因是用了高分辨率纵向图片，就算设置了frame，用.aspectRatio(contentMode: .fill)（对应.scaledToFill()）时，图片会溢出覆盖滚动视图，导致没法点击；用.scaledToFit()就正常。这是为什么？

相关代码 #

ContentView #

Categories()
                
ForEach(images, id: \.self) { image in
    Card(image: image)
}

CardView #

Image(image)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(height: 300)
    .frame(maxWidth: .infinity)
    .clipped()

CategoriesView #

ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 10) {
                ForEach(items.indices, id: \.self) { index in
                    Button {
                        selected = index
                    } label: {
                        Text(items[index])
                            .padding(.horizontal)
                            .padding(.vertical, 12)
                            .background(
                                selected == index ? AnyShapeStyle(.cyan) : AnyShapeStyle(.ultraThinMaterial))
                            .clipShape(RoundedRectangle(cornerRadius: 10))
                    }
                    .buttonStyle(.plain)
                }
            }
            .padding(.horizontal)
        }

问题原因 #

这是因为.aspectRatio(contentMode: .fill)会让图片保持原有比例填充指定的frame，纵向图片的宽度会超出当前布局的可用宽度。虽然你加了.clipped()让溢出部分不可见，但SwiftUI里溢出的内容依然会占据点击响应区域——说白了就是，图片超出的部分盖在了上方的横向ScrollView上，把所有点击都拦下来了，导致ScrollView没法被操作。

而.scaledToFit()是让图片完整适配frame，不会有内容溢出，自然不会影响上层的交互。

解决办法 #

给CardView的图片加上.contentShape(Rectangle())，把点击响应区域限制在设定的可见范围内就行：

修改后的CardView代码：

Image(image)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(height: 300)
    .frame(maxWidth: .infinity)
    .clipped()
    .contentShape(Rectangle()) // 限制点击区域为可见的矩形

或者用容器把整个图片包起来再裁剪，效果一样：

VStack {
    Image(image)
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(height: 300)
        .frame(maxWidth: .infinity)
}
.clipped()

这样溢出的图片内容就不会再干扰上层ScrollView的交互了。

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