SwiftUI -角点半径更改图像的高度

Question

如果.cornerRadius修改器在.frame修改器之后，图像将变得更慢。这背后的原因是什么？

struct ContentView: View {
    var body: some View {
        VStack(spacing: 100) {
            Image("image1")
                .resizable()
                .scaledToFill()
                .frame(width: 343, height: 184)
                .cornerRadius(8)
            Image("image1")
                .resizable()
                .scaledToFill()
                .cornerRadius(8)
                .frame(width: 343, height: 184)
        }
    }
}

​

​

Answer 1

在SwiftUI中，修饰符的顺序很重要，可能会导致不同的输出。

一条经验法则是：

1. 从下到上阅读
2. 理解每个修饰符都会产生一个新的视图
3. 修饰符只“修改”下面的内容：

-> .frame(width: 343, height: 184)
 -> .cornerRadius(8)
  -> .scaledToFill()
   -> .resizable()

由于您使用的是cornerRadius，因此文档说明：

使用指定的拐角半径将此视图剪裁到其边界帧。

在场景后面，您可以想象引擎应用了两个修改器，剪裁和拐角半径。

​

​

因为每个修改器在计算剪裁时都会产生一个新的视图，这就像它不知道约束新视图的界限是什么，这就解释了为什么图像会消失。

如果我们进一步尝试应用两个frame和cornerRadius，希望SwiftUI能够更清楚地解释修饰符：

​

​

如果您想了解更多信息，下面的讨论将更深入地了解SwiftUI如何看待修饰符：Order of modifiers in SwiftUI view impacts view appearance