用居中的角度渐变填充圆无法正确居中

Question

我正在观看WDDC会话237视频，并看到了一个有趣的示例，该示例使用SwiftUI使用渐变和形状创建“色轮”式圆圈，因此我尝试在代码中复制它，但没有得到相同的结果。

这是代码：

let spectrum = Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red])
let conic = AngularGradient(gradient: spectrum, center: .center, angle: Angle(degrees: -90))
return Circle().fill(conic)

但是它居中于底部附近，而不是圆心。另一方面，在Ellipse和上执行示例相同的操作Capsule可以按预期进行：

椭圆：

let spectrum = Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red])
let conic = AngularGradient(gradient: spectrum, center: .center, angle: Angle(degrees: -90))
return Ellipse().fill(conic)

胶囊：

let spectrum = Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red])
let conic = AngularGradient(gradient: spectrum, center: .center, angle: Angle(degrees: -90))
return Capsule().fill(conic)

以下是其中三个外观的图片：

这是错误还是我错过了什么？

Answer 1

Circle似乎需要aspectRatio == .fit，渐变才能起作用。

struct ContentView : View {

    var body: some View {
        let spectrum = Gradient(colors: [
            .red, .yellow, .green, .blue, .purple, .red
        ])
        let conic = AngularGradient(gradient: spectrum,
                                    center: .center,
                                    angle: Angle(degrees: -90))
        return VStack {
            Circle().fill(conic).aspectRatio(contentMode: .fit)
            Ellipse().fill(conic)
            Capsule().fill(conic)
        }
    }

}

输出：