Flutter使用flutter_swiper自定义布局如何同时展示3项并保留滑动动画

你当前代码只显示单条的核心原因是CustomLayoutOption中设置的X轴平移偏移量过大，左右两个条目被移出了可视区域，调整偏移量和相关参数即可实现同时显示3个条目的需求，修改后的代码如下：

Swiper(
  layout: SwiperLayout.CUSTOM,
  customLayoutOption: CustomLayoutOption(
    startIndex: -1,
    stateCount: 3
  // 如果不需要旋转倾斜效果可以把addRotate这一段删掉
  ).addRotate([
    -15.0/180,
    0.0,
    15.0/180
  ]).addTranslate([
    // 调小偏移量，让左右条目留在可视区域
    const Offset(-220.0, 0.0),
    const Offset(0.0, 0.0),
    const Offset(220.0, 0.0)
  ]),
  itemWidth: 300.0,
  itemHeight: 200.0,
  itemBuilder: (context, index) {
    return Container(
      color: Colors.grey,
      child: Center(
        child: Text("$index"),
      ),
    );
  },
  // 适当调大viewportFraction，预留更多可视空间给左右条目
  viewportFraction: 0.8,
  itemCount: 10
)

如果显示位置不符合你的预期，可以微调addTranslate里的X轴偏移数值，以及viewportFraction的大小，直到达到你想要的展示效果。

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