SwiftUI 開發之旅：毛玻璃效果的設計理念和實現
theme: smartblue
毛玻璃，學名「類玻璃柔光材質」，在設計中也叫「玻璃擬態」（Glass morphism）。在生活中叫磨砂玻璃，俗稱“毛玻璃”。
懂點設計
毛玻璃效果最早出應用在 2007 年微軟的 Windows Vista 和 win7 的系統 UI 中。
win7 毛玻璃效果
之後，蘋果分別在 2013 年釋出的 ios7 系統和 2014 年釋出的 OS X 10.10 Yosemite 系統中廣泛使用了這個效果，比如底部選單欄，通知中心等。透明的效果再結合當下流行的扁平化設計，這些變化讓大家覺得耳目一新。
ios7 毛玻璃效果
MacOS 10.10 毛玻璃效果
在之後的很長時間裡，這種風格成為了設計師們常用的手法。直到在近期釋出的 Win11 以及 MacOS Big Sur 中更加強化了毛玻璃質感，又將玻璃擬態風格的趨勢掀起了一個小高潮。
各家對於毛玻璃的實現有些許差異，但關於毛玻璃效果，主要有 4 個特徵：
- 透明感：使用背景模糊和高斯模糊的磨砂效果，呈現出通透感。
- 層次感： 通過前後關係的疊加，拉開介面元素層次，突出重點。
- 色彩感： 強調模糊透明度的鮮明，鮮豔的背景底色，使用鮮豔色彩作為強調色並且從半透明層中透出，更突出了模糊的透明效果。
- 玻璃質感： 通過邊緣的微妙處理，於半透明物體上的細微且光亮的邊框，表現出玻璃質感。
毛玻璃的應用場景
毛玻璃在設計中經常出現，常用的一些設計場景包括以下內容。
- 圖示設計
- 彩色背景
- 卡片式
SwiftUI 毛玻璃
SwiftUI 在 iOS15 上提供了名為 Material 的背景模糊效果，適合應用於背景圖片上的文字說明，疊加背景模糊的色塊以凸顯文字。
上圖的效果使用 ultraThinMaterial 以最輕微模糊的選項，此時能看到背景的模糊效果。
Material 提供了5個模糊引數，由弱到強分別為：
- ultraThinMaterial
- thinMaterial
- regularMaterial
- thickMaterial
- ultraThickMaterial
SwiftUI 毛玻璃效果的實現
通過 Material 的 API 可以實現毛玻璃的 UI 效果，以下示例是簡單的通過 SwiftUI 程式碼實現的毛玻璃步驟：
- 使用 ZStack 設定一個背景色。
- 再給塊的背景設定 Material。
```swift struct Test4: View { var body: some View { ZStack { Color.init(hex: "31D3D3").edgesIgnoringSafeArea(.all) VStack { Text(".ultraThin") .padding() .frame(width: 200, height: 100) .background(.ultraThinMaterial) Text(".thin") .padding() .frame(width: 200, height: 100) .background(.thinMaterial) Text(".regular") .padding() .frame(width: 200, height: 100) .background(.regularMaterial) Text(".thick") .padding() .frame(width: 200, height: 100) .background(.thickMaterial) Text(".ultraThick") .padding() .frame(width: 200, height: 100) .background(.ultraThickMaterial) } .padding() .shadow(color: .black.opacity(0.25), radius: 5, x: 0, y: 8) }
}
} ```
下面效果展現了 5 種強度在深色模式和淺色模式下的顯示效果，可以明顯看出到在 thickMaterial 以上程度的背景模糊效果過強以至於難以看到背景色塊。
在 swiftui 中，毛玻璃效果很適合用來展示卡片，或者是彈窗，sheet等內容的背景展示，下面來看一個在 sheet 中使用的例子。
我們在上個示例的基礎上填寫一些內容和 sheet 相關程式碼：
```swift import SwiftUI
struct Test4: View {
@State var show: Bool = false @State var value1 = "" var body: some View { ZStack { // ... } .sheet(isPresented: $show) { ZStack { Rectangle() .fill(.thickMaterial) // 毛玻璃效果 VStack { HStack { Button(action: { self.show = false }) { Image(systemName: "xmark") } Spacer(minLength: 0) Text("文章").bold() Spacer(minLength: 0) }.padding() VStack { Text("SwiftUI 開發之旅").padding() Text("毛玻璃效果的設計理念和實現").padding() } Spacer() HStack { Button(action: { self.show = false }, label: { Text("點贊") .padding(.horizontal, 2) .padding(.vertical, 15) .frame(maxWidth: .infinity) .background(Color.blue) .foregroundColor(.white).cornerRadius(12) }) .padding(.bottom) }.padding() }.padding() } } } } ```
然鵝，並沒有出現我們想要的毛玻璃效果。這是因為 sheet 模態框預設情況下背景是不透明的，我們還需要將模態框的背景色設定為透明，才能正常顯示毛玻璃的效果。
新增一個 BackgroundClearView 結構體，來實現背景清除功能：
```swift struct BackgroundClearView: UIViewRepresentable { func makeUIView(context: Context) -> UIView { let view = UIView() DispatchQueue.main.async { view.superview?.superview?.backgroundColor = .clear } return view }
func updateUIView(_ uiView: UIView, context: Context) {}
} ```
然後給 ZStack 新增 background 修飾符：
swift
.sheet(isPresented: $show) {
ZStack {
// ...
}
.background(BackgroundClearView())
}
此時模態框底部有一些留白，再給 ZStack 新增一個 ignoresSafeArea 修飾符處理一下安全區域就可以了。
來看看最終效果。
總結
我們回顧了毛玻璃效果的誕生和它的實際應用。學習瞭如何在 swiftui 中應用毛玻璃效果，可以看得出，在有大面積色塊的背景上運用毛玻璃效果能帶來不一樣的使用者體驗，比如 sheet，訊息卡片等。不妨的在你的應用中運用這一設計，給你的使用者體驗新增一些不一樣的東西吧。
這是 SwiftUI 開發之旅專欄的文章，是 swiftui 開發學習的經驗總結及實用技巧分享，歡迎關注該專欄，會堅持輸出。同時歡迎關注我的個人公眾號 @JSHub：提供最新的開發資訊速報，優質的技術乾貨推薦。或是檢視我的個人部落格：Devcursor。
👍點贊：如果有收穫和幫助，請點個贊支援一下！
🌟收藏：歡迎收藏文章，隨時檢視！
💬評論：歡迎評論交流學習，共同進步！