SwiftUI如何决定哪个部分是前台？

在下面的代码中，我设计了两张卡，

Card1

和

Card2

，它们都有一个

矩形

作为背景，一个图像

心脏

作为前景，但在第一张卡中，我将其

矩形

的前景颜色设置为白色，而第二个没有任何前景色设置

然后，我在

ContentView

中给这两张卡加上一个粉红色的前景色（并为它们添加一些阴影）

结果是：

从结果中，我们可以看到，虽然两张卡在没有设置前景色的情况下看起来完全相同，但在我们给它们设置粉色前景色后，它们看起来不同

所以我的问题是：

SwiftUI如何决定哪些元素是前景的一部分

----[已编辑]----

请注意您的解释：

---

.foregroundColor

应用于整个视图层次结构，但在Card1的情况下，矩形已经设置了前景色，因此它不会从上方应用（不会被覆盖）。这是修改器的预期行为。

import SwiftUI
import PlaygroundSupport

// image (SF Symbol)
let heart = Image(systemName: "heart.fill")                  
    .resizable()
    .scaledToFit()           
    .frame(width: 64, height: 64)

struct Card1: View {
    var body: some View {
        ZStack {
            Rectangle().foregroundColor(.white)  // with foreground color
            heart
        }
    }
}

struct Card2: View {
    var body: some View {
        ZStack {
            Rectangle()                          // without foreground color
            heart
        }
    }
}

struct ContentView: View {
    var body: some View {
        HStack {
            Group {
                Card1()
                Card1().foregroundColor(.pink)
                Card2()
                Card2().foregroundColor(.pink)
            }
                .frame(width: 100, height: 100)
                .shadow(color: Color.black.opacity(0.6), radius: 6, x: 6, y: 6)
        }
            .padding(40)
            .background(Color.gray)
    }
}

PlaygroundPage.current.setLiveView(ContentView())