SwiftUI中重复视图修饰符的行为疑问及相关问题咨询

我是SwiftUI新手，最近在练习时对重复使用视图修饰符的行为产生了很大困惑，查了资料和AI回答后反而更混乱了，希望能得到大家的帮助！

一、重复修饰符的优先级矛盾问题 #

我原本以为重复的修饰符会取最后一个（最新的），但实际测试结果和预期完全不符：

• 测试代码（文本颜色）：

Text("Hello world")
    .foregroundColor(Color.blue)
    .foregroundColor(Color.red)

按照AI的回答，文本应该显示红色，但实际运行后文本是蓝色，和第一个修饰符的设置一致，这和预期完全相反。

二、Spacer重复frame修饰符的诡异行为 #

另一个更费解的问题出在Spacer上：
当我给Spacer添加两个参数完全相同的frame修饰符时：

Spacer()
    .frame(width: 50)
    .frame(width: 50)

我原本以为效果和只加一个.frame(width:50)完全一样，但实际运行时，Spacer的宽度居然发生了变化——注释掉其中一个修饰符后，宽度反而和同时加两个的时候不一样，明明两个修饰符的参数都是50啊？这完全不符合逻辑。

三、环境修饰符的额外困惑 #

顺便还想请教一个相关问题：之前看到资料说foregroundColor属于环境修饰符，会影响子视图，但如果直接给Text添加这个修饰符，它的“子视图”到底指什么？Text本身好像没有子视图，这点我也没搞明白。

完整测试代码 #

下面是我用来练习的完整代码，上面的所有测试都是基于这段代码进行的：

import SwiftUI

struct ContentView: View {
    @State var amOn = false
    var paddingDistance = 20
    
    var body: some View {
        VStack {
            VStack (alignment: .trailing, spacing: CGFloat(paddingDistance)){
                // leading, center, trailing
                Text("Hello,")
                    .background(Color.yellow)
                Spacer()
                    .frame(height: 50)
                Text("am")
                    .background(Color.yellow)
                Text("World.")
                    .background(Color.yellow)
            }
            
            HStack (alignment: .firstTextBaseline){
                // top, center, bottom, firstTextBaseline, lastTextBaseLine
                Text("Ok!")
                    .font(.system(size: 30))
                Spacer()
                    // .frame(height: 10)// work for the vertical Stack
                    .frame(width: 50)
                    .frame(width: 50)
                Text("Got")
                    .font(.footnote)
                    .foregroundColor(Color.blue)
                    .foregroundColor(Color.red)
                Text("it.")
            }
            
            // Spacer(minLength: 5)
            ZStack {
                Text("It's")
                Text("Not")
                Text("Good")
            }
            
            Toggle(isOn: $amOn){
                Text("on/Off")
            }
            .padding(50)
            
            if amOn {
                Text("I am on")
                    .padding([.top, .leading], CGFloat(paddingDistance))
                    .background(Color.black)
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
            } else {
                Text("I am off")
                    .padding([.top, .leading], 20)
                    .background(Color.purple)
                    .foregroundColor(Color.white)
            }
        }
    }
}

#Preview {
    ContentView()
}

内容来源于stack exchange