如何创建综合浏览量重叠效果？

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),
            ),
          ),
        ),
      );
    });
  }

我原以为会产生收藏效果，因此第二页将位于第一页的后面，但实际上第二页总是与第一页重叠。我可以在PageView.builder中使用reverse，但是此集合必须是一个无穷大列表，当它到达末尾时将加载更多数据，并且使用reverse时，代码将更加棘手。

我正在实现：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmliYi5jby9wdlFKNlNjL3dyb25nLnBuZyJ9” alt =“错误的结果”>

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

Answer 1

现在，要创建重叠效果，您要偏移next