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()) 时也会发生同样的情况

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

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