如何在Flutter中开发支持滑动切换图片的落地页

核心实现思路 #

• 你提到的滑动切换整页内容的需求，直接使用Flutter官方提供的PageView组件即可实现，这是该场景的最优解，比普通ListView、Scrollable组件更适配整页切换的交互逻辑，默认支持切换动画、滑动方向自定义、滑动边界物理效果配置。
• 如果需要实现设计图中的动效（比如滑动时图片位移速度和文字不一致的视差效果），可以通过监听PageController的滚动偏移量，实时计算并修改对应页面内图片、文字的位移、透明度属性即可。
• 若需要添加页面切换指示器，将PageController和指示器组件绑定即可，可直接用官方的PageIndicator组件，也可自定义圆点/进度条样式的指示器。

核心代码示例 #

// 初始化页面控制器
final PageController _pageController = PageController(viewportFraction: 1.0);

@override
Widget build(BuildContext context) {
  return PageView(
    controller: _pageController,
    // 设置滑动方向，horizontal为横向滑动，vertical为纵向滑动
    scrollDirection: Axis.horizontal,
    // 配置滑动物理效果，这里设置为回弹效果
    physics: const BouncingScrollPhysics(),
    children: const [
      // 每个子项对应一页的完整布局，包含图片和对应文案
      LandingPageItem(imgUrl: "xxx1", title: "xxx1", desc: "xxx1"),
      LandingPageItem(imgUrl: "xxx2", title: "xxx2", desc: "xxx2"),
      LandingPageItem(imgUrl: "xxx3", title: "xxx3", desc: "xxx3"),
    ],
  );
}

特殊需求适配方案 #

• 如果需要实现前后页面露出边缘的卡片式切换效果，将PageController初始化时的viewportFraction参数设置为小于1的数值即可，比如0.9即可让前后页露出10%的宽度。
• 如果不需要整页切换，而是要实现单页内多元素联动滚动，可使用CustomScrollView搭配Sliver系列组件实现，可自定义不同模块的滚动速率、锚点定位逻辑。

设计参考图 #

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