SwiftUI - 添加模糊线性渐变

Question

我想在一张图片的顶部添加白色文本。

我的策略是添加一个渐变，该渐变将在文本区域模糊（请查看附图）。

有没有什么好主意？

- Theoutsider

---

你尝试过什么？如果你能分享你的代码，我们可以帮助填补空白。 - lorem ipsum

我在考虑将模糊图像作为单独的图层添加到主图像之上。然后创建一个渐变并将遮罩图层添加到模糊图像上。 - Theoutsider

Answer 1

这个怎么样？

对于模糊效果，只需使用.blur()修饰符-无需使用单独的已模糊图像。

struct ContentView: View {
    
    let gradient = LinearGradient(
        gradient: Gradient(stops: [
            .init(color: .purple, location: 0),
            .init(color: .clear, location: 0.4)
        ]),
        startPoint: .bottom,
        endPoint: .top
    )
    
    var body: some View {
        Image("Background")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .overlay(
                ZStack(alignment: .bottom) {
                    Image("Background")
                        .resizable()
                        .blur(radius: 20) /// blur the image
                        .padding(-20) /// expand the blur a bit to cover the edges
                        .clipped() /// prevent blur overflow
                        .mask(gradient) /// mask the blurred image using the gradient's alpha values
                    
                    gradient /// also add the gradient as an overlay (this time, the purple will show up)
                    
                    HStack {
                        Image("Icon") /// app icon
                            .resizable()
                            .frame(width: 64, height: 64)
                        
                        VStack(alignment: .leading) {
                            Text("Classroom of the Elite")
                                .bold()
                            Text("Horikita best girl")
                                .opacity(0.75)
                        }
                        .frame(maxWidth: .infinity, alignment: .leading) /// allow text to expand horizontally
                        
                        Button { } label: {
                            Text("GET")
                                .bold()
                                .padding(8)
                                .background(Color.gray)
                                .cornerRadius(16)
                        }
                    }
                    .foregroundColor(.white)
                    .padding(20)
                }
            )
    }
}

- aheze

---

线性渐变的运用非常棒。 - Jason

Answer 2

以下解决方案可能对其他人有用，因为已经有答案了。

你可以通过使用苹果的Material形状图层，将模糊效果作为单独的图层来实现类似的效果，就像这样：

var gradientView: some View {
    Rectangle()
        .fill(.ultraThinMaterial)
        .mask {
            VStack(spacing: 0) {
                LinearGradient(
                    colors: [
                        Color.black.opacity(1),
                        Color.black.opacity(0),
                    ],
                    startPoint: .bottom,
                    endPoint: .top
                )
                Rectangle()
            }
        }
        .frame(height: 90)
}

初始来源：https://www.reddit.com/r/SwiftUI/comments/o8d8ju/comment/h36etgo/?utm_source=reddit&utm_medium=web2x&context=3

- liudasbar