SwiftUI简明概念（4）：如何对shape同时进行fill和stroke

原创

已于 2024-12-05 16:28:36 修改 · 632 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#swiftui #html #ios

于 2024-09-28 19:41:02 首次发布

1、iOS17方案

iOS17上可以同时对shape调用fill和stroke：

Circle()
    .stroke(.red, lineWidth: 20)
    .fill(.orange)
    .frame(width: 150, height: 150)

效果也如我们所预料的：

而且stroke可以调用任意次：

Circle()
    .stroke(.blue, lineWidth: 45)
    .stroke(.green, lineWidth: 35)
    .stroke(.yellow, lineWidth: 25)
    .stroke(.orange, lineWidth: 15)
    .stroke(.red, lineWidth: 5)
    .frame(width: 150, height: 150)

最终的效果是在Circle外边加了好几圈border。

2、iOS16方案

iOS16及之前虽然也有stroke、fill方法，但是将它们像iOS17那样写在一起是无效的。一个替代方案是使用strokeBorder或stroke给shape增加一个border来实现stroke的效果，然后用shape的fill版本来作为background，将它们叠在一起就能实现我们需要的效果：