swiftui - SwiftUI：带有 scaleEffect 的 ZStack - 如何将缩放图像与底部对齐？

问题描述

我有一个 ZStack，其中显示了一个图像。在某些情况下需要缩放图像。

我无法对齐 ZStack 底部的缩放图像，它总是出现在中间。

我尝试将 ZStack(alignment: .bottom) 与图像的 .alignmentGuide(.bottom) 结合使用，但这不会改变结果。

同样在图像周围放置一个 VStack 并在其上方放置一个 Spacer() 不会改变结果。

HStack 不相关，仅显示，因为我在此构造中需要一个 ZStack。但主要问题在于 VStack，它在 ZStack 的空间中缩放后不会移动。

看起来 .scaleEffect 只是使用原始图像的位置和框架，并将缩放的图像放在中间。这是 scaleEffect 的限制吗？还有什么功能可以使用？

这是我的视图（简化代码）：//我将背景着色为紫色，以显示 ZStack 的完整大小

var body: some View {
    ZStack(alignment: .bottom) {
        Color.purple
        Image(battlingIndividual.getMonster().getStatusImageName(battlingIndividual.status))
            .resizable()
            .scaledToFill()
            .scaleEffect(battlingIndividual.getMonster().size.scaleValue)
        HStack() {
            SkillViews(battlingIndividual: battlingIndividual)
            Spacer()
        }
      }
}

结果是这样的：

但它应该看起来像这样：

编辑：我为图像添加了背景，以显示图像在 ZStack 中居中。

解决方案： 在这种情况下我们不需要对齐，我们需要一个锚：

.scaleEffect(battlingIndividual.getMonster().size.scaleValue, anchor: .bottom)

解决方案图片：

标签： swiftuiscalevertical-alignmentimage-scalingzstack

我想到了。.scaleEffect 使用自己的锚点，可以设置为 .bottom。

scaleEffect(_:anchor:) Apple Developer

因此，我只需要在 scaleEffect 中添加“ancor: .bottom”。

.scaleEffect(battlingIndividual.getMonster().size.scaleValue, anchor:
.bottom)

对于以下结果：

swiftui - SwiftUI：带有 scaleEffect 的 ZStack - 如何将缩放图像与底部对齐？

问题描述

解决方案

推荐阅读