SwiftUI：如何获得具有完美圆角的视图

Question

利用UIKit，我们可以采用以下方式使控件（例如按钮）拥有完美的圆角（在每侧呈现为圆形）：

exampleButton.cornerRadius = exampleButton.frame.size.height/2

如何使用SwiftUI视图实现相同的结果？

由于视图更多地是即时定义的，所以我不确定除非手动设置它（这不是这里想要的），否则如何引用该框架大小。

Button(action: {
    // ...
}) {
    Text("I'm a Button")
}
.cornerRadius(???)

- TheNeil

Answer 1

另一个解决方法是使用形状，例如 Capsule 形状，并使用 clipShape 修饰符。

以先前提到的示例为例，代码如下：

Button(action: {
// ...
}) {
Text("I'm a Button")
    .padding(.horizontal, 10)
    .background(Color.red)
    .clipShape(Capsule())
}

这里的填充可以调整，以便您的视图看起来符合您的要求。重点是胶囊将始终具有完美圆形的端点。在这种情况下，我不希望文本太靠近圆角，因此我在两侧应用了一些填充。

请记住，在SwiftUI中应用修饰器的顺序非常重要。

- d9rad

---

谢谢。是的，这是一个更加优雅的解决方案。恰好这也是我在发布这个问题后已经转向使用的解决方案。感谢提醒。 - TheNeil

Answer 2

您需要将其定义为一个正方形，然后在角落处打上圆角，就像这样：

Button(action: {
// ...
}) {
Text("I'm a Button")
    .frame(width:150, height:150)
    .background(Color.red)
    .cornerRadius(.infinity)

}

PS. 添加了一些背景颜色以增加可见性

- Bartosz

---

谢谢！我缺少的部分是.infinity参数。另外，如果需要的话，您也可以通过.aspectRatio(1, contentMode: .fit)来实现一个正方形，而无需设置固定大小。 - TheNeil

Answer 3

在 XCode 12.4 中工作

对于任何试图了解如何制作带有圆角的按钮（无论是完全圆形还是不完全圆形）的人：

            Button(action: {
                // Do whatever
            }) {
                Spacer()
                Text("Log In")
                    .font(.title2)
                    .padding()
                    .foregroundColor(.white)
                Spacer()
            }
            .background(Color(UIColor.systemBlue))
            .clipShape(RoundedRectangle(cornerRadius: 12))
            .padding()

无需纠结于叠加形状。

- Mike McCartin

---

谢谢，但是实际上这并没有解决问题的核心，即如何将角半径设置为完全圆形。我在原问题中引用了“cornerRadius”，因此这个额外的代码并没有增加任何东西，除了从clipShape添加一个额外的层，这不会增加值 - 除非你想使用 Capsule()。 - TheNeil

Answer 4

另一个解决方案是使用geometry reader，它将获取屏幕的高度或宽度，并允许您从中进行除法、乘法、减法或加法运算。

以此示例为例：

GeometryReader { Geometry in
  Button(action: {
    // ...
  }) {
    Text("I'm a Button")
  }
  .cornerRadius(geometry.size.width / 2)
}

它最接近于frame.size.height。

- JNL