Início / coding / Perguntas / 78500390
Accepted
Gustav cat
Asked: 2024-05-19 00:49:58 +0800 CST

Como posso criar um desfoque tão forte no Swiftui?

  • 772

Atualmente, estou trabalhando em um aplicativo e queria saber como consigo projetar as tarefas de forma a criar um desfoque tão grande.

captura de tela

Eu criei um protótipo, mas ele não funciona tão bem, mas aqui está meu código.

struct BlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style
    var opacity: Double
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: style))
        blurView.clipsToBounds = true
        blurView.alpha = CGFloat(opacity)
        return blurView
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
        uiView.alpha = CGFloat(opacity)
    }
}


struct Hintergrund: View {
    var body: some View {
        ZStack {
            BlurView(style: .systemUltraThinMaterialLight, opacity: 0.7)
            
            LinearGradient(gradient: Gradient(stops: [
                .init(color: .white.opacity(0), location: 0),
                .init(color: .white.opacity(0.1), location: 0.1),
                .init(color: .white.opacity(0.5), location: 0.5),
                .init(color: .white.opacity(0.5), location: 0.9), // Ändere die Position des letzten Haltepunkts
                .init(color: .white.opacity(0), location: 1),
            ]), startPoint: .topLeading, endPoint: .bottomTrailing)
            .cornerRadius(10)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            LinearGradient(gradient: Gradient(stops: [
                .init(color: .white.opacity(0), location: 0),
                .init(color: .white.opacity(0.1), location: 0.5),
                .init(color: .white.opacity(0), location: 1),
            ]), startPoint: .topTrailing, endPoint: .bottomLeading)
            .cornerRadius(10)
            .frame(maxWidth: .infinity, maxHeight: .infinity) 
        }
    }
}
user-interface

1 respostas

  1. Best Answer

    Em vez de um UIViewRepresentable personalizado, você deve usar isto:

    Rectangle()
    .foregroundStyle(.regularMaterial)

    Com esta tentativa você também tem muita flexibilidade.

    struct Hintergrund: View {
var body: some View {
    ZStack {
        Rectangle()
            .foregroundStyle(.regularMaterial)
            .opacity(0.7) // I would remove opacity
        LinearGradient(gradient: Gradient(stops: [
            .init(color: .white.opacity(0), location: 0),
            .init(color: .white.opacity(0.1), location: 0.1),
            .init(color: .white.opacity(0.5), location: 0.5),
            .init(color: .white.opacity(0.5), location: 0.9), // Ändere die Position des letzten Haltepunkts
            .init(color: .white.opacity(0), location: 1),
        ]), startPoint: .topLeading, endPoint: .bottomTrailing)
        .cornerRadius(10)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        
        LinearGradient(gradient: Gradient(stops: [
            .init(color: .white.opacity(0), location: 0),
            .init(color: .white.opacity(0.1), location: 0.5),
            .init(color: .white.opacity(0), location: 1),
        ]), startPoint: .topTrailing, endPoint: .bottomLeading)
        .cornerRadius(10)
        .frame(maxWidth: .infinity, maxHeight: .infinity) 
    }
}
}
    • 0

relate perguntas