嵌套ScrollView的TabView中LazyVStack懒加载失效问题解决

当TabView嵌套在ScrollView内部时，其标签页P1中的LazyVStack无法触发懒加载特性，所有150行文本被一次性渲染，核心原因是：

• ScrollView会让子视图（包括TabView）无限扩展以计算总滚动高度，TabView在无明确高度约束的情况下，会让内部LazyVStack失去有限布局空间的限制，导致SwiftUI一次性渲染所有内容来计算总高度。
• 代码中存在几处拼写错误需先修正：Struct改为小写struct、LazyVstack改为LazyVStack、Foreach改为ForEach、p1()改为P1()，否则会编译失败。

核心是给TabView添加明确的高度约束，让其拥有有限的布局空间，从而触发LazyVStack的懒加载。

方案1：让TabView填充剩余空间 #

给TabView添加.frame(maxHeight: .infinity)，使其占据ScrollView中除上方Text外的剩余空间，LazyVStack会在有限视口内按需渲染内容。

修改后的完整代码：

struct P1: View {
    var body: some View {
        LazyVStack {
            ForEach(0...150, id: \.self) { i in
                Text("Row -> \(i)")
            }
        }
    }
}

struct P2: View {
    var body: some View {
        Text("Tab 2 Content")
    }
}

struct ContentView: View {
    @State private var tab = 0
    
    var body: some View {
        ScrollView {
            Text("hello, world!")
                .padding()
            
            TabView(selection: $tab) {
                P1().tag(0)
                P2().tag(1)
            }
            .tabViewStyle(.page)
            .frame(maxHeight: .infinity) // 关键：让TabView占据剩余空间
        }
    }
}

方案2：使用GeometryReader精确控制高度 #

如果需要更精准的高度控制，用GeometryReader获取ScrollView的可用高度，按需设置给TabView：

struct ContentView: View {
    @State private var tab = 0
    
    var body: some View {
        GeometryReader { geo in
            ScrollView {
                Text("hello, world!")
                    .padding()
                
                TabView(selection: $tab) {
                    P1().tag(0)
                    P2().tag(1)
                }
                .tabViewStyle(.page)
                .frame(height: geo.size.height - 100) // 减去上方Text的大致高度，可按需调整
            }
        }
    }
}

LazyVStack的懒加载依赖有限的滚动容器约束：只有当父视图高度固定或受限时，SwiftUI才会仅渲染当前可见区域的内容，并在滚动时按需加载新内容。若父视图允许无限扩展，LazyVStack会一次性渲染所有内容以计算总高度，从而失去懒加载的性能优势。

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