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

Question

我想制作一个类似于 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 之间是否有什么东西。

您对实施有任何想法吗？

Answer 1

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