Flutter中实现横向ListView滑动切换Item（替代ViewPager）

要实现类似谷歌应用商店的横向列表滑动切换效果，只需给你的ListView.separated添加页面滚动物理效果，并调整Item和分隔符的尺寸适配横向布局，修改后的代码如下：

return ListView.separated(
  separatorBuilder: (BuildContext context, int index) {
    return SizedBox(width: 3); // 横向列表的分隔符要设置宽度，原代码的height无效
  },
  scrollDirection: Axis.horizontal,
  shrinkWrap: true,
  // 添加页面滚动物理效果，滑动后自动吸附到Item边界
  physics: const PageScrollPhysics(),
  itemCount: snapshot.data.length,
  itemBuilder: (ctx, i) => SizedBox(
    // 设置Item宽度为屏幕宽度，确保每次切换显示完整一个Item
    width: MediaQuery.of(ctx).size.width,
    child: AlAinPdtItem(
      title: snapshot.data[i].title,
      imgUrl: snapshot.data[i].imgUrl,
      price: snapshot.data[i].price,
      pdt2: snapshot.data[i],
    ),
  ),
);

关键修改说明： #

• PageScrollPhysics()：这是实现页面式滑动的核心，它让ListView的滚动行为变为类似PageView的切换逻辑，滑动结束后会自动对齐到Item的起始位置，实现"滑到下一个Item"的效果。
• Item宽度设置：通过SizedBox将每个AlAinPdtItem的宽度设为屏幕宽度，确保每次滑动正好切换到下一个完整的Item，和谷歌应用商店的横向列表表现一致。
• 分隔符调整：横向ListView的分隔符需要设置width而非height，原代码的SizedBox(height:3)在横向布局中不会生效，改为width:3才能显示横向间距。

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