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

e4eetjau  于 2023-05-08  发布在  Flutter
关注(0)|答案(1)|浏览(145)

我很想知道如何使PageView小部件能够同时向两个方向滑动,就像我们在TikTok应用程序中看到的那样,您可以垂直滑动视频以更改它们,然后您还可以向右或向左滑动以查看用户的个人资料等。
实现这一点的最佳方式是什么?

8yoxcaq7

8yoxcaq71#

要实现一个可以在两个方向上滑动的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 Package PageView,GestureDetector监听水平拖动更新并将其传递给PageController的拖动方法。这允许用户水平滑动以导航到其他页面。
通过将scrollDirection设置为Axis.vertical,我们使PageView可以垂直滑动。
您可以进一步自定义此实现以实现所需的确切行为,例如添加动画或限制水平滑动的滑动区域。

相关问题