时间戳

首页 > 解决方案 > SwiftUI - 如何制作居中对齐的菜单？

ios - 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()
    }
}

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

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

// 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 中嵌入标签 Image 之后 - 菜单居中。但是......这些垫片现在可以点击，我不想要。我在想将 .allowsHitTesting(false) 添加到 Spacer() 会禁用对它们的点击，但事实并非如此。

还有其他想法吗？:)

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

左对齐：

居中对齐：

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

标签： iosswiftswiftuimenualignment

解决方案

推荐阅读