viewportFraction < 1.0 的 PageView 的非中心对齐

Question

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

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

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

乍一看这似乎有效（见第一张图片），但无法呈现下一页，因为如果不进行转换它会被隐藏（见第二张图片）：

我想过将 ListView 与 PageScrollPhysics 一起使用（它确实表现正确），但后来我失去了分页 API（能够查看我 on/jump 到哪个页面）。以始终在屏幕上呈现下一页的方式执行此操作的合适方法是什么？

Answer 1

我实际上正在尝试实现类似的东西，我确实在这里问了一个问题：Is there a way to disable PageView clipping effect?

但是多亏了你，你想用 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,
);

viewportFraction < 1.0 的 PageView 的非中心对齐

Non-center alignment for PageView with viewportFraction < 1.0

flutter

flutter-layout