SwiftUI如何移除导航标题上方多余空白（iOS 15环境）

你遇到的问题是iOS 15环境下，SwiftUI使用searchable并设置placement: .navigationBarDrawer(displayMode: .always)时，导航标题上方出现了多余空白。这主要是布局嵌套冗余和默认布局间距导致的，以下是可行的解决方法：

核心修复步骤 #

1. 移除冗余嵌套视图：你的代码中NavigationView内部嵌套了一层不必要的VStack，这会引入额外的布局间距，直接将List作为NavigationView的子视图即可。
2. 统一搜索绑定变量：原代码中searchable绑定的是query，但搜索结果逻辑用的是searchText，变量不一致不仅会导致搜索功能失效，也可能间接影响布局，需要统一为同一个变量。
3. 优化背景设置：避免多层VStack嵌套设置背景，将背景色直接应用到根容器或NavigationView，减少视觉上的间距干扰。

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    let names = ["Holly", "Josh", "Rhonda", "Ted"]
    @State private var searchText = ""
    
    var body: some View {
        NavigationView {
            List {
                ForEach(searchResults, id: \.self) { name in
                    Text(name)
                }
            }
            .searchable(
                text: $searchText,
                placement: .navigationBarDrawer(displayMode: .always),
                prompt: "搜索"
            )
            .navigationTitle("探索")
            .background(Color.gray)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray)
    }
    
    var searchResults: [String] {
        searchText.isEmpty ? names : names.filter { $0.contains(searchText) }
    }
}

额外优化（若仍有间距） #

如果修改后还有少量空白，可以强制导航标题行内显示，进一步压缩顶部空间：

.navigationTitle("探索")
.navigationBarTitleDisplayMode(.inline)

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