как сделать вертикальный скролл в 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,
        ),
      ),
    );
  }
}
→ Ссылка