Stroke/Border SwiftUI 的圆形特定角

Question

我正在做一个 SwiftUI 项目，我需要一个视图有一个只有一些圆角的边框（例如，左上角和右上角）。

我添加了一个带笔划的 RoundedRectangle 并且能够将所有角都圆化。但是，我只需要将一些角变圆，但我想不出办法。

这是我必须添加 RoundedRectangle 的代码：

.overlay(
    RoundedRectangle(cornerRadius: 20)
       .stroke(Color.gray, lineWidth: 1)
)

为了只使特定的角变圆，我查看了这个 Whosebug post：。但是，我必须去掉圆角矩形（因为它圆了所有的角）。我将不得不使用普通边框。但是，对于正常的边框，它会在圆角和尝试提供的任何答案时剪掉一段边框。

这是我理想中想要的样子（这是来自 Bootstrap 的示例 - 我们正在将网站重建为应用程序）：

谢谢！

Answer 1

这里有另一种/更简单的方法来重新创建它。为每一行添加一个白色背景，并在它们后面添加一个灰色背景色。在行之间添加间距，让灰色背景颜色看起来像它们之间的分隔线。然后只需向整个视图添加一个矩形叠加层，就像您在代码中已有的那样！

struct CornerView: View {
    var body: some View {
        VStack(spacing: 1) {
            ForEach(0..<5) { index in
                Text("Item \(index)")
                    .frame(maxWidth: .infinity)
                    .frame(height: 55)
                    .background(Color.white)
            }
        }
        .background(Color.gray)
        .overlay(
            RoundedRectangle(cornerRadius: 5)
                .stroke(Color.gray, lineWidth: 1)
        )
        .padding()
    }
}

struct CornerView_Previews: PreviewProvider {
    static var previews: some View {
        CornerView2()
    }
}

Stroke/Border SwiftUI 的圆形特定角

Round Specific Corners of Stroke/Border SwiftUI

user-interface

xcode

cornerradius

swift

swiftui