主页 / coding / 问题 / 78500390
Accepted
Gustav cat
Asked: 2024-05-19 00:49:58 +0800 CST

如何在 Swiftui 中创建如此强烈的模糊效果？

  • 772

我目前正在开发一个应用程序，想知道如何能够以能够创建如此大模糊的方式来设计任务。

截屏

我已经创建了一个原型，但它几乎不能正常工作，但这是我的代码。

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 个回答

  1. Best Answer

    您应该使用以下内容，而不是自定义 UIViewRepresentable：

    Rectangle()
    .foregroundStyle(.regularMaterial)

    通过这种尝试，您还拥有很大的灵活性。

    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

相关问题