为什么颜色修饰符顺序会影响 SwiftUI 中的视图大小？

Question

为什么 SwiftUI 以不同的方式呈现这两个按钮？

一次尝试一个（正文中只有 1 个按钮），其中一个为全屏黄色，另一个为正常尺寸按钮。

测试 1

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

测试 2

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

我能猜到如果链接的方法都修改了布局，为什么顺序可能很重要，但颜色如何导致这种情况并不明显。

Answer 1

原因在this文章中有很好的解释。每当应用修改器时，都会创建一个新视图。你的情况：

测试 1：

您创建了一个按钮，其大小由标签决定
创建了一个黄色背景的新视图
已创建具有最大宽度和最大高度的新视图，但不再应用黄色背景，因此您会看到一个“正常”大小的按钮。

测试 2：

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

为了更好地理解我的意思，请在空荡荡的操场上试试这个：

  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())

为什么颜色修饰符顺序会影响 SwiftUI 中的视图大小？

Why does color modifier order affect View size in SwiftUI?

ios

swift

iphone

swiftui