SwiftUI中如何消除两个Horizontal ScrollView之间的间距？

问题说明 #

尝试创建两个水平滚动的产品列表，已将外层VStack的spacing设为0，但两个ScrollView之间仍存在间距，需要消除该间隙。

解决方案 #

导致间距的核心原因是ScrollView默认带有内边距，以及LazyHGrid未显式设置间距，可通过以下步骤解决：

1. 移除ScrollView的默认内边距 #

针对iOS 16+版本，使用contentInsets直接将ScrollView的上下内边距设为0；iOS 15及以下版本，用padding(.vertical, 0)替代。

2. 显式设置LazyHGrid的间距为0 #

在HorizontalScrollModel的LazyHGrid初始化时，添加spacing: 0参数，避免网格自身的默认间距影响布局。

修改后的代码示例 #

主视图代码 #

var body: some View {
    NavigationView {
        VStack(spacing: 0) {
            Text("Zara")
                .font(.custom("AmericanTypewriter", fixedSize: 36))
            
            ScrollView(.horizontal) {
                HorizontalScrollModel(searchResult: searchResults1)
            }
            .contentInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0)) // iOS 16+
            .task {
                await loadData()
            }
            
            ScrollView(.horizontal) {
                HorizontalScrollModel(searchResult: searchResults1)
            }
            .contentInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0)) // iOS 16+
        }
    }
}

HorizontalScrollModel代码 #

struct HorizontalScrollModel: View {
    
    var searchResults1: [homeResult]
    let columns = [GridItem(.adaptive(minimum: 200))]
    @State private var isHearted = false

    init(searchResult: [homeResult]) {
        self.searchResults1 = searchResult
    }
    
    var body: some View {
        // 显式设置LazyHGrid的spacing为0
        LazyHGrid(rows: columns, spacing: 0) {
            ForEach(searchResults1, id: \.prodlink) { item in
                NavigationLink{
                    ProductView(imageLink: item.image_src, productLink: item.prodlink,
                                productCost: String(item.price))
                } label: {
                    VStack(alignment: .leading, spacing: 0) {
                        AsyncImage(url: URL(string: item.image_src)) { phase in
                            if let image = phase.image {
                                image
                                    .resizable()
                                    .scaledToFit()
                                    .frame(width: 150, height: 150)
                                    .clipShape(RoundedRectangle(cornerRadius: 10))
                            } else if phase.error != nil {
                                Text("加载图片出错")
                            } else {
                                ProgressView()
                            }
                        }
                        .padding()
                        .overlay(
                            RoundedRectangle(cornerRadius: 10)
                                .stroke(.gray.opacity(0.2), lineWidth: 4)
                        )
                        .padding(.top, 2)
                        .padding(.bottom, 2)
                        .padding(.leading, 2)
                        .padding(.trailing, 2)
                        .overlay(
                            RoundedRectangle(cornerRadius: 12)
                                .stroke(.gray.opacity(0.3), lineWidth: 1)
                        )
                    }
                }
            }
        }
    }
}

iOS 15及以下兼容写法 #

如果需要适配iOS 15，将contentInsets替换为padding(.vertical, 0)：

ScrollView(.horizontal) {
    HorizontalScrollModel(searchResult: searchResults1)
}
.padding(.vertical, 0)

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