如何创建网页浏览重叠效果？

Question

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

PAGE BUILDER ->

 Widget buildList(PreloadPageController pageController, List data,
      double currentPosition) {
    return AspectRatio(
      aspectRatio: 12.0 / 15.0,
      child: PreloadPageView.builder(
        itemCount: data.length,
        controller: pageController,
        preloadPagesCount: 2,
        itemBuilder: (context, index) {
          return CardWidget(
              page: index,
              currentPage: currentPosition,
          );
        },
      ),
    );
  }


CARD WIDGET ->
Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, contraints) {
      final double padding = 20.0;

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

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

      //print(start);
      return 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: _randomColor(page),
            ),
          ),
        ),
      );
    });
  }

我期待创建一个集合效果，所以第二页会出现在第一页的后面，但实际上第二页总是与第一页重叠。我可以reverse在 PageView.builder 中使用，但是这个集合需要是一个无穷大的列表，当它到达末尾时加载更多的数据，并且reverse代码会更加棘手。

我正在实现这一目标：

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

Answer 1

因此，现在，要创建重叠效果，您需要偏移下一个-Page ，以便它与当前-Page重叠，并且正如您所提到的，您发现下一个-Page 视觉上重叠，而不是所需的under-lap。

然后，除了偏移之外，您是否尝试过裁剪下一页的重叠部分？这可以模拟欠研磨的效果。

现在，我尝试复制您的样本，但我不确定您的样本PreloadPageController（也许还有其他细节），因此我的样本可能看起来有问题。此外，我并不完全熟悉裁剪小部件。但我遇到了这个可能的解决方案，我所做的就是用另一个解决方案包装它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基本上会剪掉你的偏移部分。请随意探索并根据需要进行修改！