SwiftUI能否实现指定布局？Grid/ScrollView/List方案均遇阻

可行方案推荐 #

因为你不需要List的选择、行操作等内置功能，完全没必要硬用List，下面两种方案都能解决问题：

方案1：LazyVStack + ScrollView（推荐，支持懒加载）

把整个布局（顶部Grid + 底部列表行）都放在同一个ScrollView里，列表部分用LazyVStack来实现，既能和Grid共存，还保留了类似List的懒加载特性，避免一次性加载大量数据。

示例代码：

ScrollView {
    // 你的Grid布局部分，保持原有实现即可
    Grid(alignment: .top) {
        GridRow {
            Text("Grid Item 1")
                .frame(maxWidth: .infinity, minHeight: 100)
                .background(.blue.opacity(0.2))
            Text("Grid Item 2")
                .frame(maxWidth: .infinity, minHeight: 100)
                .background(.blue.opacity(0.2))
        }
        // 更多GridRow...
    }
    .padding()

    // 底部模拟列表的区域
    LazyVStack(spacing: 0) {
        ForEach(0..<20) { index in
            HStack {
                Image(systemName: "square.fill")
                Text("列表行 \(index + 1)")
                Spacer()
                Image(systemName: "chevron.right")
            }
            .padding()
            .border(.gray.opacity(0.3), edge: .bottom) // 模拟List的分隔线
        }
    }
}

方案2：普通VStack替代（适合数据量小的情况）

如果列表数据不多，不需要懒加载，直接把上面的LazyVStack换成普通VStack就行，代码结构完全一致，实现更简单。

为什么之前的方案失效？ #

• SwiftUI的List本身就是滚动容器，嵌套进ScrollView会触发滚动冲突，官方本身就不支持这种嵌套场景
• 把Grid放进List的Section里，List的Section有固定的布局约束，会导致Grid无法正常适配显示，这是List的固有特性限制

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