swiftui - 是否可以以仅将其下方的项目向下推而不将其上方的项目向上推的方式填充 VStack 中的项目？

Question

标题有点难用，但这是我的情况。我有一个 VStack，我需要为在堆栈中被点击的项目下方形成的间隙设置动画。

例如，我尝试将 .padding(.bottom, isTapped ? 50 : 0) 添加到项目中，但它不会产生所需的结果。例如，如果项目 X 是我点击的项目，这就是我使用此方法得到的行为

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

基本上，正如我试图说明的那样，它向上推动 X 上方的项目以及向下推动其下方的项目。

有什么办法可以去做我想做的事吗？一种方法来修复 X 和它上面的项目，以便只有下面的项目会移动？

编辑：这是一个更真实的示例，当点击中间项目时，会导致在其下方添加填充，但不幸的是，这不仅仅将前 2 个保留在原处并将第三个向下推。但是它将前两个向上移动，第三个向下移动。（此外，填充也不会像下面的示例所示那样放置，而是在项目视图本身中，如果这会有所不同的话）

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

score 0 · Accepted Answer

VStack 根据其内容选择其大小。听起来包含 VStack 的视图有很多额外的垂直空间。由于 VStack 小于其父视图，因此它在其父视图内居中（上方和下方留出空白空间。）当 VStack 垂直增长时（添加填充时），它保持居中并将在两个方向上增长，向上和下。

您可以通过在其下方添加一个 Spacer 并将两者包装在一个新的 VStack 中来将您的 VStack 固定在其超级视图的顶部。然后，当填充添加到项目时，VStack 将保持固定在顶部，任何额外的空间都将添加到下方。

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

如果这不能解决您的问题，请显示您的代码。视图的对齐和放置取决于您的特定代码。

1 回答 1