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

Posted 2023-02-24

【中文标题】SwiftUI：如何获得完美圆角的视图

【英文标题】：SwiftUI: How to Get a View with Perfectly Rounded Corners

【发布时间】：2019-11-24 02:34:07

【问题描述】：

使用 UIKit，可以使用这种方法为控件（例如按钮）提供完美的圆角（在每一侧产生一个圆圈）：

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

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

因为视图是动态定义的，所以我不确定如何引用该帧大小，除非它是手动设置的（这不是这里的愿望）。

Button(action: 
    // ...
) 
    Text("I'm a Button")

.cornerRadius(???)

【参考方案1】：

另一个解决方案是使用形状，在本例中为 Capsule 形状，并使用 clipShape 修饰符

以前面提到的例子为例，应该是这样的：

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

可以调整其中的填充，以便您的视图看起来像您想要的那样。胶囊将始终具有完美圆形的末端。在这种情况下，我不希望文本太靠近圆边，所以我在边上应用了一些填充。

需要记住的一点是，在 SwiftUI 中，修饰符的应用顺序非常重要。

【讨论】：

谢谢。是的，这是一个更加优雅的解决方案。自从发布此问题以来，它恰好是我已经在自己的代码中切换到的一个。感谢提醒。

【参考方案2】：

您需要将其定义为正方形，然后在角上进行四舍五入，如下所示：

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

PS。为可见性添加了一些背景颜色

【讨论】：

谢谢！ .infinity 参数是我缺少的部分。仅供参考，如果这是所需的行为，您也可以在不设置固定大小的情况下实现正方形：.aspectRatio(1, contentMode: .fit)

【参考方案3】：

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

使用示例，它会是这样的：

Geometry Reader  Geometry in
Button(action: 
    // ...
) 
    Text("I'm a Button")

.cornerRadius(geometry.size.width / 2)

和frame.size.height最相似。

【参考方案4】：

在 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()

无需担心叠加形状。

【讨论】：

谢谢，但这实际上并没有解决问题的核心，即如何专门设置圆角半径以精确地圆边。我在原始问题中引用了cornerRadius，所以除了clipShape 的一个额外层之外，这个额外的代码并没有真正添加任何东西，这并没有增加价值——只是额外的开销——除非你想使用Capsule() .