Flutter调用setState触发重建但替换的Swipeable卡片组件未正确绘制

问题根本原因 #

该问题由Flutter的状态复用机制结合第三方库flutter_swipable的内部实现逻辑共同导致：

1. Swipable为有状态组件，滑动交互完成后，其内部状态会将组件偏移量永久设置为屏幕外的数值，实现滑走卡片消失的效果
2. 你更新索引调用setState后，没有给新生成的SplashCard传入唯一key，Flutter的Widget差分算法判定前后两次构建的SplashCard类型完全一致，因此会直接复用旧的Swipable组件状态，不会重置偏移量
3. 因此新卡片的内容虽然已经更新为对应索引的数据，但组件整体仍处于屏幕外的偏移位置，最终表现为屏幕空白

你的认知偏差在于默认调用setState后就会完全重建对应组件树，忽略了同类型无key的状态组件会复用原有状态的规则。

修复方案 #

只需要为每个SplashCard绑定与当前卡片索引关联的唯一key，强制索引变化时完全重建Swipable组件即可。可任选以下一种方案实现：

方案1：在使用处包裹KeyedSubtree #

修改build方法中Expanded节点的代码：

Expanded(
  child: KeyedSubtree(
    key: ValueKey(_currentCardIndex),
    child: _createStandardSplashCard(widget.cardList[_currentCardIndex]),
  ),
)

方案2：直接给SplashCard传入key #

首先修改_createStandardSplashCard方法，增加key参数传递：

Widget _createStandardSplashCard(FlashCard card, int index) {
  return SplashCard(
    key: ValueKey(index),
    onSwipeRight: (details) => _nextCard(),
    front: SplashCardContent(content: Text(card.front)),
    back: SplashCardContent(content: Text(card.back)),
  );
}

再修改调用处传入当前索引：

Expanded(
  child: _createStandardSplashCard(widget.cardList[_currentCardIndex], _currentCardIndex),
)

两种方案效果一致，修改后索引变化时key会同步变化，Flutter会销毁旧的Swipable实例，创建全新的组件，偏移量会重置为初始的0值，新卡片即可正常显示。

内容的提问来源于stack exchange，提问作者Denis