SwiftUI中VStack内嵌套Form时Spacer不生效的问题如何解决

问题原因 #

SwiftUI 中的Form本质是对UITableView（iOS）/NSTableView（macOS）的封装，默认会占用父视图分配的所有剩余垂直空间，所以你在VStack中插入的Spacer()不会生效，系统布局时会优先把所有剩余空间分配给Form，导致圆形视图和Form挤在一起，无法实现顶部放圆形、Form贴底部的效果。
错误布局效果参考：

解决方案 #

方案1：iOS 16+ 无硬编码最优方案 #

不需要写死固定尺寸，只需给Form添加两个修饰符，让Form高度自适应自身内容，Spacer即可正常生效，Form会自动贴在底部TabBar上方：

var body: some View {
    VStack {
        Circle()
            .foregroundColor(.yellow)
            .overlay(
                VStack {
                    Text("Example")
                }
            )
            .foregroundColor(.primary)
        
        Spacer()
        
        Form {
            TextField("test", text: $a)
            TextField("test2", text: $b)
        }
        // 禁止Form滚动，避免内容过多时和父容器滚动冲突
        .scrollDisabled(true)
        // 垂直方向自适应内容高度，不再占满所有剩余空间
        .fixedSize(horizontal: false, vertical: true)
    }
}

方案2：兼容iOS 15及更低版本 #

如果需要支持旧系统，可以用safeAreaInset修饰符直接把Form固定在底部安全区上方，自动避开TabBar，不需要手动计算位置：

var body: some View {
    VStack {
        Circle()
            .foregroundColor(.yellow)
            .overlay(
                VStack {
                    Text("Example")
                }
            )
            .foregroundColor(.primary)
    }
    .safeAreaInset(edge: .bottom) {
        Form {
            TextField("test", text: $a)
            TextField("test2", text: $b)
        }
        .frame(height: 200) // 可根据Form的实际内容行数调整高度
    }
}

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