毛玻璃，学名「类玻璃柔光材质」，在规划中也叫「玻璃拟态」（Glassmorphism）。在生活中叫磨砂玻璃，俗称“毛玻璃”。

懂点规划

毛玻璃作用最早出使用在 2007 年微软的 Windows Vista 和 win7 的体系 UI 中。

SwiftUI 开发之旅：毛玻璃效果的设计理念和实现

win7 毛玻璃作用

之后，苹果分别在 2013 年发布的 ios7 体系和 2014 年发布的 OS X 10.10 Yosemite 体系中广泛运用了这个作用，比方底部菜单栏，告诉中心等。通明的作用再结合当下盛行的扁平化规划，这些改变让大家觉得耳目一新。

SwiftUI 开发之旅：毛玻璃效果的设计理念和实现

ios7 毛玻璃作用

SwiftUI 开发之旅：毛玻璃效果的设计理念和实现

MacOS 10.10 毛玻璃作用

在之后的很长时间里，这种风格成为了规划师们常用的方法。直到在近期发布的 Win11 以及 MacOSBigSur 中更加强化了毛玻璃质感，又将玻璃拟态风格的趋势掀起了一个小高潮。

SwiftUI 开发之旅：毛玻璃效果的设计理念和实现
SwiftUI 开发之旅：毛玻璃效果的设计理念和实现

各家对于毛玻璃的完成有些许差异，但关于毛玻璃作用，主要有 4 个特征：

  • 通明感：运用布景含糊和高斯含糊的磨砂作用，呈现出通透感。
  • 层次感： 经过前后联系的叠加，摆开界面元素层次，突出重点。
  • 色彩感： 着重含糊通明度的鲜明，艳丽的布景底色，运用艳丽色彩作为着重色而且从半通明层中透出，更突出了含糊的通明作用。
  • 玻璃质感： 经过边缘的微妙处理，于半通明物体上的细微且光亮的边框，表现出玻璃质感。

毛玻璃的使用场景

毛玻璃在规划中经常出现，常用的一些规划场景包括以下内容。

  • 图标规划

SwiftUI 开发之旅：毛玻璃效果的设计理念和实现
SwiftUI 开发之旅：毛玻璃效果的设计理念和实现

  • 五颜六色布景
SwiftUI 开发之旅：毛玻璃效果的设计理念和实现
  • 卡片式
SwiftUI 开发之旅：毛玻璃效果的设计理念和实现

SwiftUI 毛玻璃

SwiftUI 在 iOS15 上供给了名为 Material 的布景含糊作用，合适使用于布景图片上的文字说明，叠加布景含糊的色块以凸显文字。

SwiftUI 开发之旅：毛玻璃效果的设计理念和实现

上图的作用运用 ultraThinMaterial 以最轻微含糊的选项，此时能看到布景的含糊作用。

Material 供给了5个含糊参数，由弱到强分别为：

  • ultraThinMaterial
  • thinMaterial
  • regularMaterial
  • thickMaterial
  • ultraThickMaterial

SwiftUI 毛玻璃作用的完成

经过 Material 的 API 可以完成毛玻璃的 UI 作用，以下示例是简单的经过 SwiftUI 代码完成的毛玻璃过程：

  1. 运用 ZStack 设置一个布景色。
  2. 再给块的布景设置 Material。
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 开发之旅：毛玻璃效果的设计理念和实现
SwiftUI 开发之旅：毛玻璃效果的设计理念和实现

在 swiftui 中，毛玻璃作用很合适用来展示卡片，或者是弹窗，sheet等内容的布景展示，下面来看一个在 sheet 中运用的例子。

咱们在上个示例的基础上填写一些内容和 sheet 相关代码：

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()
      }
    }
  }
}

SwiftUI 开发之旅：毛玻璃效果的设计理念和实现

然鹅，并没有出现咱们想要的毛玻璃作用。这是由于 sheet 模态框默认情况下布景是不通明的，咱们还需要将模态框的布景色设置为通明，才能正常显示毛玻璃的作用。

新增一个 BackgroundClearView 结构体，来完成布景清除功能：

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 修饰符：

.sheet(isPresented: $show) {
      ZStack {
       // ...
      }
      .background(BackgroundClearView())
}

SwiftUI 开发之旅：毛玻璃效果的设计理念和实现

此时模态框底部有一些留白，再给 ZStack 增加一个 ignoresSafeArea 修饰符处理一下安全区域就可以了。

来看看终究作用。

SwiftUI 开发之旅：毛玻璃效果的设计理念和实现

总结

咱们回顾了毛玻璃作用的诞生和它的实际使用。学习了如安在 swiftui 中使用毛玻璃作用，可以看得出，在有大面积色块的布景上运用毛玻璃作用能带来不一样的用户体会，比方 sheet，音讯卡片等。无妨的在你的使用中运用这一规划，给你的用户体会增加一些不一样的东西吧。

这是 SwiftUI 开发之旅专栏的文章，是 swiftui 开发学习的经验总结及实用技巧分享，欢迎重视该专栏，会坚持输出。同时欢迎重视我的个人大众号 @JSHub：供给最新的开发信息速报，优质的技能干货推荐。或是检查我的个人博客：Devcursor。

点赞：如果有收获和帮助，请点个赞支持一下！

保藏：欢迎保藏文章，随时检查！

评论：欢迎评论交流学习，共同进步！