如何在使用Fluff PageView时在滑动时跳过页面

Question

我有一个每周观察的日志，记录了附件中所示的日常锻炼。红色的日子被禁用。当我滑动页面时，它需要跳过禁用的选项卡，直接进入下一个活动的选项卡。例如如果我在星期天刷卡，则应跳过星期一，到星期二，反之亦然（如果我从星期二向后刷卡，则应该到星期一）。另外，单击启用的日期可以带我进入相应的页面。

在pageview.builder内部，我构建了页面。当我滑动页面时，将调用PageView的itemBuilder，并且页面会根据索引进行更改，并且索引会自动递增。我不确定如何跳过禁用的屏幕。请帮助。

这是我的代码：

Stack(
          children: <Widget>[
            new PageView.builder(
              controller: _controller,
              itemBuilder: (BuildContext context, int index) {
              return   Container(
                padding: EdgeInsets.only(top:50.0),
                child: ListView(
              children: <Widget>[
               Text('Trying out')
              ],
            ));
              },
            ),
            new Positioned(
              top: 0.0,
              left: 0.0,
              right: 0.0,
              child: Center(
                  child: new DotsIndicator(
                    controller: _controller,
                    itemCount: 7,
                    onPageSelected: (int page) {
                      _controller.animateToPage(
                        page,
                        duration: _kDuration,
                        curve: _kCurve,
                      );
                    },
                  ),
                ),)
                         )]
            )

Answer 1

这里是一个可能的解决方案，其中页面仍在其中，但它会自动在页面上滑动。 （要显示已禁用，页面标题将设置为灰色）。

我使用了页面控制器和onPageChanged属性。在完全执行页面滑动后，总是调用此属性。然后，使用方法.nextPage和.previousPage，它会自动在页面上滑动，具体取决于滑动方向以及页面是否被禁用（在列表disabledPages中定义）

为了区分滑动方向，上次浏览的页面索引存储在变量previousPageViewIndex中

class PageViewDemo extends StatefulWidget {
  @override
  _PageViewDemoState createState() => _PageViewDemoState();
}

class _PageViewDemoState extends State<PageViewDemo> {
  int _index = 0;

  List<Color> myColors = [
    Colors.blue,
    Colors.greenAccent,
    Colors.green,
    Colors.grey,
    Colors.deepPurpleAccent,
    Colors.deepOrangeAccent,
    Colors.pink,
    Colors.amber,
    Colors.cyanAccent,
    Colors.teal
  ];

  PageController pageController = PageController();
  int previousPageViewIndex = 0;

  // here are the current pages which should be disabled
  List<int> disabledPages = [2, 6, 7];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        onPageChanged: (index) {
          if(disabledPages.contains(index)) {           // check if current page is disabled
            if(index > previousPageViewIndex) {         // swipe right
              pageController.nextPage(duration: Duration(milliseconds: 800), curve: Curves.ease);
            } else if(index < previousPageViewIndex) {  // swipe left
              pageController.previousPage(duration: Duration(milliseconds: 800), curve: Curves.ease);
            } else {
              print('shit');
            }
          }
          previousPageViewIndex = index;
        },
        controller: pageController,
        itemBuilder: (context, index) {
          return Container(
            color: myColors[index],
            alignment: Alignment.center,
            child: Text('Page $index', style: TextStyle(fontSize: 28, color: disabledPages.contains(index) ? Colors.grey[500] : null)),
          );
        },
        itemCount: 10,
      ),
    );
  }
}

要在初始化时进入特定页面，请使用.initPage中的PageController属性。