Flutter 如何创建页面视图重叠效果？

我需要创建一个重叠的页面视图集合，但由于项目的绘制/布局顺序，第二页总是显示在第一页的前面。有没有办法创建一个集合列表，使第一个项目与其他项目重叠

页面生成器->
小部件构建列表（预加载pageController、pageController、列表数据、，
双电流位置）{
返回AspectRatio(
方面：12.0/15.0，
子项：Preload PageView.builder(
itemCount:data.length，
控制器：页面控制器，
预测：2，
itemBuilder：（上下文，索引）{
返回卡片小部件(
页码：索引，
当前页面：当前位置，
);
},
),
);
}
卡片小部件->
小部件构建（构建上下文）{
返回布局生成器（生成器：（上下文，约束）{
最终双填充=20.0；
var delta=当前页面-页面；
var start=padding*delta.abs（）*10；
var top=填充+填充*最大值（-delta，0.0）；
底部变量=填充+填充*最大值（-delta，0.0）；
//打印（开始）；
返回Transform.translate(
偏移量：偏移量（-start，0），
子：容器(
填充：边缘设置。仅限（顶部：顶部，底部：底部），
孩子：ClipRRect(
边界半径：边界半径。圆形（16.0），
子：容器(
颜色：_随机颜色（第页），
),
),
),
);
});
}

我希望创建一个集合效果，这样第二个页面将位于第一个页面的后面，但实际上第二个页面总是与第一个页面重叠。 我可以在PageView.builder中使用

reverse

，但是这个集合需要是一个无限列表，当它到达末尾时加载更多的数据，使用

reverse

代码将更加复杂

我正在实现这一目标：

---

但我想要的是红色卡片后面的蓝色卡片。

所以现在，为了创建重叠效果，您正在偏移下一页，使其与当前页重叠，并且正如您所提到的，您发现下一页在视觉上是重叠的，而不是所需的圈下

那么，除了偏移量之外，您是否尝试过裁剪下一页的重叠部分？这可以模拟研磨不足的影响

现在，我尝试复制您的示例，但我不确定您的

prelopagecontroller

（可能还有其他详细信息），因此我的示例可能看起来有问题。此外，我并不完全熟悉裁剪小部件。但我遇到了这个可能的解决方案，我所做的只是用另一个

ClipRect

：

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      final double padding = 20.0;

      var delta = widget.currentPage - widget.myPage;
      var start = padding * delta.abs() * 10;

      var top = padding + padding * max(-delta, 0.0);
      var bottom = padding + padding * max(-delta, 0.0);

      return ClipRect(
        child: Transform.translate(
          offset: Offset(-start, 0),
          child: Container(
            padding: EdgeInsets.only(top: top, bottom: bottom),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16.0),
              child: Container(
                color: redOrBlue(widget.myPage),
              ),
            ),
          ),
        ),
      );
    });
  }

这个附加的

ClipRect

基本上是从偏移部分剪辑下来的。请根据需要自由探索和修改

有一个小部件，但它可能会引起更多的麻烦，尤其是在规模上。您可以将页面包装在

ClipRect

中，但只有列表末尾的小部件需要它。因此，在生成器函数中，设置一个布尔值：

clipNeeded = (controller.page + 0.5) <= index;

然后需要创建

CustomRect

类，扩展

CustomClipper

所需的精确数学取决于实现，但在这个从左向右滚动的示例中，它类似于

class CustomRect extends CustomClipper<Rect>{

  @override
  Rect getClip(Size size) {
    double leftLine = /* some calculation */;
    return Rect.fromLTRB(leftLine, 0.0, size.width, size.height);
  }
  @override
  bool shouldReclip(CustomRect oldClipper) {
    return true;
  }
}

class CustomRect扩展了CustomClipper{
@凌驾
Rect getClip（大小）{
双左行=/*一些计算*/；
从LTRB返回Rect.from（leftLine，0.0，size.width，size.height）；
}
@凌驾
bool shouldReclip（CustomRect oldClipper）{
返回true；
}
}

尝试使用堆栈小部件。你好你说使用堆栈而不是页面浏览？我试过了，但是使用Stack widget我有一个巨大的内存开销，当它开始加载更多数据时会导致应用程序崩溃。对此有任何更新吗？我最终使用了PageView.builder的反向属性，但我不得不放弃无休止的滚动页面。嗨，我尝试了你的解决方案，但它所做的是在第一个页面视图后面裁剪卡片，因为我的实现使卡片从页面视图中移开，所以在第一个和第二个卡片之间创建了一个间隙（裁剪第二个卡片）。

class CustomRect extends CustomClipper<Rect>{

  @override
  Rect getClip(Size size) {
    double leftLine = /* some calculation */;
    return Rect.fromLTRB(leftLine, 0.0, size.width, size.height);
  }
  @override
  bool shouldReclip(CustomRect oldClipper) {
    return true;
  }
}