Grow from bottom of shape instead of centre?
Closed this issue · 1 comments
Gnielio commented
Hey man, this solution is really clean and works for me, however, I need it to grow from the bottom of the shape up, not in both up and down directions from the centre. What would you recommend I do to achieve that?
Asperi-Demo commented
(please next time give a link to which file you refer)
Well, in your code there is no fixed bottom (as an anchor point), so rectangle grows in both direction, because by-default alignment is center. To make it grows in some direction you have to specify some fixed area and give inside content alignment to bottom, then any growth in it from 0 will be to top (to fill area), like
// this is different stack
ZStack(alignment: .bottom) { // content will be aligned to bottom
Text("Hola")
.foregroundColor(.black)
.font(.headline)
RoundedRectangle(cornerRadius: 5)
.frame(width: 100, height: height, alignment: .center)
.foregroundColor(Color("RedColour"))
.onShake {
withAnimation {
height = 100 // << here !!
}
}
}.frame(height: 100) // fixed area, so shape is initially at bottom and will grow upward