Home > Software engineering >  Image taking up lots of space in NavigationView
Image taking up lots of space in NavigationView

Time:02-10

This is my View:

navigationBarLeadin

My Image is taking up all the space. Can I add something to the Image which will make it the same height as the navigation bar (and than the Image should be a small square)? Please no fixed frame solutions, I would expect SwiftUI can be smart enough to figure out how large the Image should be.

This is my code:

.navigationBarTitleDisplayMode(.inline)
.toolbar {
    // Directly putting a navigation link here does not work: https://stackoverflow.com/questions/63602263/swiftui-toolbaritem-doesnt-present-a-view-from-a-navigationlink
    ToolbarItem(placement: .principal) {
        Button(conversation.title) {
            showConversationDetail = true
        }
        .buttonStyle(.plain)
    }
}
.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Image(...)
            .resizable()
    }
}

CodePudding user response:

You need to make it resizable and set the aspect ratio contentMode. You may or may not need to set the aspect ratio itself, depending on the image.

Image(...)
    .resizable()
    .aspectRatio(1, contentMode: .fit)

CodePudding user response:

You can use it like this :

.navigationBarTitleDisplayMode(.inline)
.toolbar {
    // Directly putting a navigation link here does not work: 
https://stackoverflow.com/questions/63602263/swiftui-toolbaritem-doesnt- 
present-a-view-from-a-navigationlink
    ToolbarItem(placement: .principal) {
        Button(conversation.title) {
            showConversationDetail = true
        }
        .buttonStyle(.plain)
    }
}
.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Image(...)
            .resizable()
            // .frame(width: 15, height: 15)
            .imageScale(.medium) // or you can use .small or .large accordingly
            .padding(20)
    }
}
  • Related