如何在Mac Catalyst的Picker弹窗中同时显示图片和文字

默认的SwiftUI Picker 在Mac Catalyst环境下（无论是“缩放以匹配iPad”还是“针对Mac优化”模式），都不会像iOS端那样渲染Label的图标部分，仅显示文字内容。要实现和iOS一致的图文同显效果，需要自定义Picker的弹窗内容，以下是具体实现方案：

自定义实现方案 #

通过Menu组件模拟Picker的交互逻辑，完全控制选项的布局，确保图标和文字同时显示：

import SwiftUI

struct ContentView: View {
    @State var selection = ""
    // 定义选项列表，包含图标名称和文字
    private let options = [("circle", "1"), ("square", "2"), ("triangle", "3")]
    
    var body: some View {
        Button(selection.isEmpty ? "请选择" : selection) {
            // 点击按钮触发菜单
        }
        .menu {
            ForEach(options, id: \.1) { iconName, text in
                Button {
                    selection = text
                } label: {
                    Label(text, systemImage: iconName)
                        .foregroundStyle(.red, .blue)
                }
            }
        }
    }
}

@main
struct TestImagePickerApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

效果说明 #

• 该实现在Mac Catalyst的两种模式下，弹窗选项都会同时显示图标和文字，和iOS端的Picker表现一致。
• 你也可以用Sheet组件替代Menu，实现更复杂的弹窗样式，核心思路都是脱离默认Picker的系统渲染，自定义选项布局。

原测试环境与截图 #

测试环境：Mac 13.6（“缩放以匹配iPad”/“针对Mac优化”模式）、iOS 17.0

原测试代码：

import SwiftUI

struct ContentView: View {
    @State var selection = ""
    
    var body: some View {
        Picker ("", selection: $selection) {
            Label { Text("1") } icon: {
                Image(systemName: "circle").foregroundStyle(.red, .blue)
            }
        }
    }
}

@main
struct TestImagePickerApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

iOS端效果：

Mac Catalyst - 缩放以匹配iPad效果：

Mac Catalyst - 针对Mac优化效果：

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