Как пропустить страницу при перелистывании при использовании флаттера PageView - PullRequest
Новая
       8

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

0 голосов
/ 25 марта 2020

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

Внутри 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 Ответ

0 голосов
/ 25 марта 2020

Вот возможное решение, где страницы все еще находятся на пороге, но они автоматически пролистывают их. (Для отображения отключенных заголовок страницы становится серым).

Я использовал контроллер страницы и свойство 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,
      ),
    );
  }
}

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

...