SwiftUI开发中Form与下方结果列表异常间距问题如何解决？

问题原因 #

SwiftUI 中Form组件默认会按照系统表单布局规则自动分配垂直高度，不会收缩到仅适配内容尺寸，导致顶部输入区域占用了超出实际需要的屏幕空间，下方的结果列表就被挤到了屏幕中部位置。

修复方案 #

有两种常用修复方式，可根据业务需求选择：

方案1：保留Form，增加高度自适应修饰符 #

仅需要在原有Form上添加.fixedSize(horizontal: false, vertical: true)修饰符，让Form在垂直方向贴合内容高度即可，同时可以给外层VStack设置spacing: 0消除默认组件间距，效果更贴合：

struct Lookup: View {
    @State var query = ""

    var body: some View {
        // 新增spacing: 0消除组件默认间距
        VStack (alignment: .leading, spacing: 0) {
            Form {
                VStack {
                    HStack {
                        TextField("Text Field", text: $query)
                        Button(
                            action: {
                                print("Button Hit")
                                
                            }, label: {
                                Image(systemName: "magnifyingglass.circle")
                            })
                    }
                }.padding()
            }
            // 新增这行，让Form垂直方向自适应内容高度
            .fixedSize(horizontal: false, vertical: true)
            
            ScrollView {
                ForEach(1..<11) { resultNumber in
                    ResultRow(resultNumber: resultNumber)
                }
            }
        }
    }
}

方案2：替换Form为普通VStack（更轻量） #

如果不需要Form自带的分组、系统表单样式特性，直接把外层的Form替换成普通VStack即可，省去处理Form默认行为的成本：

struct Lookup: View {
    @State var query = ""

    var body: some View {
        VStack (alignment: .leading, spacing: 0) {
            // 替换原Form为普通VStack
            VStack {
                HStack {
                    TextField("Text Field", text: $query)
                    Button(
                        action: {
                            print("Button Hit")
                            
                        }, label: {
                            Image(systemName: "magnifyingglass.circle")
                        })
                }
            }
            .padding()
            // 如果需要和原Form一致的背景色可以加这行，不需要可删除
            .background(Color(UIColor.systemGroupedBackground))
            
            ScrollView {
                ForEach(1..<11) { resultNumber in
                    ResultRow(resultNumber: resultNumber)
                }
            }
        }
    }
}

两种方案修改后，结果列表都会紧贴输入区域下方展示。

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