SwiftUI：如何将.brightness视图修饰符用作渐变效果？

你希望让图片底部（或顶部）实现渐变提亮效果，当前使用白色透明渐变覆盖的方式效果不佳，想要利用Apple官方的.brightness()修饰符结合渐变来实现，因为它和白色叠加的提亮效果存在差异。

你的现有实现代码：

import SwiftUI

struct White: View {
    @State private var amount = 0.5
    
    var body: some View {
        Image("Background")
            .resizable()
            .scaledToFit()
            .overlay {
                LinearGradient(colors: [Color.clear, Color.white.opacity(amount)], startPoint: .center, endPoint: .bottom)
            }
    }
}

示例效果参考：

解决方案 #

可以通过叠加两张相同图片的方式，结合.brightness()修饰符和渐变遮罩（mask）来实现需求：

import SwiftUI

struct GradientBrightnessView: View {
    @State private var amount = 0.5
    
    var body: some View {
        ZStack {
            // 底层：原图，保持原始亮度
            Image("Background")
                .resizable()
                .scaledToFit()
            
            // 上层：提亮后的图片，用渐变遮罩控制显示范围
            Image("Background")
                .resizable()
                .scaledToFit()
                .brightness(amount)
                .mask(
                    LinearGradient(
                        colors: [.clear, .black],
                        startPoint: .top,
                        endPoint: .bottom
                    )
                )
        }
    }
}

说明 #

1. 核心逻辑：通过ZStack叠加原图和提亮后的图片，利用渐变遮罩让提亮效果只在指定区域（示例中是底部）渐变显现。
2. 调整方向：修改LinearGradient的startPoint和endPoint，可以切换提亮顶部还是底部（比如将startPoint设为.bottom、endPoint设为.top即可实现顶部提亮）。
3. 亮度控制：调整amount值可以控制提亮的强度，取值范围建议在0到1之间（.brightness(0)为原始亮度，.brightness(1)为最大提亮）。

这种方式直接使用官方.brightness()修饰符调整图片本身亮度，比白色叠加的方式效果更自然，符合你的需求。

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