为什么颜色修饰符顺序影响视图大小在SwiftUI?

Question

为什么SwiftUI呈现这两个按钮不同?

一次尝试一个(主体只有一个按钮)，其中一个为全屏黄色，另一个为正常大小的按钮。

测试1

Button("Smh...") {}
.background(.yellow)
.frame(maxWidth: .infinity, maxHeight: .infinity)

测试2

Button("Smh...") {}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(.yellow)

我可以猜到，如果链接的方法都修改了布局，为什么顺序可能很重要，但不清楚颜色是如何引起这种情况的。

Answer 1

这篇文章很好地解释了原因。每当应用修饰符时，就会创建一个新视图。在你的例子中:

测试1:

1. 创建一个按钮，其大小由标签
决定
2. 创建一个黄色背景的新视图
3. 创建了一个具有最大宽度和最大高度的新视图，但是没有再次应用黄色背景，因此你看到的是"normal"大小的按钮。
测试2:

1. 创建一个按钮，其大小由标签
决定
2. 一个新的视图创建与最大宽度和高度
3. 然后应用背景色，因此新创建的全屏视图具有黄色背景

为了更好地理解我的意思，在一个空的操场上试一下:

import Foundation
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
var body: some View {
HStack {
Button("Smh...") {}
.frame(width: 100, height: 100)
.background(.yellow)

Button("Smh...") {}
.background(.yellow)
.frame(width: 100, height: 100)
.border(.green)

}
}
}
PlaygroundPage.current.setLiveView(ContentView())