Flutter 雙表跳轉

Question

我正在嘗試在 Flutter 中重現以下 animation（原始版本是在 SwiftUI 中構建的）：

這些項目由動態數據 model 支持——一組“項目”——並在點擊時自行刪除。

這里有 2 個動畫合二為一：

1. 已移除項目的淡出
2. 剩余項目兩側的幻燈片

在帶有FadeTransition的默認 Flutter AnimatedList中，我只得到 1)。 我的問題是如何實現它們。

我基本上想 100% 復制視頻中顯示的 animation。

編輯：從概念上講，我發現我需要的是：兩個盒子，一個堆疊在另一個盒子上，大小相同（盒子 2 的內部內容大小）。 但是，只有框 1（不可見）會影響布局。 這就是應該應用 SizeTransition 的地方。 繪制實際內容的方框 2 需要像疊加層一樣——不影響布局——在那個方框上我需要一個 FadeTransition。

此外，被刪除的項目應繪制在項目的 rest下方，而不是上方。

Answer 1

方法#1

我想您可以同時使用FadeTransition和SizeTransition ，並且您將獲得“幾乎相同的效果” - 不完全是 100%，因為框會在縮小的同時褪色。 根據 animation 的持續時間，它可能沒有明顯的不同。

要鏈接它們，您可以像這樣簡單地包裝它們：

FadeTranstion(child: SizeTransition(child: YourWidget(...

方法#2

另一方面，如果你必須達到 100% 與 SwiftUI 相同，即確保淡入淡出框不會同時收縮，那么只應用SizeTranstion進行收縮可能是最簡單的，最重要的是，使用OverlayEntry再疊加一層褪色animation。

也就是說，在AnimatedList出口 animation 中，應用SizeTransition並用Opacity(opacity: 0.0, ...)包裹它，使其不可見（但仍然占據空間）並縮小尺寸。 當 animation 啟動時（在onDelete事件或類似事件期間），在其頂部插入一個 Overlay。 這可能比維護兩個列表更容易，而且性能也更高。

我推薦方法#1，只是鏈接兩個動畫，而不是讓它 100% 復制。 結果應該看起來很相似，特別是如果 animation 很快。