在SwiftUI中，使用双重if和if else条件语句时，转换动画行为与预期不符。

Question

我想知道当我使用两个不同的 if 语句块时和使用 if-else 语句期望相同行为时，我的过渡动画有何不同之处或原因。以下是一些示例：

• 以下代码可以正常工作，过渡动画表现如预期：

VStack {
   homeHeader
            
   columnTitles
            
    if !showPortfolio {
       allCoinsListView
          .transition(.move(edge: .leading))
    }

    if showPortfolio {
       portfolioListView
           .transition(.move(edge: .trailing))
    }
            
    Spacer(minLength: 0)
}

• 过渡动画效果与预期不符：

VStack {
  homeHeader
            
  columnTitles
            
  if !showPortfolio {
       allCoinsListView
         .transition(.move(edge: .leading))
   } else {
       portfolioListView
         .transition(.move(edge: .trailing))
   }
            
   Spacer(minLength: 0)
}

- Adrian Piedra

Answer 1

这是关于ViewBuilder的具体细节：

1. 在第一种情况下，它为每个条件创建一个视图（因此屏幕上有两个视图，一个在内部，一个在外部，并带有转换）；
   
2. 在第二种情况下，它仅创建一个视图（具有可替换内容），因此它不起作用。

- Asperi

---

如果你使用了 switch showPortfolio，那么你会在每个子视图中添加 .transition 还是在父视图上添加？ - aheze

嗨@aheze，如果我使用switch，行为是否相同？问题在于UI构建器如何在内部处理if，对于switch也是同样的方式，因此我使用.transition .asymmetric修饰符来显式地删除其他视图，即使未添加到视图中也是如此，所以我解决了这个问题。 - Adrian Piedra

Answer 2

我找到了一个解决方案。这个问题的差异可能与 SwiftUI Result Builder 如何将 if-else 语句 转换为 buildIf、buildEither 等有关，而 if-else 语句的转换方式不同。请参见：https://jasonzurita.com/swiftui-if-statement/ 如果您在 if-else 语句 中明确定义了 非对称转换：

VStack {
    homeHeader
    
    columnTitles
    
    if !showPortfolio {
        allCoinsListView
            .transition(.asymmetric(insertion: .move(edge: .leading),
                                    removal: .move(edge: .trailing)))
    } else {
        portfolioListView
            .transition(.asymmetric(insertion: .move(edge: .trailing),
                                    removal: .move(edge: .leading)))
    }
    
    Spacer(minLength: 0)
}

我通过这篇文章找到了解决此问题的答案： SwiftUI Switch语句转换行为不如预期

- Adrian Piedra