SwiftUI：圆角矩形覆盖角被切断答案

【问题标题】：SwiftUI: Rounded Rectangle Overlay Corners Cut OffSwiftUI：圆角矩形覆盖角被切断
【发布时间】：2021-05-31 10:07:44
【问题描述】：

我正在尝试使用带有叠加层的宽度一致的 broder，但我一直得到错误的结果。我的叠加层如下所示：

使用此代码：

VStack {
    HStack {
        Text("Test")
    }
    HStack {
        Text("test2")
    }
}
.padding()
.frame(width: UIScreen.main.bounds.width*0.95)
.frame(minHeight: 50)
.overlay (
    RoundedRectangle(cornerRadius: 20)
        .stroke(RandomColor(), lineWidth: 3)
)

如您所见，边角比覆盖层的所有其他部分都厚。我该如何解决这个问题？

【问题讨论】：

标签： swift swiftui

【解决方案1】：

您缺少的是 stroke 和 strokeBorder 之间的区别，如果您将代码更改为 strokeBorder 会有所帮助。 p>

RoundedRectangle(cornerRadius: 20)
    .strokeBorder(RandomColor(), lineWidth: 3)

【讨论】：

【解决方案2】：

lineWidth 使其略微超出其界限。您可以使用inset(by:) 平衡它以将其保留在原始框架内：

RoundedRectangle(cornerRadius: 20)
 .inset(by: 3)
 .stroke(RandomColor(), lineWidth: 3)

注意：您可能只需要插入 2 -- 还没有做足够的实验来查看确切的数字是多少

【讨论】：