在具有雙 If 和 if else 條件的 SwiftUI 中，轉換 animation 行為與預期不同

Question

我想知道當我使用兩個不同的 if 語句塊並且當我使用 if-else 語句期望相同的行為時，我的轉換 animation 有什么不同或為什么會有不同的行為，這里有一些示例：

• 以下代碼可以正常工作，並且轉換 animation 的行為符合預期：

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

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

• 過渡 animation 的行為不符合預期：

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

Answer 1

這是ViewBuilder的細節：

1. 在第一種情況下，它為每個條件創建一個視圖（因此屏幕上存在兩個視圖，一進一出，帶有過渡）；
   
2. 在第二種情況下，它只創建一個視圖（具有可替換的內容），所以它不起作用。

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 Statement Transition Behavior is not as expected