SwiftUI中如何去除Form组件后方的多余空白区域

问题原因 #

空白主要来自两个特性：

1. SwiftUI的Form默认会尽可能填充垂直方向的可用空间，不会仅贴合内部内容的高度
2. 外层VStack没有显式设置间距，使用了系统默认的大间距，再叠加Form自带的上下外边距，最终呈现出大量空白

可选用的解决方案 #

方案1：让Form自适应内容高度

给Form添加.fixedSize(horizontal: false, vertical: true)修饰符，强制Form在垂直方向仅占用内容需要的高度，代码修改如下：

Form {
    Picker("Color", selection: $selectedIndex) {
        ForEach(0 ..< arrayOfNames.count) {
            Text(self.arrayOfNames[$0])
        }
    }
}
.fixedSize(horizontal: false, vertical: true) // 新增这行修饰符

方案2：显式设置VStack的间距

外层VStack初始化时设置spacing参数，控制所有子元素之间的间距，数值可以根据你的视觉需求调整：

// 替换原有VStack初始化代码
VStack(spacing: 16) {
    Text("What would you like help with?")
        .font(.largeTitle)
        .fontWeight(.bold)
        .multilineTextAlignment(.center)
                
    Form {
        Picker("Color", selection: $selectedIndex) {
            ForEach(0 ..< arrayOfNames.count) {
                Text(self.arrayOfNames[$0])
            }
        }
    }
    
    TextField("Enter your question", text: $question)
        .opacity(selectedIndex > 0 ? 1 : 0)
        .textFieldStyle(RoundedBorderTextFieldStyle())
    
    Button(action: {}) {
        Text("Ask")
    }.opacity(selectedIndex > 0 ? 1 : 0)
}

方案3：移除Form改用普通容器

如果不需要Form自带的列表分组、圆角背景等默认样式，直接把Picker放到普通VStack中，就能彻底避免Form带来的额外边距：

// 替换原有Form部分代码
VStack {
    Picker("Color", selection: $selectedIndex) {
        ForEach(0 ..< arrayOfNames.count) {
            Text(self.arrayOfNames[$0])
        }
    }
    .pickerStyle(.menu) // 可根据需求更换picker样式
}
.padding(.horizontal)

你可以单独使用某一种方案，也可以组合使用，比如同时设置VStack的spacing和Form的自适应高度，能得到更灵活的调整效果。

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