swiftswiftuiswiftui-pickerswiftui-menu

SwiftUI Menu Picker Style shows strange double arrow


Basically I am using Menu Picker Style for display a set of numbers. I prefer it over Menu because it doesn't have checkmark in front of the selected item and because I need to change the text of the menu it takes time to re-render it if the new item is longer than the previous. When using the picker style I get these double arrows which annoy me and so far haven't found solution for them.

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)")
        }
    }
}

I expect it to look something like that. (This photo is taken from normal Menu but as I said before it has more negatives so I don't need it)


Solution

  • you can try as below with Menu it is possible to display the checkmark

    struct ContentView: View {
    
    let colors = ["Red", "Green", "Blue", "Black", "Tartan"]
    @State var index = 0
    @State var selectedColor = "Red"
    var body: some View {
        VStack {
            Menu{
                ForEach(Array(colors.enumerated()), id: \.offset){index, color in
                    Button(action: {
                        self.index = index
                        self.selectedColor = color
                    }, label: {
                        HStack{
                            Text(color)
                            if selectedColor == colors[index]{
                                Image(systemName: "checkmark")
                            }
                        }
                    })
                }
            } label: {
                Text(colors[index])
                    .foregroundColor(.blue)
                    .frame(width: UIScreen.main.bounds.width/2)
            }
            Text("Selected Color \(colors[index])")
            
        }
    }
    }