SwiftUI实现Header与Footer分别固定在视图顶部和底部的问题

你的问题核心是Header和Footer被嵌套在ScrollView内部，导致它们会随内容滚动，无法固定。要实现固定效果，需要把Header和Footer移到ScrollView的外部，用VStack包裹整个布局结构：

修改后的完整布局结构 #

VStack(spacing: 0) {
    // 固定在顶部的Header
    header
    
    // 中间可滚动的内容区域
    ScrollView {
        VStack(spacing: 0) {
            moreViews()
        }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity) // 让ScrollView占满中间剩余空间
    
    // 固定在底部的Footer
    footer
}
.frame(maxWidth: .infinity, maxHeight: .infinity)

关键说明 #

• VStack会垂直排列三个元素：Header、ScrollView、Footer，自动分配空间
• ScrollView通过frame(maxWidth: .infinity, maxHeight: .infinity)占满Header和Footer之间的所有可用空间，保证内容滚动时不影响顶部和底部的固定元素
• 原error视图里的Header和Footer要移除，把error的内容（比如错误提示）放到ScrollView内部或者作为单独的状态视图处理

错误状态的适配（如果需要保留error视图） #

如果error视图是用来展示错误状态的，可以调整为条件渲染，确保错误状态下Header和Footer依然固定：

VStack(spacing: 0) {
    header
    
    if showError {
        // 错误状态下展示错误内容，无需滚动
        VStack(alignment: .center) {
            // 原error视图里的错误提示内容
            Text("出错了，请重试")
            // ...其他错误相关视图
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    } else {
        ScrollView {
            moreViews()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
    
    footer
}
.frame(maxWidth: .infinity, maxHeight: .infinity)

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