有没有什么可能的方法可以像 Flutter Pageview 中的 Instagram 故事一样在右侧添加点击以前进并在左侧点击以向后移动？

Question

问题的预期实现类似于Instagram故事。在 flutter 中存在一个名为 story_view 的包，它的作用相同，但根据我的理解，不可能将 Pageview 添加为子项。那么，有什么方法可以在 flutter 中实现吗？

Answer 1

您可以在页面视图中使用 GestureDetector 和 PageController 来实现此目的。其中GestureDetector用于获取屏幕被点击的位置，并根据该位置调用页面控制器前进或后退。

用 GestureDetector 包裹 PageView(controller: _pageController,...) 然后定义 onTapDown 如下所示：


GestureDetector(
  onTapDown: (TapDownDetails details) {
    final RenderBox box = context.findRenderObject();
    final localOffset = box.globalToLocal(details.globalPosition);
    final x = localOffset.dx;

    // if x is less than halfway across the screen and user is not on first page 
    if(x < box.size.width / 2){
      //   _pageController.previousPage(...)
    }else{
      // Assume the user tapped on the other half of the screen and check they are not on the last page
      //  _pageController.nextPage(...)
    }

  },
  child: PageView(
    controller: _pageController,
    ...
  )
)

如您所见，我还没有完全实施解决方案，但这应该是您想要的

有没有什么可能的方法可以像 Flutter Pageview 中的 Instagram 故事一样在右侧添加点击以前进并在左侧点击以向后移动？

Is there any possible way to add a tap on right to go forward and tap on left to go backward like Instagram stories in flutter Pageview?

pageviews

gesturedetector

dart

flutter

flutter-pageview