Как пропустить страницу при пролистывании при использовании 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
.