SwiftUI横向ScrollView超出屏幕问题求助

1. 调整布局层级，分离滚动内容与样式容器 #

你之前把背景、内边距、圆角都加在了HStack上，导致HStack的实际宽度加上padding后超出屏幕范围。正确的做法是让ScrollView专注承载可滚动内容，把样式属性（背景、padding、圆角）移到ScrollView的外层容器上：

// 外层容器负责样式，保证整体在屏幕内
VStack {
    ScrollView(.horizontal, showsIndicators: false) {
        HStack {
            // 这里放置你的所有item
            ForEach(0..<10) { index in
                Text("Item \(index)")
                    .padding(.horizontal, 16)
                    .frame(height: 70)
            }
        }
    }
}
.frame(minHeight: 70, maxHeight: 70)
.background(Color.blue)
.padding([.leading, .trailing])
.cornerRadius(15)

2. 给HStack设置合理的间距与内边距 #

如果HStack内的item没有合适的间距，或者item本身宽度过大，也会导致视觉上的溢出。可以给HStack添加自定义间距，同时设置左右内边距，避免内容贴紧ScrollView边缘：

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 12) { // 控制item之间的间距
        ForEach(0..<10) { index in
            Text("Item \(index)")
                .padding(.horizontal, 16)
                .frame(height: 70)
        }
    }
    .padding(.horizontal) // HStack左右内边距，优化滚动视觉体验
}
.frame(minHeight: 70, maxHeight: 70)
.background(Color.blue)
.cornerRadius(15)
.padding([.leading, .trailing])

3. 安全使用容器宽度（避免直接硬编码设备宽度） #

如果必须基于父容器宽度控制HStack尺寸，不要直接用UIScreen.main.bounds.width（会在分屏、不同设备适配时出问题），可以用GeometryReader获取当前可用宽度，再减去外层padding的总和：

GeometryReader { proxy in
    ScrollView(.horizontal, showsIndicators: false) {
        HStack {
            // 内容
            ForEach(0..<10) { index in
                Text("Item \(index)")
                    .padding(.horizontal, 16)
                    .frame(height: 70)
            }
        }
        .frame(width: proxy.size.width - 32) // 减去左右各16的padding总和
        .frame(minHeight: 70, maxHeight: 70)
    }
}
.background(Color.blue)
.padding([.leading, .trailing], 16)
.cornerRadius(15)

注意：这种方式仅适合内容宽度固定的场景，如果item数量多、总宽度超过设置的容器宽度，ScrollView会无法正常滚动，动态内容优先用前两种方法。

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