SwiftUI 中的偏移量和按钮有问题吗？

Question

我有一组按顺时针旋转显示的按钮，但我无法正确单击它们：

我认为偏移有问题，但我不知道如何解决它，有什么建议吗？

这是代码：

struct CategoryView: View {
    // Circle Radius
    @State private var radius: Double = 150
    let circleSize: Double = 350
    // Degree of circle
    @State private var degree = -90.0
    let cards = ["John", "Mark", "Alex", "Kevin", "Jimmy"]
    
    var body: some View {
        ZStack {
            let anglePerCount = Double.pi * 2.0 / Double(cards.count)
            ForEach(0..<cards.count, id: \.self) { index in
                let angle = Double(index) * anglePerCount
                let xOffset = CGFloat(radius * cos(angle))
                let yOffset = CGFloat(radius * sin(angle))
                Button {
                    
                } label: {
                Text(cards[index])
                    .font(.title)
                    .fontWeight(.bold)
                    .rotationEffect(Angle(radians: angle + Double.pi/2))
                    .offset(x: xOffset, y: yOffset)
                }
            }
        }
        .rotationEffect(Angle(degrees: degree))
        .onAppear() {
            radius = circleSize/2 - 47 // 47 is for padding
        }
    }
}

Answer 1

这是一个简单的错误，所有 SwiftUI 开发人员都犯过无数次。您正在修改标签，但不是实际的按钮本身。只需将修改器移至按钮即可。

Button (action: {}, label: {
    Text(cards[index])
        .font(.title)
        .fontWeight(.bold)
})
.rotationEffect(Angle(radians: angle + Double.pi/2))
.offset(x: xOffset, y: yOffset)

在 SwiftUI 中，几乎所有东西都是 aView并且都可以这样对待。按钮（也是视图）可以具有与 aText可以具有的大部分相同的修饰符。在您的问题中，您更改了按钮的内部视图，而不是实际的按钮本身。这就是为什么当您单击中间时，它似乎位置不正确，但实际上它也完全按照您的指示执行。这是一件需要记住的重要事情，因为您实际上可以在视图之外推、拉和偏移事物，这会产生一些有趣的布局；侧边菜单或模态等布局。