SwiftUI Menu

I want to use Menu in NavigationStack in my SwiftUI project. I found the menu list to wide - I want to use simple picture in the list.

Menu{ ForEach(flagArray, id: .self) { name in Button {

    } label: {
         Image(name)

// I want that the cell list will have maximum width 100

    }
}

} label: { Image(name) .resizable() .frame(width: 40, height: 40) } I try to find a way to make it shorter. My .extension, MenuStyle, MenuCustomView didn't work. I found that you can hide it by simply .hidden! but how you can modify it? Please help

Answered by DTS Engineer in 788400022

I found the menu list to wide - I want to use simple picture in the list.

Are you referring to the width of the entire menu?

I try to find a way to make it shorter. My .extension, MenuStyle, MenuCustomView didn't work. I found that you can hide it by simply .hidden! but how you can modify it? Please help

@mamaz Could you please use this example to clarify your question:

struct ContentView: View {
    let iconArray = ["star", "heart", "square", "circle", "triangle"]
    
    var body: some View {
        VStack {
            Text("Select an icon:")
            Menu {
                ForEach(iconArray, id: \.self) { iconName in
                    Button {

                    } label: {
                        Label {
                            Text(iconName)
                        } icon: {
                            Image(systemName: iconName)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                        }
                    }
                }
            } label: {
                Image(systemName: "flag.fill")
                    .resizable()
                    .frame(width: 30, height: 20)
            }
            .menuStyle(.button)
        }
    }
}
Accepted Answer

I found the menu list to wide - I want to use simple picture in the list.

Are you referring to the width of the entire menu?

I try to find a way to make it shorter. My .extension, MenuStyle, MenuCustomView didn't work. I found that you can hide it by simply .hidden! but how you can modify it? Please help

@mamaz Could you please use this example to clarify your question:

struct ContentView: View {
    let iconArray = ["star", "heart", "square", "circle", "triangle"]
    
    var body: some View {
        VStack {
            Text("Select an icon:")
            Menu {
                ForEach(iconArray, id: \.self) { iconName in
                    Button {

                    } label: {
                        Label {
                            Text(iconName)
                        } icon: {
                            Image(systemName: iconName)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                        }
                    }
                }
            } label: {
                Image(systemName: "flag.fill")
                    .resizable()
                    .frame(width: 30, height: 20)
            }
            .menuStyle(.button)
        }
    }
}

Hi Thank you for your answer.

In your code in Button you use label: Label { Text(iconName) } icon: { Image(systemName: iconName) .resizable() .aspectRatio(contentMode: .fit) } but I want to use only image.

Please look on that code

let iconArray = ["star", "heart", "square", "circle", "triangle"]

var body: some View {
    VStack {
        Text("Select an icon:")
        Menu {
            ForEach(iconArray, id: \.self) { iconName in
                Button {

                } label: {
                    Image(systemName: iconName)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                }
            }
        } label: {
            Image(systemName: "flag.fill")
                .resizable()
                .frame(width: 30, height: 20)
        }
        .menuStyle(.button)
    }
}

}

When you run it there is a lot empty space and the image is on the right side.

Can I change the width ro only show image or can I make the image on the center?

Please help P.S. In your code the Label doesn't look good either. It is to wide. How to change it?

SwiftUI Menu
 
 
Q