SwiftUI 如何同时填充和描边形状?

10 min read

您可以在 SwiftUI 中使用 strokeWidth 和 strokeColor 修饰符来添加描边效果,并使用 background 和 foregroundColor 修饰符来填充形状。例如,以下代码使用蓝色填充和黑色描边一个圆形:

Circle()
    .stroke(Color.black, lineWidth: 2)
    .background(Color.blue)

您也可以使用 overlay 修饰符将填充和描边组合在一起。以下代码使用绿色填充和红色描边一个矩形:

Rectangle()
    .fill(Color.green)
    .overlay(
        Rectangle()
            .stroke(Color.red, lineWidth: 4)
    )

在此示例中,我们在绿色填充的矩形上叠加了一个红色描边的矩形。

您还可以使用 mask 修饰符创建一个覆盖形状和描边的组合。以下代码创建了一个具有黄色内部和蓝色描边的圆角矩形:

let shape = RoundedRectangle(cornerRadius: 20)
shape
    .fill(Color.yellow)
    .mask(
        shape.stroke(Color.blue, lineWidth: 4)
    )

在此示例中,我们创建了一个圆角矩形形状,然后使用 stroke 修饰符添加了一个蓝色描边。然后,我们使用 mask 修饰符将该组合用作黄色填充内部的遮罩。