单击时 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 默认情况下将所有屏幕 [width + height] 视为它们的框架。

因此您还必须设置 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

单击时 SwiftUI 圆形按钮变形

SwiftUI round button deforms when clicked

xcode

button

rounding

swiftui

beta