SwiftUI水平ScrollView可上下拉动且存在留白，求解决方案

嘿，我看了你的代码和遇到的问题，咱们一步步来搞定它：

问题根源分析 #

你的代码里嵌套了太多不必要的ZStack，而且edgesIgnoringSafeArea的作用层级不对，再加上ScrollView默认的内边距和弹性滚动特性，才导致了空白区域和可上下拉动的问题。

修改后的完整代码 #

var body: some View {
    GeometryReader { geometry in
        VStack(spacing: 0) {
            // 水平滚动区域
            ScrollView(.horizontal, showsIndicators: true) {
                HStack(spacing: 0) {
                    Color.blue
                    Color.red
                    Color.green
                }
                .frame(width: geometry.size.width * 3, height: geometry.size.height * 0.52)
            }
            .frame(height: geometry.size.height * 0.52)
            .edgesIgnoringSafeArea(.all)
            .contentInsetAdjustmentBehavior(.never)
            .scrollBounceBehavior(.disabled, axes: .vertical)
            
            // 底部橙色区域
            Color.orange
                .frame(height: geometry.size.height * 0.48)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

关键修改点说明 #

• 简化布局层级：移除了多余的ZStack嵌套，直接用VStack作为根容器，减少布局冲突的可能性。
• 统一内容尺寸：给HStack直接设置总宽度（3倍屏幕宽度，对应3个颜色视图）和高度，确保内容尺寸和ScrollView的frame完全匹配，从根源上避免垂直方向的滚动空间。
• 正确忽略安全区域：同时给ScrollView和外层VStack添加edgesIgnoringSafeArea(.all)，确保整个布局都能占满屏幕，消除顶部、底部的空白。
• 消除默认内边距：contentInsetAdjustmentBehavior(.never)会禁用ScrollView默认的安全区域内边距，解决首次加载时的空白问题。
• 禁用垂直弹性滚动：scrollBounceBehavior(.disabled, axes: .vertical)明确禁止垂直方向的弹性拉动，让ScrollView只响应水平滚动（iOS 16.4+可用）。

兼容旧iOS版本的替代方案 #

如果你的项目需要支持iOS 16.4以下版本，可以用手势拦截的方式替代scrollBounceBehavior：

.scrollView(.horizontal, showsIndicators: true) {
    // ... 内容保持不变
}
.gesture(
    DragGesture()
        .onChanged { _ in }
        .exclusively(before: ScrollView.defaultGesture(for: .vertical))
)

这样就能彻底解决你的问题啦！

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