我们如何实现像 iOS 14 AppLibrary 这样的模糊效果？ （SearchBar 后面的模糊效果）

Posted 2023-02-24

【中文标题】我们如何实现像 iOS 14 AppLibrary 这样的模糊效果？ （SearchBar 后面的模糊效果）

【英文标题】：How we can implement a blur effect like iOS 14 AppLibrary? ( The blur effect behind the SearchBar )

【发布时间】：2020-09-27 18:06:08

【问题描述】：

我想制作一个类似于 ios 14 AppLibrary 的模糊标题。

检查此图像：

喜欢这张图片，我有类似这样的代码：

         GeometryReader  proxy in
        ZStack(alignment: .leading)
          ScrollView(.vertical, showsIndicators: false, content: 
            Spacer()
             .frame(height: 48, alignment: .center)
             .padding(.horizontal, 24)
              .padding(.top, proxy.safeAreaInsets.top)
              .hidden()

            ...

          ).edgesIgnoringSafeArea(.all)
          
          //Need that beautiful blurry header here!          

          VStack(alignment: .center, content: 
            SearchBar()
             .frame(height: 48, alignment: .center)
             .padding(.horizontal, 24)
            
            Spacer()
          )
        .frame(width: proxy.size.width)

      

我不确定 searchBar 和 ScrollView 之间是否有什么东西。

您对实施有任何想法吗？

【参考方案1】：

您正在寻找UIVisualEffectView。这在纯 SwiftUI 中不可用，但您可以使用 UIViewRepresentable 从 UIKit 将其移植过来。看看这个article。

【讨论】：

我之前测试过 UIVisualEffectView 但效果和我贴的图片不一样