如何为SwiftUI矩形着色两种不同的颜色？

Question

假设我有一个简单的SwiftUI矩形，例如：

Rectangle()
  .frame(width: 20, height: 20)

如何将其中一半以45度角着色为白色，而另一半以45度角着色为黑色？

我最初的猜测是使用ZStack将两个矩形相互叠放，但是这种方式对我来说似乎很麻烦。

Answer 1

可以通过transforming the shape实现简单的几何图形：

    Rectangle().rotation(.degrees(45), anchor: .bottomLeading).scale(sqrt(2), anchor: .bottomLeading).frame(width: 200, height: 200).background(Color.red).foregroundColor(Color.blue).clipped()

Answer 2

您应使用path进行绘制。我的想法是将Rectangle和Triangle放入ZStack：

struct GradientRectangle: View {

    var body: some View {

        ZStack {
            Rectangle()

            Triangle()
                .foregroundColor(.red) // here should be .white in your case
        }
            .frame(width: 300, height: 300)

    }
}

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        path.move(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))

        return path
    }
}

结果将是：

Answer 3

最不“hacky”的方式可能是 Gradient。使用这样的代码：

Rectangle()
.fill(
    LinearGradient(
        gradient: Gradient(stops: [
            Gradient.Stop(color: .red, location: 0.5),
            Gradient.Stop(color: .black, location: 0.5)
        ]),
        startPoint: .topLeading,
        endPoint: .bottomTrailing))
.frame(width: 200, height: 200)

你得到一个像这样的矩形：

实际发生的是，SwiftUI 创建了两种颜色渐变：一种是从 0.0 - 0.5，从红色到红色，另一种是从 0.5 到 1.0，从黑色到黑色。

另请注意，fill 必须立即遵循路径（此处为 Rectangle），因为它是 Shape 的 fill 变体。