SwiftUI 2matchedGeometryEffect：修改器的顺序

Question

我一直在绞尽脑汁地想用 SwiftUI 2 创建一个想要的匹配几何效果。在这个学习过程中，有些东西通过了我的道路，我真的无法解释。我将举一个例子。

我尝试创建一个“列表”->“详细信息”过渡，其效果通常称为“英雄”效果。列表视图的个人资料图片会转换为详细视图上的大横幅。

为了实现这一目标，我创建了两个带有几个修饰符的 KFImage（KF = Kingfisher，一个我用来方便下载和缓存图像的包）：

列表显示：

if !isProductDetailViewPresented {
   KFImage(store.results.first?.images?.first?.url)
      .resizable()
      .cornerRadius(30)
      .scaledToFill()
      .matchedGeometryEffect(id: "image.testprod", in: animationNamespace!, anchor: .center, isSource: !isProductDetailViewPresented)
      .animation(.easeInOut(duration: 0.3))
      .frame(width: 60, height: 60, alignment: .center)
      .zIndex(999)
}

详细视图：

if isProductDetailViewPresented {

...

    KFImage(product?.images?.first?.url)
        .resizable()
        .scaledToFill()
        .cornerRadius(30)
        .matchedGeometryEffect(id: "image.testprod", in: animationNamespace!, anchor: .center, isSource: isProductDetailViewPresented)
        .frame(height: 300)
        .animation(.easeInOut(duration: 0.3))

...

}

...这几乎成功了；不知何故，我的图像不会受到限制.frame(width: 60, height: 60)。相反，它会拉伸以使图像适合视图，使宽度大于 60。但高度仍保持在 60。

为了解决这个问题，我想；也许这个.frame()修饰符应该放在.matchedGeometryEffect()修饰符之前。但当我这样做时，只有两个图像的位置发生转变；不是尺寸。这让我认为修改器将帧“固定”到修改器之前.matchedGeometryEffect()的修改器位置。.frame().matchedGeometryEffect()

这很奇怪，因为互联网上的几个示例显示了在.frame()before 中调用的代码.matchedGeometryEffect()，例如此处（搜索 .matchedGeometryEffect()，只有 2 个）和此处（“跟随追随者”部分）。

两个问题：

1. 为什么我的只有在我调用.frame() 后才 .matchedGeometryEffect()起作用，而在线资源则相反？

2. 如何.matchedGeometryEffect()处理修饰符的顺序？我应该考虑什么？

老实说，我在弄清楚这个 API 时遇到了相当大的困难。我希望你们能为我解决问题。:)