Created
May 17, 2022 00:30
-
-
Save eliyap/9c8991f664d6f822d5dc8d81c8440f5e to your computer and use it in GitHub Desktop.
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
struct ContentView: View { | |
@State var pictureExpanded = false | |
var body: some View { | |
VStack(alignment: .leading, spacing: 0) { | |
Text("Once upon a time there was a turtle named George who made friends with a giraffe at the local water park and then they went on lots of adventures together.") | |
Button { | |
withAnimation { | |
pictureExpanded.toggle() | |
} | |
} label: { | |
Text("Tap to \(pictureExpanded ? "hide" : "see") a pretty picture") | |
} | |
/// Wrap transitioning view. | |
/// - Note: `ZStack` works, `Group` does not. | |
ZStack { | |
if pictureExpanded { | |
Image("Snow") | |
/// Scale to fit. | |
.resizable() | |
.scaledToFit() | |
/// Transition causes `ZStack` bounds to resize. | |
.transition(.scale) | |
/// For layout only, do not display. | |
.opacity(0) | |
} | |
} | |
/// Use parent's full width. | |
.frame(maxWidth: .infinity) | |
/// Background prevents this from modifying stack layout, | |
/// which `maxHeight: .infinity` does. | |
.background { | |
/// Credit robb. | |
Image("Snow") | |
.resizable() | |
.scaledToFit() | |
.fixedSize(horizontal: false, vertical: true) | |
.frame(minHeight: .zero, maxHeight: pictureExpanded ? .infinity : .zero) | |
.clipped() | |
.contentShape(Rectangle()) | |
} | |
Text("The giraffe's name was Leonard, and together George and Leonard became the best of friends and did all sorts of cool things together like climbing a mountain.") | |
} | |
.frame(maxWidth: .infinity, maxHeight: .infinity) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment