如何在SwiftUI中实现sticky bottom（粘性底部）效果？

要实现页面内容可滚动、页脚固定在底部的效果，有两种常用实现方案：

全版本兼容方案 #

通过根VStack拆分滚动区和固定页脚区，ScrollView自动占满除页脚外的所有空间，适配所有支持SwiftUI的iOS版本：

import SwiftUI

struct StickyFooterDemo: View {
    var body: some View {
        VStack(spacing: 0) {
            // 可滚动主内容区
            ScrollView {
                VStack(spacing: 16) {
                    // 此处替换为你的页面内容
                    ForEach(0..<30) { index in
                        Text("内容项 \(index + 1)")
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(Color.gray.opacity(0.1))
                            .cornerRadius(8)
                    }
                    .padding(.horizontal)
                }
                .padding(.vertical)
            }
            
            // 固定底部的粘性页脚
            VStack(spacing: 12) {
                Button("操作按钮") {
                    // 按钮点击逻辑
                }
                .frame(maxWidth: .infinity)
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(12)
                
                Text("页脚辅助说明文本")
                    .font(.caption)
                    .foregroundColor(.gray)
            }
            .padding()
            .background(Color(UIColor.systemBackground))
            // 可选：添加顶部阴影区分滚动内容和页脚
            .shadow(color: .black.opacity(0.05), radius: 4, x: 0, y: -2)
        }
        // 可选：如需页脚延伸到底部安全区外可打开该配置
        // .ignoresSafeArea(edges: .bottom)
    }
}

iOS 15+ 精简实现 #

如果项目最低支持iOS 15及以上版本，可直接使用safeAreaInset修饰符实现，代码更简洁，滚动内容到底部时会自动避开页脚不会被遮挡：

ScrollView {
    VStack(spacing: 16) {
        // 此处替换为你的页面内容
        ForEach(0..<30) { index in
            Text("内容项 \(index + 1)")
                .frame(maxWidth: .infinity)
                .padding()
                .background(Color.gray.opacity(0.1))
                .cornerRadius(8)
        }
        .padding(.horizontal)
    }
    .padding(.vertical)
}
.safeAreaInset(edge: .bottom) {
    // 页脚内容，自动固定在底部
    VStack(spacing: 12) {
        Button("操作按钮") {
            // 按钮点击逻辑
        }
        .frame(maxWidth: .infinity)
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(12)
        
        Text("页脚辅助说明文本")
            .font(.caption)
            .foregroundColor(.gray)
    }
    .padding()
    .background(Color(UIColor.systemBackground))
    .shadow(color: .black.opacity(0.05), radius: 4, x: 0, y: -2)
}

• 两种实现均支持页脚内添加任意自定义视图（按钮、文本、图标、输入框等）
• 嵌套在NavigationStack、TabView中时效果不受影响

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