Skip to content

Instantly share code, notes, and snippets.

@eliyap
Created May 17, 2022 00:30
Show Gist options
  • Save eliyap/9c8991f664d6f822d5dc8d81c8440f5e to your computer and use it in GitHub Desktop.
Save eliyap/9c8991f664d6f822d5dc8d81c8440f5e to your computer and use it in GitHub Desktop.
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