PageView 与 viewportFraction 的非中心对齐 < 1.0

Question

当您创建 viewportFraction 值为 <1.0 for the PageController, the pages are snapped to the center of the viewport, like so:

的 PageView 时

我希望当前页面捕捉到视口的顶部，而下一页呈现在底部栏下方。我尝试过对每个页面应用转换：

Transform.translate(offset: Offset(0.0, -36.0), child: page)

乍一看，这似乎可以工作（参见第一张图片），但是当下一页在没有转换的情况下隐藏时，无法渲染下一页（参见第二张图片）：

我曾想过将 ListView 与 PageScrollPhysics 一起使用（它的行为正确），但后来我失去了分页 API（查看我所在页面/跳转到页面的能力）。执行此操作的适当方法是什么，即在屏幕上始终呈现下一页的方式？

Answer 1

我实际上正在尝试实现类似的目标，我确实在这里问了一个问题：有没有办法禁用PageView剪切效果？

但是多亏了你，你使用 ListView 和 PageScrollPhysics 的想法非常出色，我现在可以解决它。要计算页面，您只需执行以下操作：

ScrollController controller = ScrollController();
controller.addListener((){
  int page = (controller.offset / viewportWidth).round();
});
// which "viewportWidth" is the width of your page item.

或者如果您想动画到特定页面，请执行以下操作：

int page = 3;
controller.animateTo(
  page.toDouble() * viewportWidth,
  duration: Duration(milliseconds: 300),
  curve: Curves.ease,
);

Answer 2

PageView 有 padEnds 属性，如果将其设置为 false 和 viewPortWidth < 1, then you will see your cards pushed to the left side.

请参阅下面的代码和结果：

child: PageView(
        padEnds: false,
        controller: PageController(viewportFraction: 0.95),
        children: widget.cards
            .map((e) => Padding(
                padding: const EdgeInsets.only(right: 16.0), child: e))
            .toList(),
      ),