SwiftUI中实现ScrollView越界滚动，适配左右padding显示需求

嘿，这个问题我之前在做SwiftUI首页布局的时候也碰到过！直接给水平ScrollView加padding确实会导致内容截断，因为ScrollView的可滚动范围不会自动包含padding的空间。这里有两个靠谱的解决方案，你可以根据需求选：

方法一：通过滚动偏移动态调整Padding（精准控制） #

这个方法的核心是监听水平ScrollView的滚动位置，根据偏移量动态切换padding值——只有在滚动到最左/最右端时才显示对应方向的padding，中间滚动过程中去掉padding避免截断。

实现代码 #

首先我们需要自定义一个PreferenceKey来监听滚动偏移，然后在CategoryRow里计算内容和ScrollView的宽度，动态调整padding：

// 用于监听滚动偏移的PreferenceKey
struct ScrollOffsetPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {}
}

struct CategoryRow: View {
    let items: [YourItemType]
    @State private var scrollOffset: CGFloat = 0
    @State private var scrollViewWidth: CGFloat = 0
    @State private var totalContentWidth: CGFloat = 0
    private let targetPadding: CGFloat = 16 // 你想要的两端padding值
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 16) {
                ForEach(items) { item in
                    YourItemView(item: item)
                        .background(
                            // 计算每个Item的宽度，累加得到总内容宽度
                            GeometryReader { geo in
                                Color.clear.onAppear {
                                    totalContentWidth += geo.size.width + 16 // 加上HStack的spacing
                                }
                            }
                        )
                }
            }
            .background(
                // 获取ScrollView的可视宽度
                GeometryReader { geo in
                    Color.clear.onAppear {
                        scrollViewWidth = geo.size.width
                    }
                }
            )
            .onPreferenceChange(ScrollOffsetPreferenceKey.self) { offset in
                scrollOffset = offset
            }
            // 根据滚动偏移动态设置padding
            .padding(.horizontal, calculateDynamicPadding())
        }
        .overlay(
            // 监听滚动偏移量
            GeometryReader { proxy in
                Color.clear.preference(
                    key: ScrollOffsetPreferenceKey.self,
                    value: proxy.frame(in: .named("horizontalScroll")).minX
                )
            }
        )
        .coordinateSpace(name: "horizontalScroll")
    }
    
    private func calculateDynamicPadding() -> CGFloat {
        // 计算最大滚动偏移量（内容总宽度 - ScrollView可视宽度）
        let maxScrollOffset = totalContentWidth - scrollViewWidth
        
        if scrollOffset >= 0 {
            // 处于最左侧位置，显示左侧padding
            return targetPadding
        } else if scrollOffset <= -maxScrollOffset {
            // 处于最右侧位置，显示右侧padding
            return targetPadding
        } else {
            // 滚动过程中，去掉padding避免内容截断
            return 0
        }
    }
}

原理说明 #

1. 用GeometryReader分别获取ScrollView的可视宽度和所有Item的总宽度（包含spacing）。
2. 通过PreferenceKey和坐标空间监听ScrollView的滚动偏移量。
3. 根据偏移量判断当前滚动位置：在两端时保留padding，中间滚动时将padding设为0，这样内容就不会被截断。

方法二：用占位视图模拟两端Padding（简单高效） #

如果不需要太精准的控制，这个方法更简单——在水平滚动的内容首尾各添加一个透明的占位视图，宽度等于你想要的padding值，通过滚动时占位视图的“隐藏/显示”来模拟两端padding的效果。

实现代码 #

struct CategoryRow: View {
    let items: [YourItemType]
    private let paddingValue: CGFloat = 16
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack(spacing: 16) {
                // 左侧透明占位视图，宽度等于目标padding
                Color.clear.frame(width: paddingValue)
                
                ForEach(items) { item in
                    YourItemView(item: item)
                }
                
                // 右侧透明占位视图，宽度等于目标padding
                Color.clear.frame(width: paddingValue)
            }
        }
        .clipped() // 裁剪超出ScrollView可视区域的内容，避免占位视图显示出来
    }
}

原理说明 #

占位视图会让水平滚动的总范围增加，当滚动到最左侧时，左侧的占位视图刚好滚出可视区域，此时第一个Item左边就有paddingValue的空白；滚动到最右侧时，右侧占位视图滚出，最后一个Item右边也会有对应空白。这个方法不需要监听滚动偏移，代码更简洁，适合大多数场景。

额外注意点 #

你原来代码里的.listRowInsets(EdgeInsets())很关键，它能避免List给行添加默认的内边距，确保CategoryRow的布局不受干扰。

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