SwiftUI NavigationStack：如何移除视图间的空白区域？

空白区域的来源 #

你看到的空白主要由两部分构成：

1. 隐式垂直堆叠的默认间距：在NavigationStack中直接放置多个视图时，SwiftUI会自动用隐式VStack包裹它们，这个VStack自带默认间距，导致蓝色视图和List之间出现空白。
2. List组件的默认内边距：List本身默认带有顶部内边距，尤其是在导航场景下，会额外预留适配导航栏的空间。

修复步骤 #

1. 消除隐式堆叠的间距 #

将蓝色视图和List放入显式的VStack并设置spacing: 0，彻底移除默认间距：

VStack(spacing: 0) {
    // 你的蓝色HStack
    // 你的List
}

2. 移除List的默认内边距 #

给List添加以下修饰符，消除顶部多余空间：

List {
    // List内容
}
.listStyle(.plain) // 切换为plain样式，减少默认内边距
.environment(\.defaultMinListHeaderHeight, 0) // 移除Section header的最小占位高度（可选）

3. 彻底隐藏导航栏（可选） #

如果不需要导航栏，添加以下代码移除其占位空间：

NavigationStack {
    // 内部视图
}
.toolbar(.hidden, for: .navigationBar)

完整修复代码 #

var body: some View {
    NavigationStack {
        VStack(spacing: 0) {
            HStack {
                Text("Hello, world!")
                    .background(Color.clear)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.blue)
            
            List {
                Section(header: Text("My custom")) {
                    HStack {
                        Button("Clear Image Cache") {
                            print("Clear Image Cache")
                        }
                        .buttonStyle(.plain)
                        Spacer()
                        Button("Test") {
                            print("Test")
                        }
                        .buttonStyle(.plain)
                    }
                }
                
                Section(header: Text("Notifications")) {
                    Picker("Notify Me About", selection: $notifyMeAbout) {
                        Text("Direct Messages")
                        Text("Mentions")
                        Text("Anything")
                    }
                    Toggle("Play notification sounds", isOn: $playNotificationSounds)
                    Toggle("Send read receipts", isOn: $sendReadReceipts)
                }
                Section(header: Text("User Profiles")) {
                    Picker("Profile Image Size", selection: $profileImageSize) {
                        Text("Large").tag(profileImageSize)
                        Text("Medium").tag(profileImageSize)
                        Text("Small").tag(profileImageSize)
                    }
                    Button("Clear Image Cache") {}
                }
            }
            .listStyle(.plain)
            .environment(\.defaultMinListHeaderHeight, 0)
        }
    }
    .toolbar(.hidden, for: .navigationBar)
}

内容的提问来源于stack exchange，提问作者Samet Çağrı Aktepe