SwiftUI入门：VStack嵌套Form与List布局多余空白问题求解

你遇到的两处无意义空白，本质是把两个设计为全屏独占的系统滚动容器，硬嵌套在普通VStack中导致的默认预留空间错位：

• 顶部多余空白来源：iOS上的Form组件原生是设计为铺满整个NavigationView内容区的，自带适配大导航栏、顶部安全区的高度预留。当你把Form从全屏容器拆出来、放到普通VStack的子层级时，系统不会自动裁剪它为适配全屏预留的那部分高度，直接就变成了没有内容的空白块。
• Form和List之间的宽间隔来源：Form和List的默认分组样式，各自都自带section上下的系统预留间距。两个容器上下排布时，Form的底部安全预留、List的顶部section预留、再加VStack默认的10pt子视图间距，三者叠在一起就形成了看起来很突兀的宽间隔。

方案1：符合SwiftUI设计规范的最优改法（推荐） #

不要拆分两个独立滚动容器，直接把Form作为整个页面的根内容容器，把原有List的内容并入Form的分组体系，让系统统一管理布局间距：

var body: some View {
    NavigationView {
        Form {
            // 原有输入框区域，单独作为第一个分组
            Section {
                TextField("Nome", text: $name)
            }
            // 原有列表区域，作为第二个分组
            Section {
                let sortedItems = dispense.items.sorted {
                    $0.name < $1.name
                }
                ForEach(sortedItems) { item in
                    Text(item.name)
                        .font(.headline)
                }
                .onDelete(perform: removeItems)
            }
        }
        .navigationBarTitle("Aggiungi Dispensa", displayMode: .inline)
        .navigationBarItems(trailing: Button("Aggiungi") {
            if self.name.count > 0 {
                let item = DispItem(name: self.name)
                self.dispense.items.append(item)
            }
            self.name = ""
        })
    }
}

这种写法完全消除了无意义空白，交互手感和系统原生设置页完全一致，也不会出现后续的滚动手势冲突、内容截断问题。

方案2：如果必须保留上下分块的独立结构 #

如果你确实需要两个区域独立滚动、不想共用同一个滚动容器，需要手动关闭两个组件的默认预留留白：

• 把最外层VStack的默认间距设为0，即改为VStack(spacing: 0)
• 给Form和List都加上.listStyle(.plain)修饰，关掉分组样式自带的section上下留白
• 手动将两个组件的默认滚动inset清零，避免系统额外添加的安全区留白

实践注意：SwiftUI中尽量不要在普通容器里嵌套多个滚动类组件（Form、List、ScrollView），很容易出现手势冲突、布局错乱的问题，优先使用单个根滚动容器包裹所有内容是最稳定的写法。

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