当前位置：首页 > news >正文

SwiftUI 7（iOS 26 / iPadOS 26）中玻璃化标签页的全新玩法

news 2025/7/7 7:00:47

在这里插入图片描述

🍸 Liquid Glass 登场：界面设计焕然一新

WWDC25 可谓惊喜连连，其中最引人瞩目的变革之一，莫过于苹果推出的全新跨平台设计语言 —— Liquid Glass（液态玻璃）。这一设计风格涵盖了从按钮到导航栏，再到本篇的主角——标签页（Tabs）。

在这里插入图片描述

在 Liquid Glass 中，标签页不仅视觉上焕然一新，交互也有了脱胎换骨的变化。本文将带你一探 SwiftUI 中关于新标签页的 API 和用法，助你 快人一步、技高一筹。

在本篇博文中，您将学到如下内容：

- 🍸 Liquid Glass 登场：界面设计焕然一新
- 🧭 Tab 的新写法：表里如一，图文并茂
- 📌 编程式控制 tab：与状态同步，持久不灭
- 🔍 使用 Tab 角色：让搜索独树一帜
- 🧱 跨平台适配：Sidebar 自动切换
- 🧩 Tab 附加视图（Accessory）：不止于导航
- 🌀 滚动时最小化标签栏：内容为王，导航让位
- 📌 总结：Tab 的新纪元
- 🎉 总结

闲言少叙，让我们马上开始液态玻璃 TabView 大冒险吧！
Let’s go！！！😉

🧭 Tab 的新写法：表里如一，图文并茂

为了能够充分利用全新 TabView 惊鸿艳影般的外观，我们需要使用 Tab 视图来代替之前的 tabItem 修改器方法：

struct ContentView: View {var body: some View {TabView {Tab("feed", systemImage: "list.star") {// 内容区域}Tab("settings", systemImage: "gear") {// 内容区域}}}
}

🔍 解析：

我们依然使用 TabView，但每个 tab 不再直接放在 TabView 内部；
每个子视图包裹在新的 Tab 类型中，图标采用 SF Symbols，图文并茂，美观实用；
如此写法符合 Liquid Glass 风格，可享受其视觉特性与交互增强。

📌 编程式控制 tab：与状态同步，持久不灭

利用 @SceneStorage 动态属性，我们可以将 selectedTabIndex 放在 App 关联的持久存储中，让每次应用重启都能“刻骨铭心”：

@SceneStorage("selectedTab") private var selectedTabIndex = 0TabView(selection: $selectedTabIndex) {Tab("feed", systemImage: "list.star", value: 0) {// Feed 内容}Tab("settings", systemImage: "gear", value: 1) {// 设置页内容}
}

🎓 扩展知识：

@SceneStorage 可在应用关闭后保留状态；
与 TabView(selection:) 搭配使用，当用户返回应用时可自动恢复上次选中的标签；
每个 Tab 绑定唯一 value 值，避免冲突。

🔍 使用 Tab 角色：让搜索独树一帜

为了进一步精雕细琢我们 Tab 的习性，宝子们可以让特别的 Tab 成为特别的角色，正所谓：“特别的爱给特别的你❤️”：

Tab("search", systemImage: "magnifyingglass", value: 1, role: .search) {// 搜索内容
}

比如在上面的代码中，我们就特别标记出 search 用途的标签：

在这里插入图片描述

📚 说明：

role 属性用于标记该标签的用途；
当前唯一支持的角色是 .search，系统将搜索标签在 UI 中隔离处理（如在 iOS 中会单独显示）；
在未来 iOS 版本中，可能加入更多角色，如 .profile、.notifications 等等。

🧱 跨平台适配：Sidebar 自动切换

为了能够让 iOS 中的 TabView 匹配 iPadOS / macOS 里的 sidebar 外观，我们可以用 sidebarAdaptable 样式来向系统做出特殊说明：

TabView {Tab("feed", systemImage: "list.star", value: 0) { … }Tab("settings", systemImage: "gear", value: 2) { … }
}
.tabViewStyle(.sidebarAdaptable)

在 Xcode 26 中的预览结果如下图所示：

在这里插入图片描述

💡 解读：

.sidebarAdaptable 让同一段代码在 iPhone 上呈现为底部标签页；
而在 iPad 与 macOS 上则自动转为 Sidebar，一举多得，省心省力；
是打造“响应式 UI”的必备良药。

🧩 Tab 附加视图（Accessory）：不止于导航

我们还可以为特定 Tab 附加辅助视图（Accessory）：

TabView {...}.tabViewBottomAccessory {if selectedTabIndex == 1 {HStack {TextField("输入搜索文本", text: $searchText)Button("搜索", systemImage: "sparkle.magnifyingglass", action: {print("搜索中...")})}.padding(.horizontal)}}

比如，在上面的代码中当用户进入搜索 Tab 时，我们在 TabView 工具栏上方增加一个搜索功能框：

在这里插入图片描述

🎼 应用场景：

Apple Music 使用 accessory view 来显示当前播放状态并提供暂停/跳过按钮；
可用于显示网络状态、下载进度、通知中心入口等全局功能；
全天可见、随时响应，用户体验 稳如泰山。

🌀 滚动时最小化标签栏：内容为王，导航让位

聊了前面那么多，我还是觉得 iOS 26 为 TabView 增加的最有趣且最实用的功能就是让用户在滚动时自动“精简”下方 TabBar 的布局：

.tabBarMinimizeBehavior(.onScrollDown)

完整示例在此：

TabView {Tab("feed", systemImage: "list.star", value: 0) { … }Tab("settings", systemImage: "gear", value: 2) { … }
}
.tabViewStyle(.sidebarAdaptable)
.tabBarMinimizeBehavior(.onScrollDown)
.tabViewBottomAccessory {Button("Do Action") { … }
}

从 Xcode 26 预览的显示中可以看到，当用户向下滚动时 TabBar 会自动收缩，而向上滚动时 TabBar 又会“恢复如常”：

在这里插入图片描述

🚀 扩展说明：

tabBarMinimizeBehavior 可控制标签栏在内容滚动时是否隐藏；
.onScrollDown 表示向下滚动时自动收起 tab，释放更多空间；
非常适用于资讯类、社交类、阅读类的应用。

📌 总结：Tab 的新纪元

特性	说明
新 Tab API	使用 `Tab("title", systemImage:, value:)`
场景存储	`@SceneStorage` 保存选中状态
Tab Role	当前支持 `.search`
sidebarAdaptable	iPad/macOS 自动变身为 Sidebar
tabViewBottomAccessory	全局操作附加视图
tabBarMinimizeBehavior	滚动时隐藏标签栏，内容更聚焦