Flutter滑动页面叠加效果实现方案咨询

目前没有直接对应该效果的第三方库，你可以通过自定义PageTransformer来实现视频中的页面切换效果，具体实现如下：

核心思路 #

通过PageView的pageTransformer属性，根据页面的位置偏移量，给页面添加缩放+平移的组合动画，模拟当前页面缩小滑出、新页面放大滑入的叠加效果。

代码实现 #

import 'package:flutter/material.dart';

class StackPageTransformer extends PageTransformer {
  // 可调整的动画参数，匹配视频效果
  final double minScale = 0.8;
  final double slideDistance = 30.0;

  @override
  Widget transformPage(Widget page, double position) {
    double opacity = 1.0;
    double scale = 1.0;
    double translateX = 0.0;

    if (position < -1) {
      // 页面完全滑出左侧，隐藏
      opacity = 0.0;
    } else if (position <= 0) {
      // 当前页面向左滑出：缩放+右移+淡出
      opacity = 1 + position;
      scale = 1 + position * (1 - minScale);
      translateX = slideDistance * position;
    } else if (position <= 1) {
      // 新页面从右侧滑入：缩放+左移+淡出
      opacity = 1 - position;
      scale = minScale + position * (1 - minScale);
      translateX = -slideDistance * position;
    } else {
      // 页面完全滑出右侧，隐藏
      opacity = 0.0;
    }

    return Transform(
      transform: Matrix4.identity()
        ..translate(translateX, 0)
        ..scale(scale),
      alignment: Alignment.center,
      child: Opacity(
        opacity: opacity,
        child: page,
      ),
    );
  }
}

// 使用示例
class CustomStackPageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
      pageSnapping: true,
      transformer: StackPageTransformer(),
      children: const [
        ColoredBox(color: Colors.deepOrange),
        ColoredBox(color: Colors.teal),
        ColoredBox(color: Colors.purple),
      ],
    );
  }
}

效果调整 #

• 修改minScale可以控制页面缩小的幅度，值越小页面缩得越厉害
• 修改slideDistance可以调整页面滑动的偏移距离，匹配视频中的位移效果
• 如果需要添加阴影层级效果，可以在page外层嵌套Container，根据position动态调整BoxShadow的参数，增强堆叠感

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