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 开发人员都犯了无数次。 您正在修改 label，但不是实际按钮本身。 只需将修改器移动到按钮。

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

在 SwiftUI 中，几乎所有内容都是View ，可以这样处理。 一个按钮，也是一个视图，可以拥有与Text相同的大部分修饰符。 在您的问题中，您更改了按钮的内部视图，而不是实际的按钮本身。 这就是为什么当您单击中间时，它似乎定位不正确，但实际上它也完全按照您告诉它的方式进行了操作。 记住这一点很重要，因为您实际上可以在视图之外推动、拉动和偏移一些东西，这会产生一些有趣的布局； 侧边菜单或模式等布局。