Is it possible to pad items in a VStack in a way that only pushes the items below it downward without pushing the items above it upwards?

Question

It's a bit hard to word in the title but here's my situation. I have a VStack and I need to animate a gap forming below a tapped item in the stack.

I've tried adding .padding(.bottom, isTapped ? 50 : 0) to the items for example, but it doesn't produce the desired result. For example if item X is the item i've tapped this is the behaviour that I get with this method

empty space -->  X-1
X-1         -->  X
X           -->  space created
X+1         -->  X+1
empty space -->  empty space

basically, as I tried to illustrate, it pushes the items above X upwards as well as pushing the items below it downward.

Is there any way to go about doing what I'm trying to do? A way to fix X and the items above it in place so that only the items below will shift?

edit: Here's a more real example, when the middle item is tapped, it causes padding to be added below it, but unfortunately that doesn't just leave the first 2 where they are and push the third one down. But it moves the first 2 up and the third down. (Also the padding doesn't lay as shown in the example below, but within the Item View itself if that makes a difference)

VStack{
  Item().padding(.bottom, isTapped ? 50: 0)
  Item().padding(.bottom, isTapped ? 50: 0)
  Item().padding(.bottom, isTapped ? 50: 0)
}

salo.dm · Answer 1 · 2019-09-20T01:13:34.697

0

The VStack picks its size according to its contents. It sounds like the view containing the VStack has a lot of extra vertical space. Since the VStack is smaller than its superview, it is centered within its superview (leaving the empty space above and below.) When the VStack grows vertically (when the padding is added), it remains centered and will grow in both directions, up and down.

You could pin your VStack at the top of its superview by adding a Spacer below it and wrapping both in a new VStack. Then, when the padding is added to an item, the VStack will remain pinned at the top and any additional space will be added below.

    VStack {
        VStack {
            // Items:  X-1, X, X + 1                
         }
        Spacer()
    }

If this doesn't solve your problem, please show your code. The alignment and placement of views is dependent on your specific code.

edited Sep 20 '19 at 01:13

answered Sep 20 '19 at 00:51

salo.dm

2,317
1
15
16

I edited the question a bit with a little more info at the bottom, I tried adding a Spacer as the last item in the VStack but unfortunately the problem still happens – Kabir Sep 20 '19 at 03:18
I've tested it with Texts instead of your Items & it works. So, something else is going on, and it's difficult, if not impossible, to know what without seeing more code. Please show the code for your Item struct. Maybe it will also be necessary to see the rest of the code for anything that appears on the screen below or above this VStack. Finally, how is the isTapped set up? As you have it, all the Items will create padding beneath them at the same time. – salo.dm Sep 20 '19 at 04:37

Is it possible to pad items in a VStack in a way that only pushes the items below it downward without pushing the items above it upwards?

1 Answers1