В Flutter виджет Sliver TabBar предоставляет элегантный способ реализовать навигацию с вкладками в прокручиваемом представлении. Он позволяет пользователям переключаться между различными разделами контента простым пролистыванием или касанием. В этой статье мы рассмотрим различные методы реализации и настройки панели вкладок Sliver, а также приведем примеры кода, которые помогут вам начать работу.

Метод 1: использование DefaultTabController
Один из самых простых способов реализации Sliver TabBar — использование виджета DefaultTabController. Вот пример:

DefaultTabController(
  length: 3, // Number of tabs
  child: Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          title: Text('Sliver TabBar Example'),
          // Other SliverAppBar properties
          // ...
        ),
        SliverPersistentHeader(
          delegate: _SliverAppBarDelegate(
            TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          // Other SliverPersistentHeader properties
          // ...
        ),
        SliverFillRemaining(
          child: TabBarView(
            children: [
              // Contents of Tab 1
              // ...
              // Contents of Tab 2
              // ...
              // Contents of Tab 3
              // ...
            ],
          ),
        ),
      ],
    ),
  ),
)

Метод 2: создание пользовательского SliverPersistentHeader
Если вам нужен больший контроль над внешним видом и поведением Sliver TabBar, вы можете создать собственный SliverPersistentHeader. Вот пример:

class CustomSliverPersistentHeader extends SliverPersistentHeaderDelegate {
  final TabBar tabBar;
  CustomSliverPersistentHeader(this.tabBar);
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.white,
      child: tabBar,
    );
  }
  @override
  double get maxExtent => tabBar.preferredSize.height;
  @override
  double get minExtent => tabBar.preferredSize.height;
  @override
  bool shouldRebuild(CustomSliverPersistentHeader oldDelegate) {
    return tabBar != oldDelegate.tabBar;
  }
}
// Usage:
CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('Sliver TabBar Example'),
      // Other SliverAppBar properties
      // ...
    ),
    SliverPersistentHeader(
      delegate: CustomSliverPersistentHeader(
        TabBar(
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
      ),
      // Other SliverPersistentHeader properties
      // ...
    ),
    SliverFillRemaining(
      child: TabBarView(
        children: [
          // Contents of Tab 1
          // ...
          // Contents of Tab 2
          // ...
          // Contents of Tab 3
          // ...
        ],
      ),
    ),
  ],
)

Метод 3: динамическое создание вкладок
В некоторых случаях может потребоваться динамическое создание вкладок на основе данных или пользовательского ввода. Вот пример того, как этого добиться:

List<String> tabTitles = ['Tab 1', 'Tab 2', 'Tab 3'];
DefaultTabController(
  length: tabTitles.length,
  child: Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          title: Text('Sliver TabBar Example'),
          // Other SliverAppBar properties
          // ...
        ),
        SliverPersistentHeader(
          delegate: _SliverAppBarDelegate(
            TabBar(
              tabs: tabTitles.map((title) => Tab(text: title)).toList(),
            ),
          ),
          // Other SliverPersistentHeader properties
          // ...
        ),
        SliverFillRemaining(
          child: TabBarView(
            children: tabTitles.map((title) => Container(
              child: Center(child: Text(title)),
            )).toList(),
          ),
        ),
      ],
    ),
  ),
)

В этой статье мы рассмотрели различные методы реализации и настройки Sliver TabBar во Flutter. Мы рассмотрели использование DefaultTabController, создание пользовательского SliverPersistentHeader и генерацию динамических вкладок. Используя эти методы и экспериментируя с различными вариантами настройки, вы можете создавать визуально привлекательные и интерактивные интерфейсы навигации с вкладками в своих приложениях Flutter.

Не забудьте оптимизировать производительность и удобство использования вашего приложения Flutter, эффективно используя виджет Sliver TabBar. Приятного кодирования!