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

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

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

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

闲言少叙，让我们马上开始液态玻璃 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 = 0

TabView(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 的新纪元

🎉 总结

在本篇博文中，我们探索了 Liquid Glass 为 tab 导航带来的焕新体验。新的视觉、行为与结构为 SwiftUI 注入新活力，也为开发者带来更多“独步天下，登峰造极”的内功修为。

👋 感谢观赏！再会啦！😎