问题描述
我有一个 ZStack,其中显示了一个图像。 在某些情况下需要缩放图像。
我无法在 ZStack 底部对齐缩放图像,它始终显示在中间。
我尝试将 ZStack(alignment: .bottom) 与 .alignmentGuide(.bottom) 结合用于图像,但这不会改变结果。
还在图像周围放置一个 vstack 并在其上方放置一个 Spacer() 不会改变结果。
HStack 不相关,只显示出来,因为我在这个构造中需要一个 ZStack。但主要问题在于 vstack,它在 ZStack 的空间中缩放后不会移动。
.scaleEffect 似乎只是使用原始图像的位置和框架并将缩放后的图像放在中间。这是 scaleEffect 的限制吗?还可以使用哪些功能?
This is my View (reduced code): // 我将背景涂成紫色,以显示 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)
解决方法
请将您的图像放在 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)
Spacer()
}
}
}
}
}
我明白了。
亲切的问候, MacUserT
,我假设这个视图容器 ZStack
是一个单单元格视图,因此您需要对齐的不是 ZStack 紧贴内容,而是包含那些怪物单元格的整个 HStack
,例如
HStack(alignment: .bottom) { // << here !!
ForEach ... {
MonsterCellView()
}
}
,
我想通了。 .scaleEffect 使用自己的锚点,可以设置为 .bottom。
scaleEffect(_:anchor:) Apple Developer
因此,我只需要在 scaleEffect 中添加“ancor: .bottom”。
.scaleEffect(battlingIndividual.getMonster().size.scaleValue,anchor:
.bottom)