flutter - viewportFraction <1.0的PageView的非中心对齐

当您创建PageController的viewportFraction值小于1.0的PageView时，页面将被捕捉到视口(viewport)的中心，如下所示:



我希望将当前页面捕捉到视口(viewport)的顶部，而将下一页呈现在底部栏的下方。我尝试将转换应用于每个页面:

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

乍一看似乎起作用(请参见第一张图片)，但是如果不进行转换就将其隐藏，则无法渲染下一页(请参见第二张图片):




我曾考虑过将ListView与PageScrollPhysics一起使用(它的行为确实正确)，但是随后我失去了分页API(查看我在哪个页面上/跳转到页面上的能力)。以始终在屏幕上呈现下一页的方式执行此操作的合适方法是什么？

最佳答案

我实际上是在尝试实现类似的目标，但我确实在这里提出了一个问题: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,
);

关于flutter - viewportFraction <1.0的PageView的非中心对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53948087/