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

【问题标题】：SwiftUI: ZStack with scaleEffect - how to align scaled image to bottom?SwiftUI：带有 scaleEffect 的 ZStack - 如何将缩放图像与底部对齐？
【发布时间】：2023-04-05 02:03:02
【问题描述】：

我有一个 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)

解决方案图片：

【问题讨论】：

标签： swiftui scale vertical-alignment image-scaling zstack

【解决方案1】：

请将您的图像放在 VStack 中，并在图像上方放置一个 Spacer()，您的图像将位于堆栈的底部。对齐 .bottom 仅用于将多个视图彼此对齐，但您的堆栈中没有多个视图。 HStack 不计入对齐。

如果我在我的示例中尝试这个并缩小图像，

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.purple
            
            VStack {
                Spacer()
                
                Image(systemName: "ladybug")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 100, height: 100, alignment:                 
                HStack {
                    Image(systemName: "hare")
                        .resizable()
                        .frame(width: 50, height: 50)
                    Image(systemName: "hare")
                        .resizable()
                        .frame(width: 50, height: 50)
                    Image(systemName: "hare")
                        .resizable()
                        .frame(width: 50, height: 50)
                    Spacer()
                }
            }
        }
    }
}

我明白了。

亲切的问候， Mac用户T

【讨论】：

我也尝试了垫片，但没有用。 VStack() { Spacer(), Image() } - 结果相同
你能告诉我 SkillViews 在做什么吗？
技能视图在 ZStack 左侧显示另一组最多 10 张图像。这里对齐工作正常，并且 Spacer() 工作。图片在这里也是居中的，当然，如果出现一张图片就在中间，如果出现两张图片，一张在中间，一张在中间。
您不缩放图像。如果您缩放图像，错误会更小，但始终显示在中间而不是向下移动...
我缩小了图像，它仍然在视图的底部。

【解决方案2】：

我假设这个视图容器 ZStack 是一个单元格视图，因此您需要对齐的不是紧贴内容的 ZStack，而是包含那些怪物单元格的整个 HStack，例如

HStack(alignment: .bottom) {    // << here !!
   ForEach ... {
      MonsterCellView()
   }
}

【讨论】：

你是对的，我使用的是 LazyHStack，但那里的“对齐：.bottom”也无济于事。它应该在 ZStack 中。因为当我将文本放在图像上方时，中间有一个 Spacer，图像仍然不会移动到底部，而是保持它的空间......

【解决方案3】：

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

scaleEffect(_:anchor:) Apple Developer

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

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

对于以下结果：

【讨论】：