如何让iPad上SwiftUI的.searchable搜索框保持全屏宽度

我正在开发一个SwiftUI示例应用，使用带.sidebarAdaptable样式的TabView，包含两个占位视图和一个带搜索功能的Tab（role为.search）。在iPadOS 26上，搜索框初始状态是全屏宽度，但获得焦点后会自动缩窄，希望实现类似iPadOS 26 beta 3中TV应用的搜索框样式——聚焦时仍保持全屏宽度。

原代码 #

struct ContentView: View {
    var body: some View {
        AppTabsView()
    }
}

struct AppTabsView: View {
    var body: some View {
        TabView {
            Tab(role: .search) {
                SearchView()
            }
            
            Tab("Foo", systemImage: "star") {
                Text("This view is under development.")
            }

            Tab("Bar", systemImage: "star") {
                Text("This view is under development.")
            }
        }
        .tabViewStyle(.sidebarAdaptable)
    }
}

struct SearchView: View {
    @State private var searchText = ""
    @State private var isSearchPresented = false
    
    let allMedia = [
        "Foo",
        "Bar",
        "Zoo",
        "Boo"
    ]
    
    var filteredMedia: [String] {
        if searchText.isEmpty {
            allMedia
        } else {
            allMedia.filter { $0.localizedStandardContains(searchText) }
        }
    }
    
    var body: some View {
        NavigationStack {
            List(filteredMedia, id: \.self) { title in
                Text(title)
            }
            .searchable(text: $searchText, isPresented: $isSearchPresented, placement: .automatic, prompt: "Search")
            .navigationTitle("Search")
        }
    }
}

状态截图 #

初始状态：

聚焦状态（问题表现）：

理想效果（参考TV应用）：

解决方案 #

通过调整searchable的布局配置并稳定导航栏结构，可实现聚焦时搜索框保持全屏宽度的效果，修改后的SearchView代码如下：

struct SearchView: View {
    @State private var searchText = ""
    @State private var isSearchPresented = false
    
    let allMedia = [
        "Foo",
        "Bar",
        "Zoo",
        "Boo"
    ]
    
    var filteredMedia: [String] {
        searchText.isEmpty ? allMedia : allMedia.filter { $0.localizedStandardContains(searchText) }
    }
    
    var body: some View {
        NavigationStack {
            List(filteredMedia, id: \.self) { title in
                Text(title)
            }
            .searchable(
                text: $searchText,
                isPresented: $isSearchPresented,
                placement: .navigationBarDrawer(displayMode: .always),
                prompt: "Search"
            )
            .navigationTitle("Search")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    EmptyView()
                }
            }
        }
    }
}

关键修改说明 #

• 修改searchable的placement：使用.navigationBarDrawer(displayMode: .always)替代.automatic，强制搜索框始终以抽屉式布局占据导航栏全屏宽度，不会在聚焦时切换窄幅样式。
• 固定导航栏标题模式：设置.navigationBarTitleDisplayMode(.inline)，避免标题布局变化干扰搜索框的宽度计算。
• 添加空导航栏项：在导航栏右侧添加空的ToolbarItem，稳定导航栏的整体布局结构，防止搜索框因右侧无元素而自动收缩。

内容的提问来源于stack exchange，提问作者Igor R.