SwiftUI Menu Picker Style出现异常双箭头问题求助

我使用Picker的.menu样式展示选项，相比Menu组件更偏好它——因为选中项前不会显示勾选标记，且当菜单文本变更时，若新文本比原文本长，Menu会存在重渲染耗时问题。但使用该样式时出现了双箭头，希望改成普通Menu的单箭头效果。

现有代码 #

struct ContentView: View {
    @State private var selection = "Red"
    let colors = ["Red", "Green", "Blue", "Black", "Tartan"]

    var body: some View {
        VStack {
            Picker("Select a paint color", selection: $selection) {
                ForEach(colors, id: \.self) {
                    Text($0)
                }
            }
            .pickerStyle(.menu)

            Text("Selected color: \(selection)")
        }
    }
}

当前效果 #

期望效果 #

解决方案 #

方法一：全局隐藏Picker箭头指示器 #

在视图初始化时通过UIAppearance配置，隐藏Picker自带的箭头，只保留菜单的箭头：

struct ContentView: View {
    @State private var selection = "Red"
    let colors = ["Red", "Green", "Blue", "Black", "Tartan"]
    
    init() {
        UIPickerButton.appearance().showsMenuIndicator = false
    }

    var body: some View {
        VStack {
            Picker("Select a paint color", selection: $selection) {
                ForEach(colors, id: \.self) {
                    Text($0)
                }
            }
            .pickerStyle(.menu)

            Text("Selected color: \(selection)")
        }
    }
}

方法二：仅针对当前Picker生效（避免全局影响） #

如果不想修改全局的Picker样式，可以自定义ViewModifier，在目标Picker显示/隐藏时切换配置：

struct HidePickerMenuIndicator: ViewModifier {
    func body(content: Content) -> some View {
        content
            .onAppear {
                UIPickerButton.appearance().showsMenuIndicator = false
            }
            .onDisappear {
                UIPickerButton.appearance().showsMenuIndicator = true
            }
    }
}

// 应用到Picker上
Picker("Select a paint color", selection: $selection) {
    ForEach(colors, id: \.self) {
        Text($0)
    }
}
.pickerStyle(.menu)
.modifier(HidePickerMenuIndicator())

两种方法都能让.menu样式的Picker显示单箭头，同时保留你需要的无勾选标记、避免重渲染的优势。

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