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。
👍點贊：如果有收穫和幫助，請點個贊支持一下！
🌟收藏：歡迎收藏文章，隨時查看！
💬評論：歡迎評論交流學習，共同進步！