Flutter中避免card_swiper组件子Widget重复重建的方法

以下是针对该问题的几种实用优化技巧：

1. 使用AutomaticKeepAliveClientMixin保持卡片状态 #

让卡片的StatefulWidget混入AutomaticKeepAliveClientMixin，强制Flutter保留Widget状态，避免滑动触发重建。

修改MyCardWidget代码：

class MyCardWidget extends StatefulWidget {
  final int index;

  const MyCardWidget({Key? key, required this.index}) : super(key: key);

  @override
  _MyCardWidgetState createState() => _MyCardWidgetState();
}

class _MyCardWidgetState extends State<MyCardWidget> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      padding: EdgeInsets.all(16),
      child: Text('Card ${widget.index}'),
    );
  }
}

2. 提前缓存所有卡片实例 #

在父组件中预先创建好所有卡片Widget，滑动时直接复用已创建的实例，避免itemBuilder中重复创建。

修改MySwiper代码：

class MySwiper extends StatelessWidget {
  final List<MyCardWidget> _cards = List.generate(5, (index) => MyCardWidget(index: index));

  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemCount: _cards.length,
      itemBuilder: (BuildContext context, int index) {
        return _cards[index];
      },
    );
  }
}

3. 为卡片设置唯一稳定的Key #

给每个卡片绑定唯一Key，帮助Flutter识别Widget身份，避免因Key不稳定引发的重建，结合缓存方案使用效果更佳：

final List<MyCardWidget> _cards = List.generate(5, (index) => MyCardWidget(
  key: ValueKey(index),
  index: index,
));

4. 替换为性能更优的轮播组件 #

若上述优化仍无法满足需求，可替换为默认支持页面缓存的轮播包（如carousel_slider），它会自动缓存前后若干页面，减少不必要的重建：

import 'package:carousel_slider/carousel_slider.dart';

class MySwiper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        enableInfiniteScroll: false,
        viewportFraction: 1.0,
      ),
      items: List.generate(5, (index) => MyCardWidget(index: index)),
    );
  }
}

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