Flutter PageView animatedToPage 将加载中间页面.如何避免

发布于08月22日

我有一个页面视图，我想以编程方式滚动页面视图，因此我有两个 Select :

使用animateToPage
使用jumpToPage

现在，我需要平滑过渡效果，所以我必须使用First API.但是，我有一个问题:当我从第一页滚动到最后一页时，animateToPage将加载不需要显示的中间页.(JumpToPage没有这个问题，但我需要动画).

如何避免呢？

我们可以通过

将最后一个页面小工具交换到当前页面的下一个位置
动画转到下一页
跳转到真实的最后一页索引
将交换的索引刷新为其先前的值

在这个例子中，我使用了fixed PageView children count, which is 8.

演示

个

比较

Combine to 8th page Button个

按照CopsOnRoad的建议，此按钮将触发Scroll animation至最后一页(在本例中为第8页).首先，我们 JumpToPage(6)，然后是AnimateToPage(7，..).

这种方法有效，but adversely, user will notice sudden change of current page to 7th page.

Flash Jump to 8th page Button个

与第一种方法不同，此按钮将避免不必要地显示第七页

语法解释

this is the main function个

void flashToEight() async {
  int pageCurrent = pageController.page.round();
  int pageTarget = 7;
  if (pageCurrent == pageTarget){
    return;
  }
  swapChildren(pageCurrent, pageTarget); // Step # 1
  await quickJump(pageCurrent, pageTarget); // Step # 2 and # 3
  WidgetsBinding.instance.addPostFrameCallback(refreshChildren); // Step # 4
}

detailed look个

// Step # 1
void swapChildren(int pageCurrent, int pageTarget) {
  List<Widget> newVisiblePageViews = [];
  newVisiblePageViews.addAll(pageViews);

  if (pageTarget > pageCurrent) {
    newVisiblePageViews[pageCurrent + 1] = visiblePageViews[pageTarget];
  } else if (pageTarget < pageCurrent) {
    newVisiblePageViews[pageCurrent - 1] = visiblePageViews[pageTarget];
  }

  setState(() {
    visiblePageViews = newVisiblePageViews;
  });
}

// Step # 2 and # 3
Future quickJump(int pageCurrent, int pageTarget) async {
  int quickJumpTarget;

  if (pageTarget > pageCurrent) {
    quickJumpTarget = pageCurrent + 1;
  } else if (pageTarget < pageCurrent) {
    quickJumpTarget = pageCurrent - 1;
  }
  await pageController.animateToPage(
    quickJumpTarget,
    curve: Curves.easeIn,
    duration: Duration(seconds: 1),
  );
  pageController.jumpToPage(pageTarget);
}

// Step # 4
List<Widget> createPageContents() {
    return <Widget>[
      PageContent(1),
      PageContent(2),
      PageContent(3),
      PageContent(4),
      PageContent(5),
      PageContent(6),
      PageContent(7),
      PageContent(8),
    ];
  }

void refreshChildren(Duration duration) {
  setState(() {
    visiblePageViews = createPageContents();
  });
}