我们如何实现像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 移植它。看看这篇文章。

Answer 2

这是关于此主题的推文。

人们还提到他们成功地用这个黑客发布了一个应用程序，但这取决于你。快乐编码:)