SwiftUI：如何知道修飾符的正確順序？

Question

我對SwiftUI很陌生，第一次學習它，但不明白為什么下面的代碼段不起作用。 理想情況下， VStack應該在所有方向上拉伸，並且Image應該有 200px 的寬度，而不會丟失其縱橫比。

代碼

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 在每個修飾符之后渲染您的視圖。 所以，只要你說 .background(Color.red) 它 colors 背景是紅色的，不管你給它什么框架。 如果您稍后擴展框架，它不會神奇地重繪背景——這已經應用了。

當然，這實際上並不是 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