如何在 Flutter 中使用 BottomNavigationBar 滚动动画跳过中间的页面来进行 PageView 页面导航

Question

我正在使用

PageView

和

BottomNavigationBar

来浏览我的应用程序。 我喜欢滚动或导航到不同页面时页面之间的滚动动画/过渡。 但问题是，当我使用

BottomNavigationBar

导航“远距离”（例如，从第 1 页导航到第 5 页）时，它必须非常快速地滚动 2-4 页，从而导致看似缓慢且不吸引人的快速滚动动画.

有没有办法让它无论我从哪个页面导航（使用

BottomNavigationBar

），它只向右滚动到该页面，跳过之间的任何页面，从而导致页面动画之间的单个滚动？

我抬头一看，发现最接近的是

PageController.jumpToPage()

，但它根本不做任何我想要的动画。

Answer 1

您可以使用 TabBarView() 而不是 PageView()。您的选项卡栏视图将有一个 TabController，它带有 animateTo() 方法，用于为任何选项卡设置动画。

tabController = TabController(length: _children.length, vsync: this);
tabController.animateTo(index)

其中index是您想要为其设置动画的选项卡的索引。

确保在您的视图/屏幕上使用

SingleTickerProviderStateMixin

。

tabController 是在 init 状态下创建的，并且 animateTo() 方法被称为

onTap

的

BottomNavigationBar

。

Answer 2

使用

PageController.animateToPage()

方法代替

PageController.jumpToPage()

并结合设置持续时间参数。这将允许您通过平滑的滚动动画导航到所需的页面。