调整 Mac 应用程序的窗口透明度和模糊度

Question

Warp 终端 Mac 应用程序如何实现允许用户调整窗口透明度和模糊程度的功能？

我尝试过使用

NSVisualEffectView.blendingMode

和

NSVisualEffectView.material

，这确实给我带来了模糊的背景效果，但不允许我调整它应该有多模糊。

如果有一个从 0.0 到 1.0 的布尔值来调整模糊度就好了——如何实现？请参阅图片以了解该功能在 Warp 应用程序中的工作原理。 Warp 应用程序的图像

Answer 1

有

opacity(_:)

和

blur(radius:, opaque:)

视图修改器。

您可以这样做：

struct ContentView: View {
    @State private var customOpacity = 0.75
    @State private var customBlurriness = 0.85
    @State private var isSheet = false
    
    var body: some View {
        VStack {
            ForEach(0 ..< 20) { _ in
                Text("But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born ...")
            }
        }
        .padding()
        .frame(width: 400, height: 300)
        .opacity(customOpacity)
        .blur(radius: customBlurriness)
        .onTapGesture {
            isSheet.toggle()
        }
        
        .sheet(isPresented: $isSheet) {
            VStack(alignment: .leading) {
                Slider(value: $customOpacity) {
                    Text("Opacity \((customOpacity * 100).formatted(.number.precision(.fractionLength(0))))")
                        .frame(width: 100, alignment: .leading)
                }
                Slider(value: $customBlurriness) {
                    Text("Blur radius \((customBlurriness * 100).formatted(.number.precision(.fractionLength(0))))")
                        .frame(width: 100, alignment: .leading)
                }
                Button("Ok") {
                    isSheet = false
                }
                .keyboardShortcut(.defaultAction)
            }
            .padding()
            .background(.background)
            .cornerRadius(8)
            .frame(width: 300)
        }
    }
}