swiftui-liquid-glass

SwiftUI Liquid Glass

概述

使用此技能來建置或審查完全符合 iOS 26+ Liquid Glass API 的 SwiftUI 功能。優先使用原生 API（glassEffect、GlassEffectContainer、玻璃按鈕樣式）以及 Apple 的設計指引。保持使用方式一致，在需要時加入互動性，並注意效能。

工作流程決策樹

根據需求選擇對應路徑：

1) 審查現有功能

• 檢查哪些地方應該使用 Liquid Glass，哪些地方不該使用。
• 確認修飾詞順序、形狀使用方式與容器放置位置是否正確。
• 檢查 iOS 26+ 的可用性處理以及合理的降級方案。

2) 使用 Liquid Glass 改善功能

• 找出適合玻璃效果的目標元件（表面、標籤、按鈕、卡片）。
• 當多個玻璃元件同時出現時，重構為使用 GlassEffectContainer。
• 僅對可點擊或可聚焦的元件使用互動式玻璃效果。

3) 使用 Liquid Glass 實作新功能

• 先設計玻璃表面與互動方式（形狀、顯著程度、分組）。
• 在佈局/外觀修飾詞之後加入玻璃修飾詞。
• 僅在視圖層級結構隨動畫改變時加入變形轉場。

核心準則

• 優先使用原生 Liquid Glass API，而非自訂模糊效果。
• 當多個玻璃元件共存時，使用 GlassEffectContainer。
• 在佈局與視覺修飾詞之後套用 .glassEffect(...)。
• 對會回應觸控或指標的元件使用 .interactive()。
• 保持相關元件間的形狀一致，以營造整體感。
• 使用 #available(iOS 26, *) 進行版本控管，並提供非玻璃效果的降級方案。

審查檢查清單

• 可用性：需有 #available(iOS 26, *) 並提供降級 UI。
• 組合：多個玻璃視圖應包在 GlassEffectContainer 中。
• 修飾詞順序：glassEffect 應在佈局/外觀修飾詞之後套用。
• 互動性：僅在使用者互動存在的元件上使用 interactive()。
• 轉場：使用 glassEffectID 搭配 @Namespace 實現變形效果。
• 一致性：形狀、色調與間距在功能中保持一致。

實作檢查清單

• 定義目標元件與期望的玻璃顯著程度。
• 將分組的玻璃元件包在 GlassEffectContainer 中，並調整間距。
• 視需要使用 .glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...))。
• 對操作按鈕使用 .buttonStyle(.glass) / .buttonStyle(.glassProminent)。
• 當視圖層級結構改變時，使用 glassEffectID 加入變形轉場。
• 為較舊的 iOS 版本提供降級材質與視覺效果。

快速程式碼片段

直接使用這些模式，並根據需求調整形狀、色調與間距。

if #available(iOS 26, *) {
    Text("Hello")
        .padding()
        .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
} else {
    Text("Hello")
        .padding()
        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
}

GlassEffectContainer(spacing: 24) {
    HStack(spacing: 24) {
        Image(systemName: "scribble.variable")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
        Image(systemName: "eraser.fill")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
    }
}

Button("Confirm") { }
    .buttonStyle(.glassProminent)

參考資源

• 參考指南：references/liquid-glass.md
• 建議查閱 Apple 官方文件以取得最新的 API 細節。