SwiftUI - 角半径改变图像的高度答案

【问题标题】：SwiftUI - corner radius changes the height of an imageSwiftUI - 角半径改变图像的高度
【发布时间】：2021-10-19 07:39:39
【问题描述】：

如果.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)
        }
    }
}

【问题讨论】：

修饰符的顺序很重要。 cornerRadius 正在剪辑，但 frame 不是。
没错，我刚刚查看了文档，上面写着“将此视图剪辑到其边界框，并具有指定的角半径”

标签： ios swift swiftui

【解决方案1】：

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

经验法则是：

从下到上阅读它们
了解每个修饰符都会产生一个新视图
修饰符“修改”仅以下内容：

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

由于您使用了cornerRadius，因此文档指出：

将此视图剪辑到其边界框，并带有指定的角半径。

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

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

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

如果你想了解更多，本次讨论会更深入地了解 SwiftUI 如何看待修饰符的细节：Order of modifiers in SwiftUI view impacts view appearance

【讨论】：