SwiftUI - 如何制作居中对齐的菜单？

如何解决SwiftUI - 如何制作居中对齐的菜单？

我正在尝试在 iOS 上使用 SwiftUI 制作菜单。

如果打开菜单的按钮居中对齐，我希望菜单也居中对齐。无论按钮中使用的图标或文本如何。怎么做？

奇怪的是菜单的对齐方式会根据按钮的内容而变化。如果我使用一个图标，它会按预期居中对齐。但是如果我使用另一个图标，它是左对齐的。

这是我的代码：

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            ZStack {
                vstack {
                    Text("Some text.")
                }
                
                vstack(alignment: .center) {
                    Spacer()
                    
                    Menu {
                        Button(action: {}) {
                            Label("Menu item",systemImage: "star")
                        }
                        
                        Button(action: {}) {
                            Label("Menu item",systemImage: "star")
                        }
                    } label: {
                        Image(systemName: "plus") // left-aligned menu
                        // Image(systemName: "line.horizontal.3") // center-aligned menu
                            .foregroundColor(Color.white)
                            .padding()
                            .background(Color.accentColor)
                            .clipShape(Rectangle())
                    }
                }
            }
            .navigationTitle("Content")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

到目前为止，我尝试了几件事：添加 .frame、在 HStack 和 vstack 中嵌入菜单和按钮。

唯一带有加号按钮的居中对齐菜单是这样的：

// other code

Menu {
    Button(action: {}) {
        Label("Menu item",systemImage: "star")
    }
    
    Button(action: {}) {
        Label("Menu item",systemImage: "star")
    }
} label: {
    HStack {
        Spacer()
            .allowsHitTesting(false)
        
        Image(systemName: "plus")
            .foregroundColor(Color.white)
            .padding()
            .background(Color.accentColor)
            .clipShape(Rectangle())
        
        Spacer()
            .allowsHitTesting(false)
    }
}

// other code

在我之前和之后使用 Spacer() 在 HStack 中嵌入标签图像之后 - 菜单居中。但是......这些垫片现在可以点击，我不想要。我以为将 .allowsHitTesting(false) 添加到 Spacer() 会禁用对它们的点击，但事实并非如此。

还有其他想法吗？ :)

编辑： 我刚刚在其他几个模拟器上使用“加号”按钮进行了测试，菜单在不同模拟器上的对齐方式不同（均使用 iOS 14.5）：

左对齐：

• iPhone Xs
• iPhone 11 专业版
• iPhone 12 迷你版

居中对齐：

• iPhone 8
• iPhone 8 Plus
• iPhone 11
• iPhone 11 Pro Max
• iPhone 12
• iPhone 12 专业版
• iPhone 12 Pro Max
• 第二代 iPhone SE

这是一个错误还是我缺少某些对齐选项？