ViewportFraction < 1.0 的 PageView 非居中对齐

Question

当您为 PageController 创建一个 viewportFraction 值为 <1.0 的 PageView 时，页面会对齐到视口的中心，如下所示：

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

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

乍一看，这似乎有效（请参阅第一张图片），但无法在没有转换的情况下隐藏下一页时呈现下一页（请参阅第二张图片）：

我想过使用带有 PageScrollPhysics 的 ListView（它的行为正确），但后来我失去了分页 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,
);