SwiftUI 如何让ScrollView内VStack的子视图填充剩余可用空间

你踩中了SwiftUI里ScrollView的布局特性坑：

• 常规的VStack、HStack这类非滚动容器，布局时会先确定自身的可用尺寸，再把尺寸约束传递给子视图，子视图设置maxHeight: .infinity时，能拿到父容器给出的确定最大高度，从而撑满对应空间。
• ScrollView作为滚动容器，纵向滚动模式下不会给内部内容传递确定的高度上限：它的内容区高度完全由子视图的高度总和决定，相当于高度是"无限"的可滚动区域。你给内部子视图设置maxHeight: .infinity时，拿不到一个确定的高度参考值，自然不会生效。你给固定高度能正常显示，是因为固定高度是明确值，能直接撑开ScrollView的内容区。

要实现Browse区块从自身位置撑到屏幕底部的效果，核心是给ScrollView内部的内容容器设置和ScrollView可视区域一致的最小高度，这样子视图的maxHeight: .infinity就能拿到确定的高度约束生效。
推荐实现代码：

var body: some View {
    NavigationView {
        VStack {
            // 顶部Logo和搜索区
            VStack {
                Text("Logo")
                    .background(Color.red)
                
                Text("Title")
                    .background(Color.blue)
            }
            .fixedSize(horizontal: false, vertical: true)
            .padding()
            
            // 滚动区域
            ScrollView(.vertical, showsIndicators: false) {
                // 用GeometryReader获取ScrollView本身的可视高度
                GeometryReader { scrollProxy in
                    VStack(alignment: .leading) {
                        Text("Selector")
                            .background(Color.yellow)
                        
                        Text("Browse")
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .background(Color.green)
                    }
                    // 给内容容器设置最小高度为ScrollView可视高度，顶部对齐
                    .frame(minHeight: scrollProxy.size.height, alignment: .top)
                }
            }
            .frame(maxHeight: .infinity) // 让ScrollView占满顶部区域下方的所有剩余空间
        }
        .background(Color.red)
        .navigationBarHidden(true) // 隐藏导航栏的修饰符要放在外层容器，不要塞在ScrollView内部
    }
}

额外优化建议 #

如果你的Selector区块不需要跟着滚动，完全没必要把它塞在ScrollView里：直接把结构拆成VStack三段：顶部Logo区、固定Selector区、撑满剩余空间的Browse区，只在Browse内部嵌ScrollView即可，逻辑更简单，滚动性能也更好。

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