SwiftUI 中的圆形边框

Question

如何在 SwiftUI 中实现圆角边框？

我认为这会起作用：

.cornerRadius(10)
.border(Color.white)

虽然它不起作用。

这是我目前的解决方法：

.overlay(RoundedRectangle(cornerRadius: 10).stroke(lineWidth: 1).foregroundColor(.white))

Answer 1

这不是解决方法，而是您在 SwiftUI 中的做法。两件事：

曾经有一个 cornerRadius 修饰符在... beta 4 中被弃用了？测试版 5？是的，这是一个移动的目标。

非常感谢@kontiki (blog post) ，这里有一个很好地 returns 你想要的扩展:

 extension View {
     public func addBorder<S>(_ content: S, width: CGFloat = 1, cornerRadius: CGFloat) -> some View where S : ShapeStyle {
         let roundedRect = RoundedRectangle(cornerRadius: cornerRadius)
         return clipShape(roundedRect)
              .overlay(roundedRect.strokeBorder(content, lineWidth: width))
     }
 }

用法：

.addBorder(Color.white, width: 1, cornerRadius: 10)

Answer 2

寻找圆形和边框的开发者。

Image("turtlerock")
   .clipShape(Circle())
   .overlay(
       Circle().stroke(Color.white, lineWidth: 4))

Answer 3

我比较喜欢这个：

.background(RoundedRectangle(cornerRadius: 4.0).stroke(borderColor, lineWidth: borderWidth))
.foregroundColor(.blue)

覆盖与偏移方法不一致...

Answer 4

对于外部对齐的圆角边框，在覆盖之前，您可以在视图中添加一些填充⤵︎

let strokeWidth: CGFloat = 1

YourView
    .padding([.all], strokeWidth / 2) // set the width to half of the stroke width
    .overlay(
        RoundedRectangle(cornerRadius: 5)
        .stroke(Color.black, lineWidth: strokeWidth)
    )

SwiftUI 中的圆形边框

Rounded Borders in SwiftUI

swift

swiftui