SwiftUI的Menu或Picker如何实现多行不同字号的菜单项展示

问题答复 #

原生控件限制说明 #

SwiftUI 内置的Menu和默认样式Picker的菜单项由底层系统控件UIMenu驱动，默认仅支持单一文本、标准Label等简单内容，自定义复合布局（比如你使用的VStack多行布局）会被系统渲染逻辑截断，因此仅能显示第一行文本，无法直接实现你需要的两行不同字号的效果。

推荐实现方案 #

建议放弃使用系统原生Menu/Picker，改为自定义弹窗模拟菜单效果，该方案兼容性覆盖iOS 13+所有版本，且样式自定义自由度最高，可完全匹配你的需求，示例代码如下：

struct CustomMenuDemo: View {
    @State private var showCustomMenu = false
    @State private var selectedItem = 0
    // 你的菜单项数据
    let items = [
        (title: "Menu item 1", desc: "Description 1"),
        (title: "Menu item 2", desc: "Description 2")
    ]
    
    var body: some View {
        // 触发菜单的按钮，可自定义成你需要的样式
        Button("Options") {
            showCustomMenu.toggle()
        }
        .popover(isPresented: $showCustomMenu) {
            // 自定义菜单内容，可完全模拟系统菜单的外观
            List(items.indices, id: \.self) { index in
                Button {
                    selectedItem = index
                    showCustomMenu = false
                    // 后续你的选中逻辑
                } label: {
                    VStack(alignment: .leading, spacing: 4) {
                        Text(items[index].title)
                            .font(.body)
                            .fontWeight(.bold)
                        Text(items[index].desc)
                            .font(.caption)
                            .foregroundColor(.secondary)
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                }
            }
            .listStyle(.plain)
            .frame(width: 280, height: CGFloat(items.count) * 60)
            .padding(.vertical, 8)
        }
    }
}

如果你只需要适配iOS 16及以上版本，也可以使用Menu搭配LabeledContent作为条目内容，也可以实现两行显示效果，但自定义空间不如自定义弹窗方案高。

内容的提问来源于stack exchange，提问作者Mackan