SwiftUI 如何使用 zIndex 更改视图分层的顺序？

默认情况下，SwiftUI 的 ZStack 使用绘画者的算法来确定视图的深度，以决定视图的深度：首先绘制到 ZStack 中的所有内容都会被首先绘制，然后在其上分层放置随后的视图。

尽管这通常是您想要的，但有时您需要更多的控制权-例如，您可能希望在应用运行时将一个视图推到另一个视图的后面，或者在点击某个视图时将其移到最前面。

为此，您需要使用 zIndex() 修饰符，该修饰符允许您确切指定视图如何在单个 ZStack 中分层。 视图的默认Z索引为0，但是您可以提供正值或负值，分别将它们放置在其他视图的上方或下方。

例如，此 ZStack 包含两个重叠的矩形，但是绿色矩形仍然可见，因为它使用的 Z 索引值为 1：

ZStack {
    Rectangle()
        .fill(Color.green)
        .frame(width: 50, height: 50)
        .zIndex(1)

    Rectangle()
        .fill(Color.red)
        .frame(width: 100, height: 100)
}

⚠️ 注意：zIndex() 修饰符仅影响当前 ZStack 内的绘制顺序。 这意味着，如果您有两个重叠的堆栈，则需要考虑堆栈的 Z 索引以及堆栈内部的视图。