macOS Sheet中SwiftUI .searchable修饰符显示异常及导航视图问题

一、右侧分割线出现的原因 #

在macOS上，NavigationView默认采用分栏布局（类似iPad的侧边栏+详情栏结构），即使你只在其中放置了单个视图，它也会自动预留右侧详情栏的位置，并显示分割线区分主视图与潜在的详情视图。这种设计适配macOS的多窗口、分栏交互逻辑，但在sheet弹窗场景下完全多余，因此分割线成为不必要的冗余UI。

二、NavigationView在macOS上的适用性 #

NavigationView在macOS上是可用的，但它属于旧版导航组件，Apple在macOS 13+（Ventura）及以后推荐使用NavigationStack作为替代。不过NavigationView的默认分栏行为在弹窗、单视图场景下会产生冗余UI（比如你遇到的分割线），这类场景更适合用NavigationStack或直接避免使用导航容器。

三、NavigationStack下搜索栏不显示的解决方法 #

searchable修饰符在macOS上依赖导航栏区域显示，而sheet中的NavigationStack默认可能隐藏导航栏，导致搜索栏无法渲染。解决步骤如下：

1. 强制导航栏可见：给NavigationStack的子视图添加导航标题，触发导航栏显示，搜索栏会嵌入到导航栏区域。
2. 调整searchable修饰符位置：将searchable和searchScopes添加到NavigationStack的直接子视图上，确保导航容器能正确识别搜索配置。

修改后的代码示例：

var body: some View {
    NavigationStack {
        ZStack {
            CloseButton()
            patternView
        }
        .navigationTitle("选择图案") // 添加导航标题，触发导航栏显示
        .searchable(text: $searchText, prompt: Text("Pattern"))
        .searchScopes($scope) {
            Text("全部")
                .tag(nil as Pattern.PatternType?)
            ForEach(Pattern.PatternType.allCases) { type in
                Text(type.title)
                    .tag(type as Pattern.PatternType?)
            }
        }
    }
}

private var patternView: some View {
    ScrollView {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))],
                  spacing: 5) {
            Button() {
                item.pattern = nil
                dismiss()
            } label: {
                Image("no.selection")
                    .resizable()
                    .scaledToFit()
                    .frame(height: StandardSizing.image.height)
            }
            ForEach(searchResults) { pattern in
                Button {
                    item.pattern = pattern.rawValue
                    dismiss()
                } label: {
                    Image(pattern.image)
                        .resizable()
                        .scaledToFit()
                        .frame(height: StandardSizing.image.height)
                }
            }
        }
    }
    .padding()
    .buttonStyle(.plain)
}

如果不需要显示导航标题，可以通过以下方式隐藏标题文字但保留导航栏框架：

.navigationTitle("")
.navigationBarTitleDisplayMode(.inline)

调整后搜索栏就能正常显示在弹窗顶部的导航区域了。

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