Как пропустить страницу при пролистывании при использовании Flutter PageView

У меня есть недельный обзор с ежедневными упражнениями, записанными, как показано во вложении. Дни, выделенные красным, отключены. Когда я пролистываю страницу, ей нужно пропустить отключенную вкладку и перейти непосредственно к следующей активной вкладке. Например, если я в воскресенье и смахиваю, он должен перейти во вторник, пропуская понедельник, и наоборот (если я смахиваю назад со вторника, он должен перейти в понедельник). Кроме того, щелчок по активированным дням должен привести меня на соответствующую страницу.

Я создал страницы внутри pageview.builder. Когда я пролистываю страницу, вызывается itemBuilder из PageView, и страницы меняются на основе индекса, и индекс увеличивается автоматически. Не знаю, как пропустить отключенные экраны. Пожалуйста помоги.

Вот мой код:

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

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

Чтобы перейти на конкретную страницу при инициализации, используйте .initPage собственность в PageController.

Другие вопросы по тегам