SwiftUI中如何将垂直ScrollView拆分为多组横向ScrollView？

我来帮你搞定这个布局需求～要实现每3个项一组横向排列、组间垂直堆叠的效果，我们可以分两步来调整代码：

第一步：给数组添加分组扩展 #

首先得把你的youtubeResults拆成每3个元素一组的子数组，我给Array写个简单的扩展方法来实现这个功能：

extension Array {
    func chunked(into size: Int) -> [[Element]] {
        return stride(from: 0, to: count, by: size).map {
            Array(self[$0..<Swift.min($0 + size, count)])
        }
    }
}

这个方法会自动把数组按指定大小切割，最后一组不足3个元素也能正常处理，不用担心越界问题。

第二步：嵌套滚动视图实现目标布局 #

接下来替换你原来的垂直滚动代码，外层用垂直ScrollView包裹分组后的横向ScrollView：

ScrollView(.vertical, showsIndicators: false) {
    LazyVStack(spacing: 25) {
        // 先把数据按每组3个分组
        ForEach(getData.youtubeResults.chunked(into: 3), id: \.self) { group in
            // 每组用横向ScrollView展示
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHStack(spacing: 15) { // 这里可以自定义横向项的间距
                    ForEach(group) { result in
                        SideItemView(youtubeResults: result, selectedTheme: self.$selectedTheme)
                    }
                }
                .padding(.horizontal) // 给横向组左右加内边距，优化布局
            }
        }
    }
    .padding()
    .padding(.top)
}

小细节说明 #

• 外层LazyVStack保持了你原来的垂直间距spacing:25，负责垂直堆叠每一组横向滚动视图
• 每组内部用ScrollView(.horizontal)实现横向滚动，搭配LazyHStack保证子视图高效加载
• 你可以根据设计需求调整横向LazyHStack的spacing值，以及横向滚动视图的内边距，让布局更贴合你的预期

这样修改后，就能实现你想要的效果：每3个项横向排成一行，行与行垂直堆叠，整个列表可垂直滚动，每行内部还能横向滑动查看所有项～

内容的提问来源于stack exchange，提问作者Lost in Clouds