Created
August 11, 2023 21:43
-
-
Save chockenberry/82f1640a8b74f594712e2939593879f0 to your computer and use it in GitHub Desktop.
A struggle to resize an Image in an HStack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // ContentView.swift | |
| // PanelTest | |
| // | |
| // Created by Craig Hockenberry on 8/11/23. | |
| // | |
| import SwiftUI | |
| struct ContentView: View { | |
| var body: some View { | |
| VStack(alignment: .leading, spacing: 0) { | |
| HStack { | |
| Text("Header Text") | |
| Spacer() | |
| Image("checkmark") // this is a 170 x 170 px image | |
| .resizable() | |
| .aspectRatio(contentMode: .fit) | |
| // NOTE: The image should adapt to the size of the Text() in this | |
| // HStack(). This is because this needs to look right on iOS and tvOS. | |
| // | |
| // These are things that don't work: | |
| // | |
| // .frame() | |
| // UIFontMetrics.default.scaledValue(for: value)) | |
| // @ScaledMetric | |
| // GeometryReader | |
| } | |
| .padding(10) | |
| .background(.orange) | |
| .frame(maxWidth: .infinity) | |
| Text("This is some body text") | |
| .padding(10) | |
| } | |
| .background(.pink) | |
| .frame(maxWidth: 300) | |
| } | |
| } | |
| #Preview { | |
| ContentView() | |
| } |
The trick to get this to work is by laying out some invisible text to establish the height of the view, then using an .overlay with the HStack content.
Thanks to Ryan Lintott for this solution: https://mastodon.social/@ryanlintott/110873559967315439
Updated project is at: http://files.iconfactory.net/craig/samples/PanelTestFixed.zip
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Full project is at: http://files.iconfactory.net/craig/samples/PanelTest.zip