Ios ZStack中的矩形正在更改SwiftUI动画

我正试图用SwiftUI在两个州之间转换

我已经把它简化为一个简单的例子

struct Test2View:View{
@状态变量isLoading:Bool=true
var body：一些观点{
ZStack{
圆角转角（拐角半径：10）
.填充（颜色.辅助）
.阴影（半径：4，x:2，y:5）
.框架（宽度：300，高度：150，对齐：。中心）
如果卸载{
文本（“加载”）
.transition（.moveAndFade（））
}否则{
文本（“内容”）
.transition（.moveAndFade（））
}
}.ontapsigne{
动画片{
self.isLoading.toggle（）
}
}
}
}

在没有RoundedRectangle的情况下，这是我所期望的工作方式：

但是，一旦我添加圆形矩形，我就会丢失删除动画（除非我中断动画，否则您可以看到我期望的动画）：

---

你知道为什么圆角会弄乱动画吗？我甚至尝试添加

.transition（.identity）

，但没有成功。

我无法说出动画更改的确切原因，但我已经找到了原因。这与框架的大小有关

您的

Test2View

视图主体版本：

ZStack {
    RoundedRectangle(cornerRadius: 10)
        .fill(Color.white)
        .shadow(radius: 4, x: 2, y: 5)
        .frame(width: 300, height: 150, alignment: .center)

    if isLoading {
        Text("Loading")
        .transition(.moveAndFade())
    } else {
        Text("Content")
        .transition(.moveAndFade())
    }
}
.border(Color.red)
.onTapGesture {
    withAnimation {
        self.isLoading.toggle()
    }
}

固定版本：

ZStack {
    if isLoading {
        Text("Loading")
        .transition(.moveAndFade())
    } else {
        Text("Content")
        .transition(.moveAndFade())
    }
}
.background(
    RoundedRectangle(cornerRadius: 10)
        .fill(Color.white)
        .shadow(radius: 4, x: 2, y: 5)
        .frame(width: 300, height: 150, alignment: .center)
)
.border(Color.green)
.onTapGesture {
    withAnimation {
        self.isLoading.toggle()
    }
}

基本上，我使用

.background

而不是创建

VStack

比较图像：

---

边框颜色仅用于指示边框大小。你可以移除这个

我说不出动画变化的确切原因，但我已经找到了原因。这与框架的大小有关

您的

Test2View

视图主体版本：

ZStack {
    RoundedRectangle(cornerRadius: 10)
        .fill(Color.white)
        .shadow(radius: 4, x: 2, y: 5)
        .frame(width: 300, height: 150, alignment: .center)

    if isLoading {
        Text("Loading")
        .transition(.moveAndFade())
    } else {
        Text("Content")
        .transition(.moveAndFade())
    }
}
.border(Color.red)
.onTapGesture {
    withAnimation {
        self.isLoading.toggle()
    }
}

固定版本：

ZStack {
    if isLoading {
        Text("Loading")
        .transition(.moveAndFade())
    } else {
        Text("Content")
        .transition(.moveAndFade())
    }
}
.background(
    RoundedRectangle(cornerRadius: 10)
        .fill(Color.white)
        .shadow(radius: 4, x: 2, y: 5)
        .frame(width: 300, height: 150, alignment: .center)
)
.border(Color.green)
.onTapGesture {
    withAnimation {
        self.isLoading.toggle()
    }
}

基本上，我使用

.background

而不是创建

VStack

比较图像：

---

边框颜色仅用于指示边框大小。你可以移除这个

旁注：对于任何尝试此代码但看不到文本的人，它只在亮模式下工作，而不是暗模式！你是对的，我已经减少了这么多，我忘记了黑暗模式。添加了暗模式的前景色。非常感谢。黑暗模式不应该这样做。

文本

不需要前景修改器，因为默认情况下它将使用

主

颜色。问题是您的矩形是白色的，这与文本在暗模式下的颜色相同。要解决此问题，请在原始代码上，将

.fill（Color.white）

替换为

.fill（Color.secondary）

。我下面的答案有帮助吗？在这种情况下确实有帮助，但当我开始将其复杂化时，我遇到了同样的问题。我真的很想知道引擎盖下发生了什么，但我想对于任何尝试此代码但看不到文本的人来说，这将很难知道旁注-它只在灯光模式下工作，而不是在黑暗模式下！你是对的，我已经减少了这么多，我忘记了黑暗模式。添加了暗模式的前景色。非常感谢。黑暗模式不应该这样做。

文本

不需要前景修改器，因为默认情况下它将使用

主

颜色。问题是您的矩形是白色的，这与文本在暗模式下的颜色相同。要解决此问题，请在原始代码上，将

.fill（Color.white）

替换为

.fill（Color.secondary）

。我下面的答案有帮助吗？在这种情况下确实有帮助，但当我开始将其复杂化时，我遇到了同样的问题。我真的很想知道引擎盖下发生了什么，但我想很难知道这是官方的，我不明白SwiftUI是如何制作动画的，下面是另一个场景：。输入不是动画，但离开是动画。（如果您想知道为什么我不为VStack设置动画：-我想为每个部分添加一个延迟；-这是更大的VStack的一部分）这是官方的，我无法理解SwiftUI是如何制作动画的，这是另一个场景：。输入未设置动画，但保留动画。（如果您想知道为什么我不设置VStack动画：-我想为每个部分添加延迟；-这是较大VStack的一部分）