这个 SwiftUI 动画应该只淡出。为什么会向右移动？

Question

我很难理解为什么会发生这种情况。我将问题简化为最小的表达方式。

我有一个 Text 视图，当被删除时，它应该只是淡出。仅为了清楚起见，添加了 .transition(.opacity)。它不应该是必需的，因为它是默认设置。然而，结果是除了淡出之外，文本视图还向右滑动。

通过调整文本长度，我意识到在过渡期间，它的左边距希望与 CHANGE 按钮的左边距对齐。但是为什么呢？！

反之，加回来时，它工作正常，没有任何动静。只是一个不错的淡入效果。

这个问题不仅出现在 iOS 上，macOS 也出现。使用 Xcode 11 beta 2。

import SwiftUI

struct ContentView : View {
    @State private var showText = true

    var body: some View {
        VStack {

            Spacer()

            if showText {
                Text("I should always be centered!").font(.largeTitle).transition(.opacity)
            }

            Spacer()

            Button(action: {
                withAnimation(.basic(duration: 1.5)) { self.showText.toggle() }
            }, label: {
                Text("CHANGE").font(.title)
            })

            Spacer()

            }
    }
}

Answer 1

我会回答我自己的问题...事实证明，父视图在过渡期间缩小，使文本视图随之移动。为了说明，我在视图中添加了一些边框：

为了解决这个问题，我必须保证父视图不收缩。就像添加这个一样简单：

HStack { Spacer() }

修改后的代码如下所示：

import SwiftUI

struct ContentView : View {
    @State private var showText = true

    var body: some View {
        VStack {
            Spacer()

            if showText {
                Text("I should always be centered!").font(.largeTitle).transition(.opacity).border(Color.blue)
            }

            Spacer()

            Button(action: {
                withAnimation(.basic(duration: 1.5)) { self.showText.toggle() }
            }, label: {
                Text("CHANGE").font(.title).border(Color.blue)
            })

            Spacer()

            // This ensures the parent is kept wide to avoid the shift
            HStack { Spacer() }

        }.border(Color.green)
    }
}

我仍然认为这是一个错误，否则，淡入应该具有相同的行为，而事实并非如此。如果这不是一个错误，那就不是人们所期望的。我会提交错误报告。

Answer 2

SwiftUI 自动为布局更改设置动画。

我的理论是Spacer 会在您隐藏它时替换Text，并且通过扩展以填充超级视图，它将Text 推向屏幕的后缘。

您可以使用此方法解决问题：

Text("I should always be centered!")
                .font(.largeTitle)
                .opacity(showText ? 1 : 0)

Text 将淡入/淡出，而不会以这种方式移动。