iOS 26/27 SwiftUI——如何实现“把搜索作为一个选项卡”的过渡效果（选项卡向左折叠、底部显示搜索框），并且有一个分离的搜索选项卡？

移动开发 2026-07-08

我正在用SwiftUI构建一个应用，运行在 Xcode 26/27（测试版），目标平台为iOS 26 / iOS 27，我想要苹果自家应用（电话、新闻、健康、音乐）所使用的那种精准的 “作为标签页的搜索” 行为：一个搜索标签页，在Liquid Glass标签栏的右侧以 视觉上分离 的方式显示，当点击时，其他标签会 向左折叠，而 搜索输入框在屏幕底部滑入（取代标签栏的位置），并出现键盘。

What’s supposed to work (WWDC “search as a tab”):

TabView {
    Tab("Home", systemImage: "house") { HomeView() }
    Tab("Ranking", systemImage: "medal") { RankingView() }
    Tab(role: .search) {
        NavigationStack {
            SearchView()
        }
    }
}
.searchable(text: $query)

在 iOS 26 上，这会得到一个按预期分离并可变形的搜索标签页。

My problem on iOS 27:

在我的iOS 27构建中，Tab(role: .search) 没有在视觉上分离 — 它仍然紧贴在其他标签上。

我在Stack Overflow的一个回答里找到了分离的修复方法，而不是在Apple的文档里（我是不是眼瞎了？我真的找不到相关文档）——在iOS 27有一个新的 TabRole.prominent：

Tab("Search", systemImage: "magnifyingglass", value: .search, role: .prominent) {
    NavigationStack { SearchView() }
}

这会正确地把标签从右侧分离。

但现在我失去了搜索行为：在 .prominent 下，.searchable 只是渲染一个顶部的普通搜索框（在导航栏下方）。我可以通过以下方式把它推到底部栏：

.searchable(text: $query)
.toolbar { DefaultToolbarItem(kind: .search, placement: .bottomBar) }

……但那只是一个静态的底部搜索框。我得不到那种变形效果——标签向左折叠，搜索框在标签栏的位置扩展（像电话应用那样）。

问题

在iOS 27上，如何同时实现以下两点：

视觉上分离的搜索标签页（显然需要 .prominent），以及
原生的“作为标签页的搜索”变形（其他标签向左折叠、搜索输入框替代底部的标签栏并弹出键盘），似乎只能在 role: .search 时发生？

在iOS 27上，.search（用于变形）和 .prominent（用于分离）是否互斥？是否有我遗漏的API，可以让 role: .search 标签在iOS 27上可靠地分离，或通过触发 .prominent 来实现变形？

环境： Xcode 27 beta · iOS 27模拟器+ 设备 · 部署目标iOS 26。

解决方案

尝试将修饰符 .tabViewSearchActivation(.searchTabSelection) 应用到 TabView 上：

TabView {
    Tab("Home", systemImage: "house") { HomeView() }
    Tab("Ranking", systemImage: "medal") { RankingView() }
    Tab(role: .search) {
        NavigationStack {
            SearchView()
        }
    }
}
.searchable(text: $query)
.tabViewSearchActivation(.searchTabSelection) // 👈 here

在新的Device Hub模拟器上运行iOS 27.0时，首次尝试的变形不太流畅。但后续尝试会更好：