SwiftUI如何创建带淡绿色调的模糊背景？

你的代码里直接叠加.background(.green)和.background(.ultraThinMaterial)不会生效，因为SwiftUI中后添加的背景层会完全覆盖之前的——ultraThinMaterial作为上层背景，把下层的绿色完全挡住了。

下面是两种可行的解决方案：

方案1：用ZStack组合颜色层与模糊层 #

通过ZStack将淡绿色层放在模糊层下方，利用material的半透明特性透出绿色调，你可以通过调整颜色的opacity来控制绿色深浅：

import SwiftUI

struct DimBackgroundView: View {
    var body: some View {
        VStack {
            Spacer()
            
            VStack {
                Text("Dim background")
            }
            .frame(height: 350)
            .frame(maxWidth: .infinity)
            .background(
                ZStack {
                    // 底层淡绿色，可调整opacity控制浓度
                    Color.green.opacity(0.25)
                    // 上层模糊背景层
                    Color.ultraThinMaterial
                }
            )
            .cornerRadius(30)
        }
        .ignoresSafeArea()
    }
}

struct DimBackgroundView_Previews: PreviewProvider {
    static var previews: some View {
        DimBackgroundView()
    }
}

方案2：直接修改material的tint色调 #

SwiftUI的material背景支持通过tint()方法调整固有色调，这种方式更简洁，同样可以通过opacity控制绿色的明显程度：

import SwiftUI

struct DimBackgroundView: View {
    var body: some View {
        VStack {
            Spacer()
            
            VStack {
                Text("Dim background")
            }
            .frame(height: 350)
            .frame(maxWidth: .infinity)
            // 给模糊背景添加绿色调，调整opacity控制深浅
            .background(.ultraThinMaterial.tint(.green.opacity(0.3)))
            .cornerRadius(30)
        }
        .ignoresSafeArea()
    }
}

struct DimBackgroundView_Previews: PreviewProvider {
    static var previews: some View {
        DimBackgroundView()
    }
}

你可以根据预期效果，调整两种方案中的opacity值，直到得到满意的淡绿色模糊背景。

内容的提问来源于stack exchange，提问作者baohoang