如何在 Flutter 页面中创建双向滑动？

Question

我很想知道如何制作一个

PageView

小部件可以同时向两个方向滑动，就像我们在 TikTok 应用程序中看到的那样，您可以垂直滑动视频以更改它们，然后您也可以滑动到向右或向左查看用户的个人资料等

实现这个的最佳方法是什么？

Answer 1

要实现可在两个方向上滑动的 PageView 小部件，您可以将 scrollDirection 属性设置为 Axis.vertical 以进行垂直滑动，并使用监听水平滑动的 GestureDetector 包裹 PageView。 这是一个例子：

class MyPageView extends StatefulWidget {
  @override
  _MyPageViewState createState() => _MyPageViewState();
}

class _MyPageViewState extends State<MyPageView> {
  PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onHorizontalDragUpdate: (details) {
        _pageController.position.drag(details, () {});
      },
      child: PageView(
        controller: _pageController,
        scrollDirection: Axis.vertical,
        children: [
          // Your pages
        ],
      ),
    );
  }
}

在这个例子中，我们创建一个PageController来管理PageView的页面。然后我们用 GestureDetector 包裹 PageView，它侦听水平拖动更新并将它们传递给 PageController 的拖动方法。这允许用户水平滑动以导航到其他页面。

通过将 scrollDirection 设置为 Axis.vertical，我们使 PageView 可以垂直滑动。

您可以进一步自定义此实现以实现您需要的确切行为，例如添加动画或限制水平滑动的滑动区域。