SwiftUI, In toolbar, the size of label image is different between Menu and Button

user_8311390 0
Viewed 1471

I added two ToolbarItem. One is Menu and the other is Button.

.toolbar {
    // Menu 
    ToolbarItem(placement: .navigationBarTrailing) {
        Menu(content: {
            Text("hello world")
        }, label: {
            Image(systemName: "gear")
        })
    }
    
    // Button
    ToolbarItem(placement: .navigationBarTrailing) {
        Button(action: {
            print("button touched")
        }, label: {
            Image(systemName: "gear")
        })
    }
}

Even if I use same image as a label, the size is different. The result is like this.

enter image description here

I want to make menu label image size big as button, so that user can touch it more easily.

swiftui toolbar swift image ios
2 Answers

Just add .imageScale(.large) modifier to the Image of the Menu

Menu(content: {
    Text("hello world")
}, label: {
    Image(systemName: "gear")
        .imageScale(.large) // Add this modifier

It looks like by default SwiftUI engine is figuring out the size to use on your behalf.

user_142465690

works well on macos 12.beta, xcode 13.beta, target ios 15 and macCatalyst. This is the code I used for testing:

import SwiftUI

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("testing")
                .toolbar {
                    // Menu
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Menu(content: {
                            Text("hello world")
                        }, label: {
                            Image(systemName: "gear")//.resizable().scaleEffect(1.2)
                        })
                    }
                    // Button
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button(action: {
                            print("button touched")
                        }, label: {
                            Image(systemName: "gear")
                        })
                    }
                }
        }
    }
}

You could use "Image(systemName: "gear").resizable().scaleEffect(x)" to iron out any mismatch.

user_119698170
Related