SwiftUI圆形按钮在点击时变形。

Question

我用下面的代码创建了一个圆形按钮：

struct RoundButton : View {

    var value = "..."

    var body: some View {
        GeometryReader { geometry in
            Button(action: {}) {
                VStack {
                    Text(self.value)
                        .font(.headline)
                        .color(Color("NightlyDark"))
                    Text("MIN")
                        .font(.footnote)
                        .color(.white)
                }
                .frame(width: geometry.size.width, height: geometry.size.height)
            }
            .clipShape(Circle())
        }
    }
}

但是当点击按钮时，形状会变形。有任何想法为什么会发生这种情况吗？

当我使用.mask(Circle())时，同样会发生这种情况。

这是一个测试版问题还是正常行为？有没有人知道创建圆形按钮的更好方法？

- Bjorn Morrhaye

Answer 1

这里发生的是，默认情况下，Button 将屏幕的所有宽度和高度视为其框架。因此，您也需要设置 Button。

我认为这是在 watchOS 中的默认行为。

以下是您的代码：

struct RoundButton: View {

    var value = "..."

    var body: some View {

        GeometryReader { geometry in

            Button(action: {}) {
                VStack {
                    Text(self.value)
                        .font(.headline)
                        .foregroundColor(Color("NightlyDark"))
                    Text("MIN")
                        .font(.footnote)
                        .foregroundColor(.white)
                }
                .frame(width: geometry.size.width, height: geometry.size.height)
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
                .clipShape(Circle())
        }

    }
}

注意：我正在使用 Xcode 11 Beta 4。

- Ketan Odedra

---

有没有想法最近的更新有什么变化？即使使用了新代码，我的圆圈还是被裁剪了。 - Bjorn Morrhaye