ios - SwiftUI:如何知道修饰符的正确顺序？

Question

我是 SwiftUI 的新手，第一次学习它，不明白为什么下面的代码片段不起作用。理想情况下，VStack 应向各个方向拉伸(stretch)，Image 的宽度应为 200 像素且不会丢失其纵横比。

代码

struct ContentView: View {
    var body: some View {
        VStack() {
            Image("Image Name")
                .resizable()
                .frame(width: 200)
                .aspectRatio(contentMode: .fit)
        }
        .background(Color.red)
        .frame(maxWidth: .infinity,maxHeight: .infinity)
    }
}

在我不小心重新排序修饰符之后，它起作用了。那么，我应该如何在每次都没有命中和试用方法的情况下知道修饰符的正确顺序？

// new VStack modifier order 
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.red)

// new Image modifier order
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 200)

Answer 1

目前最好的思考方式是想象 SwiftUI 在每个修改器之后渲染您的 View 。因此，只要你说 .background(Color.red) ，它就会将背景着色为红色，而不管你给它的框架是什么。如果您稍后展开框架，它不会神奇地重新绘制背景 - 背景已经应用。

当然，这实际上不是 SwiftUI 的工作方式，因为如果这样做，那将是一场性能噩梦，但它是您在学习时使用的一种巧妙的思维捷径。

更多详情请引用此链接https://www.hackingwithswift.com/books/ios-swiftui/why-modifier-order-matters#:~:text=Every%20time%20we%20modify%20a,up%3A%20ModifiedContent%3CModifiedContent%3C%E2%80%A6