SwiftUI 5.0

使用clipShape和overlay修饰符

下面是另一种方法，我们可以使用clipShape修改器（它会剪切视图），然后用颜色覆盖笔划。

VStack(spacing: 40) {
    Text("Image Border").font(.largeTitle)
    Text("Using cornerRadius & overlay").font(.title).foregroundColor(.gray)
    Text("Using cornerRadius will also clip the image. Then overlay a border.")
        .frame(maxWidth: .infinity)
        .font(.title)
        .padding()
        .background(Color.orange)
        .foregroundColor(.black)
    
    Image("profile")
        .clipShape(.rect(cornerRadius: 10))
        .overlay(.rect(cornerRadius: 10)
            .stroke(Color.orange, lineWidth: 4))
        .shadow(radius: 10)
}

字符串

结果

的数据

想想这个：向视图中添加一个修饰符将返回一个新的View示例，它 Package 了前一个示例。2这也是为什么添加修饰符的顺序很重要。
我们可以利用这一点：通过添加一个填充，然后添加一个背景到我们的新视图，我们可以创建我们自己的额外层：

Image("cat")
    .cornerRadius(7) // Inner corner radius
    .padding(5) // Width of the border
    .background(Color.primary) // Color of the border
    .cornerRadius(10) // Outer corner radius

字符串
结果：

的数据
您甚至可以在ViewModifier中将其转换为更容易重用的：

struct RoundedEdge: ViewModifier {
    let width: CGFloat
    let color: Color
    let cornerRadius: CGFloat

    func body(content: Content) -> some View {
        content.cornerRadius(cornerRadius - width)
            .padding(width)
            .background(color)
            .cornerRadius(cornerRadius)
    }
}

型
使用它将成为：

Image("cat").modifier(RoundedEdge(width: 5, color: .black, cornerRadius: 20))

型
这适用于任何SwiftUI视图，如Text：

Text("Some text")
    .padding(15)
    .background(Color.red)
    .modifier(RoundedEdge(width: 5, color: .black, cornerRadius: 20))

型
结果：

的

首先，请注意，你这样做的方式，没有剪切图像。也许你没有注意到，如果图像太小，或者如果它有一个相同颜色的画布的背景。但即使使用您的beta 4语法，你需要添加.clipShape()。
回到你的问题，根据Beta 5发布说明：
背景（：alignment：）和边框（：width：）修饰符的复杂重载已弃用。请改用背景（：alignment：）或覆盖（：alignment：）中的形状来绘制这些修饰符。（53067530）
所以模式应该是这样的：

.overlay(RoundedRectangle(...).stroke(...).foregroundColor(...))

字符串
在您的具体情况下：

Image("mypic").resizable().frame(width: 300, height: 300)
    .clipShape(RoundedRectangle(cornerRadius: 30))
    .overlay(RoundedRectangle(cornerRadius: 30).stroke(lineWidth: 2).foregroundColor(Color.black))

型

编写与Image View相同的圆形文本视图

struct RoundedTextView: View {
    var body: some View {
        Text("Rounded Text View")
            .frame(width: 200, height: 200, alignment: .center)
            .foregroundColor(.white)
            .background(Color.blue)
            .cornerRadius(16)
            .overlay(
                RoundedRectangle(cornerRadius: 16).stroke(Color.yellow, lineWidth: 8)
            )
    }
}

字符串
预览如下图片：

的数据

我真的很喜欢kontiki的回答，但不是长度，所以我写道：

import SwiftUI

func strokedRoundedRectangle(
        cornerRadius r: CGFloat,
        lineWidth w: CGFloat = 1,
        color c: Color = .primary
    ) -> some View {

    return RoundedRectangle(cornerRadius: r).stroke(lineWidth: w).foregroundColor(c)
}

字符串