SwiftUI Negative Padding Z 顺序

Posted 2023-02-24

【中文标题】SwiftUI Negative Padding Z 顺序

【英文标题】：SwiftUI Negative Padding Z order

【发布时间】：2021-02-19 03:22:55

【问题描述】：

所以在 swiftUI 中，您可以使用负填充或负间距将 VStack 的两个元素放在一起。

但是，您究竟如何选择最上面的项目呢？负填充确保存在重叠，但不指定哪个视图将位于重叠的顶部。那么，我怎样才能控制哪个视图会在顶部呢？

【参考方案1】：

多么有趣的问题！

从小小的实验来看，最后添加的 View 似乎是更靠近前面的那个。

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

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()

【讨论】：

首先感谢您回答约翰。是的，我发现同样的事情是正确的。问题是，我需要首先垂直位于顶部的视图（它是标题）。你知道我将如何切换我声明视图的顺序但保持相同的垂直顺序吗？

【参考方案2】：

希望一个容器可以通过.zIndex 修饰符更改z-order。默认情况下，所有视图都为 0（零），因此任何正值都会将修改后的视图推到最顶部，而任何负值会将视图放在底部。

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