SwiftUI负间距Z顺序

Question

在SwiftUI中，您可以使用负填充或负间距将VStack的两个元素叠放在一起。但是，如何选择哪个项目在顶部？负填充确保重叠，但不指定哪个视图在重叠的顶部。那么，我该如何控制哪个视图在顶部呢？

- Cayland Boston

Answer 1

希望有一个容器可以通过 .zIndex 修改器改变层级顺序。默认情况下，所有视图的值都为0（零），因此给定任何正数的值，都会将修改的视图推到最上方，而任何负数的值则将视图放置在底部。

VStack(spacing: 0) {
    Spacer()
    Color.green.padding(0).zIndex(1)           // << here !!
    Color.red.padding(-20)
    Spacer()
}

- Asperi

Answer 2

这是一个非常有趣的问题！

仅从一点实验中看，似乎最后添加的视图更靠近前面。

这个排列方式将屏幕一半显示为绿色，一半显示为红色：

VStack(spacing: 0) {
    Spacer()
    Color.green.padding(-20)
    Color.red.padding(0)
    Spacer()
}

然而，在这个例子中，红色视图重叠在绿色视图之上：

VStack(spacing: 0) {
    Spacer()
    Color.green.padding(0)
    Color.red.padding(-20)
    Spacer()
}

- John Nimis

---

首先感谢您回答John。是的，我发现这个问题也是如此。问题是，我需要首先出现的视图垂直在顶部（它是一个标题）。您有任何想法如何切换我声明视图的顺序但保持相同的垂直顺序吗？ - Cayland Boston