как сделать вертикальный скролл в TabBarView?
в каждом TabBar есть свой список который показывает в TabBarView, так вот как сделать так чтобы в конце списка первого TabBar был переход в следующий TabBar и TabBarView?
Ответы (1 шт):
Автор решения: Дмитрий Окладной
→ Ссылка
Думаю это вам поможет:
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyAppBar(),
);
}
}
final indexLenght = 100;
class MyAppBar extends StatefulWidget {
@override
_MyAppBarState createState() => _MyAppBarState();
}
// !!! К классу с [TabBarView] и [TabBar] обязательно незабываем добавить миксин [TickerProviderStateMixin] с помощью ключевого слова: [with]
class _MyAppBarState extends State<MyAppBar> with TickerProviderStateMixin {
int _currentTabPosition = 0;
List<Tab> myTabs;
List<Widget> myList1;
List<Widget> myList2;
List<Widget> myList3;
List<Widget> myList;
// Создаем контроллер чтобы отслеживать положение скроллинга в [ListView] и вовремя реагировать при пролистывании до конца списка
ScrollController controllerListView = ScrollController();
// Создаем контроллер чтобы переключать наши [TabBarView] и [TabBar] при пролистывании до конца списка
TabController controllerTabController;
@override
void initState() {
// Условное наполнение вашего [TabBarView] и [TabBar] с использованием [DefaultTabController], чтобы "связать" их вместе
myTabs = <Tab>[
Tab(text: 'один'),
Tab(text: 'два'),
Tab(text: 'три'),
];
myList1 = List.generate(
indexLenght,
(index) => Container(
color: Color(0xff000000 + math.Random().nextInt(0xffffff)),
child: Text('Таб N1 $index'),
));
myList2 = List.generate(
indexLenght,
(index) => Container(
color: Color(0xff000000 + math.Random().nextInt(0xffffff)),
child: Text('Таб N2 $index'),
));
myList3 = List.generate(
indexLenght,
(index) => Container(
color: Color(0xff000000 + math.Random().nextInt(0xffffff)),
child: Text('Таб N3 $index'),
));
myList = <Widget>[
ListView(
// Использование контролера для отслеживания позиции скроллинга
controller: controllerListView,
children: myList1,
),
ListView(
// Использование контролера для отслеживания позиции скроллинга
controller: controllerListView,
children: myList2,
),
ListView(
// Использование контролера для отслеживания позиции скроллинга
controller: controllerListView,
children: myList3,
),
];
// Инициализируем контроллер чтобы переключать наши [TabBarView] и [TabBar] при пролистывании до конца списка
controllerTabController = TabController(length: myTabs.length, vsync: this);
// Создаем слушатель скрол-контроллера, чтобы отследить когда мы достигнем конца списка
controllerListView.addListener(() {
//Получаем положение скрола при достижении конца списка.
double _maxPosition = controllerListView.position.maxScrollExtent;
// Получаем текущее положение скроллинга
double _currentPosition = controllerListView.offset;
// Условие когда мы достигли конца списка
if (_maxPosition == _currentPosition) {
// Получаем номер следующего [TabBarView] и [TabBar]
int _nextPosition = ++_currentTabPosition % myTabs.length;
// перемещаемся в следующий [TabBarView] и [TabBar]
controllerTabController.animateTo(_nextPosition);
// переводим скрол-положение [TabBarView] в начало.
controllerListView.jumpTo(0.0);
}
});
super.initState();
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: myTabs.length,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
// Использование контролера для переключения между Табами
controller: controllerTabController,
tabs: myTabs.map((Tab tab) {
final String label = tab.text.toLowerCase();
return Center(
child: Text(
'Таб номер: $label',
style: const TextStyle(fontSize: 20),
),
);
}).toList(),
),
),
body: TabBarView(
// Использование контролера для переключения между Табами
controller: controllerTabController,
children: myList,
),
),
);
}
}

