在 Flutter 中创建双向 PageView 滚动？

Posted 2023-02-23

【中文标题】在 Flutter 中创建双向 PageView 滚动？

【英文标题】：Creating bidirectional PageView scrolling in Flutter?

【发布时间】：2018-12-18 15:50:57

【问题描述】：

您将如何在 Flutter 中实现双向页面滚动功能？给定 Scaffold 中的多个 PageViews 似乎不起作用，嵌套的 PageViews 也不起作用。我的感觉是 NestedScrollView 可能会提供一个解决方案，但我正在努力找出实现。

【问题讨论】：

试试这个包pub.dartlang.org/packages/bidirectional_scroll_view或查看它的源代码。

@RolandoUrquiza 那个包对我来说看起来相当弱，即 unidiomatic。

youtube.com/watch?v=sWkysCKh2uY Flutter Challenge: Card Flip Carousel，作者 Fluttery 于 2018 年 5 月 31 日发布。 github.com/matthew-carroll/flutter_ui_challenge_flip_carousel Matthew 有一些非常棒的东西。查看他的 github 存储库。您可以轻松分析他的代码以了解发生了什么。

【参考方案1】：

多方向页面浏览：

您可能会为此创建某种诡计，即将页面数量设置为 2000，然后将初始页面设置为 1000。因此创建一个具有 1000 +/- 左右滚动的 PageView？

小部件：

@override
  Widget build(BuildContext context) 

    Future<void>.delayed(Duration.zero, () => _diaryBloc.buildComplete());

    return Container(
      height: MediaQuery.of(context).size.height,
      child: PageView.builder(
        controller: _diaryBloc.pageController,
        itemBuilder: (BuildContext context, int position) 
          return _buildPage(_diaryBloc.getDateFromPosition(position));
        ,
        itemCount: 2000,
      ),
    );
  

BLoC 或其他控制器

  final PageController pageController = PageController();
  final int initialPage = 1000;

  Future<void> buildComplete() async 
    pageController.jumpToPage(initialPage);
  

  DateTime getDateFromPosition(int position) 
    if (position < 0) 
      return currentDateTime.subtract(Duration(days: position - initialPage));
     else 
      return currentDateTime.add(Duration(days: position - initialPage));
    
  

可能不是最理想的，但非常简单，似乎效果很好。