矩形中的 SwiftUI 对角线 LinearGradient

Question

问题：我正在尝试在 SwiftUI 中以矩形呈现对角线线性渐变。

我实现了一个标准的多点线性渐变，它在呈现为正方形时效果很好，但是当我将框架更改为矩形时，它有一些奇怪的行为，看起来更水平，或者有一些奇怪的剪辑。

代码：

struct CustomGradient: View {

    var body: some View {
        LinearGradient(
            gradient: Gradient(stops: [
                .init(color: Color(#colorLiteral(red: 0.776, green: 0.266, blue: 0.988, alpha: 1)), location: 0),
                .init(color: Color(#colorLiteral(red: 0.356, green: 0.348, blue: 0.870, alpha: 1)), location: 0.62),
                .init(color: Color(#colorLiteral(red: 0.357, green: 0.349, blue: 0.870, alpha: 1)), location: 1)
            ]),
            startPoint: .bottomTrailing,
            endPoint: .topLeading
        )
    }

如果我将预览渲染为正方形，效果很好预习：

代码：

struct BrandGradient_Previews: PreviewProvider {
    static var previews: some View {
        BrandGradient()
            .frame(width: 300, height: 300)
    }
}

但是，如果我将预览帧更改为 .frame(width: 300, height: 100)，它会呈现错误（IMO）：

如何让渐变在矩形和正方形中从一个角到另一个角渲染？

Answer 1

这是正常现象。这甚至不是一个 swiftui 问题。问题是你在较小的高度上拉伸相同的颜色，因此颜色的分布会少得多，因此紫色不会像在正方形中那样在边缘消失（只是没有足够的 space).

我把你的问题转给了专业的工具，比如Adobe XD和Photoshop，结果和xCode一样，我只贴Adobe XD结果，你真的可以运行在任何在线或离线梯度生成器上进行相同的测试。

希望对您有所帮助。

矩形中的 SwiftUI 对角线 LinearGradient

SwiftUI diagonal LinearGradient in a rectangle

io

linear-gradients

swiftui