SwiftUI：如何在矩形上拉伸渐变 LinearGradient？

Question

我正在尝试在矩形上渲染线性渐变。以下是代码：

Rectangle()
        .foregroundColor(Color.red)
        .overlay(
            LinearGradient(gradient: Gradient(colors: [.red, .yellow, .blue]), startPoint: .topLeading, endPoint: .bottomTrailing)
        )
        .frame(width: 300, height: 200)
        .position(x: 170, y: 120)

当我在正方形上呈现它时，一切看起来都正确：

然而，当我在矩形上渲染它时，它看起来不再像是从左上角到右下角了。它只是看起来像被裁剪过的相同图像：

以下是SVG中的渲染效果（蓝色似乎不一样，但这并不重要），以及我希望在Swift中看到的效果：

黄色的对角线应该直接从一个角到另一个角，因为我正在指定 startPoint: .topLeading, endPoint: .bottomTrailing。SwiftUI diagonal LinearGradient in a rectangle 这里说这是标准行为，这没问题 - 我不是要说 SwiftUI 渲染有误，我只需要一种方法使它看起来像 svg 中的样子。

- f3dm76

Answer 1

多么有趣的问题 :)

“朴素”的方法是将渐变呈正方形渲染，然后旋转、挤压或拉伸它以适应矩形。旋转需要更多的数学知识，所以这里介绍“挤压”版本：

struct ContentView: View {
    var body: some View {
        
        Rectangle()
            .overlay(
                GeometryReader { g in
                    LinearGradient(
                        gradient: Gradient(colors: [.red, .yellow, .blue]),
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                    .frame(width: g.size.width, height: g.size.width)
                    .scaleEffect(x: 1.0, y: g.size.height / g.size.width, anchor: .top)
                }
            )
            .frame(width: 300, height: 200)
        
    }
}

注意事项：

• 为了进行挤压，我们需要知道矩形的比例，你已经在这种情况下使用了overlay()，而覆盖层是由Rectangle()限定的，因此我们可以使用GeometryReader()读取大小;
• 我们需要从应用于正方形开始渐变色，并且有几种方法可以做正方形。由于我们已经知道矩形的大小，所以我选择了一个边长等于包含矩形宽度的正方形;
• 然后应用scaleEffect()，将正方形的高度挤压到矩形的高度。

请让我知道这是否是您要寻找的内容，或者是否有更好的方法来完成这个任务！

谢谢， -Baglan

- Baglan

---

谢谢您的快速回答，我想我会采用您的方法。看起来有点瑕疵，但这就是 SwiftUI 的方式。 - f3dm76