swift - 用居中的角度渐变填充圆不能正确居中

Question

我正在观看 WDDC session 237 视频，看到了一个有趣的例子，它使用 SwiftUI 的渐变和形状创建了一个“色轮”-esque circle，所以我尝试在我的代码中复制它，但我没有得到相同的结果。

这是代码：

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)

但它的中心靠近底部而不是圆的中心。另一方面，在 an 上做同样的事情，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)

以下是他们三个人的样子：

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

标签： swiftgradientswiftui

Answer 1

Circle似乎需要.aspectRatio(contentMode: ContentMode.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)
        }
    }

}

输出：