SwiftUI中NavigationView内图片占用空间过大的适配问题：如何让图片与导航栏等高且呈正方形（非固定帧方案）

I get it—you want that leading image to be a neat square that fits perfectly within the navigation bar's height without hardcoding any fixed frames. Here's how to do it using SwiftUI's automatic layout capabilities:

Updated Code for the Leading Toolbar Item #

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Image("your-image-name")
            .resizable()
            .aspectRatio(1, contentMode: .fit) // Enforces square aspect ratio
            .frame(maxHeight: .infinity) // Uses full available height of the toolbar item
            .clipShape(RoundedRectangle(cornerRadius: 4)) // Optional: for slightly rounded square, adjust as needed
    }
}

Breakdown of the Changes: #

• .aspectRatio(1, contentMode: .fit): This tells SwiftUI to maintain a 1:1 width-to-height ratio, ensuring the image stays square regardless of the navigation bar's height. The .fit content mode makes sure the entire image fits within the available space without cropping.
• .frame(maxHeight: .infinity): Instead of setting a fixed height, this lets the image take up the full height of the toolbar item (which matches the navigation bar's height automatically). Since we've locked the aspect ratio to 1, the width will automatically adjust to match the height, creating a perfect square.
• Optional .clipShape: If you want a slightly rounded square instead of sharp corners, add this line and tweak the corner radius to your liking.

This approach works because SwiftUI automatically calculates the toolbar item's height based on the navigation bar's current size (even if it changes dynamically, like on different device orientations or when the bar expands/collapses). No fixed frames required—just letting SwiftUI do its layout magic!

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