I have two vertical stacks. The first one contains the Image and the second contains the TextField.
I'm playing around with keyboard appearing/disappearing behaviour. When keyboard appears I increase the bottom padding of the TextField hence VStack #2 is getting higher and VStack #1 is getting lower (at least it looks like this).
What I want to achieve is to get Image scaled proportionally to the remaining area.
var body: some View {
GeometryReader { g in
...
VStack {
VStack { // VStack #1
Image("logo")
.resizable()
.aspectRatio(contentMode: .fit)
.padding(.top, g.size.height * 0.0243)
Text("Sample text")
}
Spacer()
VStack { // VStack #2
TextField("Enter Email", text: $email)
...
}
.background(Color.white)
.frame(
width: g.size.width,
height: g.size.height * 0.698,
alignment: .center
)
...
}
}}
I expected that resizable
and aspectRatio
modifiers should do this work dynamically but they don't. The Image partially hidden behind the increased VStack.
What else should I try? Thank you in advance.
question from:
https://stackoverflow.com/questions/65875158/dynamically-scaling-image-depending-on-remaining-space 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…