🍸 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 = 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	滾動時隱藏標簽欄，內容更聚焦

---

🎉 總結

在本篇博文中，我們探索了 Liquid Glass 為 tab 導航帶來的煥新體驗。新的視覺、行為與結構為 SwiftUI 注入新活力，也為開發者帶來更多“獨步天下，登峰造極”的內功修為。

👋 感謝觀賞！再會啦！😎