使用flutter PageView时如何在滑动时跳过页面答案

【问题标题】：How to skip a page while swiping while using flutter PageView使用flutter PageView时如何在滑动时跳过页面
【发布时间】：2020-07-05 14:29:58
【问题描述】：

我有一个周视图，其中记录了每日锻炼，如附件所示。红色的日子被禁用。当我滑动页面时，它需要跳过禁用的选项卡并直接转到下一个活动选项卡。例如如果我在星期天滑动，它应该去星期二跳过星期一，反之亦然（如果我从星期二向后滑动，它应该去星期一）。此外，单击启用天数应该会将我带到相应的页面。

在 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,
                      );
                    },
                  ),
                ),)
                         )]
            )

【问题讨论】：

标签： flutter swipe flutter-pageview

【解决方案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);
            }
          }
          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,
      ),
    );
  }
}

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

【讨论】：