Flutter扩展标签管理插件extended_tabs的使用

extended_tabs 是一个强大的官方Tab/TabBar/TabView扩展库，它支持在当前Tab滚动超出范围时滚动祖先或子Tab，并且可以设置滚动方向和缓存程度。本文将详细介绍其使用方法并提供完整的示例代码。

一、添加依赖

首先，在pubspec.yaml文件中添加extended_tabs依赖：

dependencies:
  flutter:
    sdk: flutter
  extended_tabs: any

然后执行flutter pub get命令以安装该包。

二、主要功能及用法

1. CarouselIndicator

展示轮播样式指示器。

CarouselIndicator(
  controller: _controller,
  selectedColor: Colors.white,
  unselectedColor: Colors.grey,
  strokeCap: StrokeCap.round,
  indicatorPadding: const EdgeInsets.all(5),
),

2. ColorTabIndicator

显示带有颜色填充的指示器。

TabBar(
  indicator: ColorTabIndicator(Colors.blue),
  labelColor: Colors.black,
  tabs: [
    Tab(text: "Tab0"),
    Tab(text: "Tab1"),
  ],
  controller: tabController,
)

3. Link

当设置为true且当前TabBarView滚动超出范围时，会检查并滚动父级或子级TabBarView，默认值为true。

ExtendedTabBarView(
  children: <Widget>[
    List("Tab000"),
    List("Tab001"),
    List("Tab002"),
    List("Tab003"),
  ],
  controller: tabController2,
  link: true,
)

4. ScrollDirection

设置TabBar和TabView滚动的方向，默认为水平方向（Axis.horizontal）。

Row(
  children: <Widget>[
    ExtendedTabBar(
      indicator: const ColorTabIndicator(Colors.blue),
      labelColor: Colors.black,
      scrollDirection: Axis.vertical,
      tabs: const <ExtendedTab>[
        ExtendedTab(
          text: 'Tab0',
          scrollDirection: Axis.vertical,
        ),
        ExtendedTab(
          text: 'Tab1',
          scrollDirection: Axis.vertical,
        ),
      ],
      controller: tabController,
    ),
    Expanded(
      child: ExtendedTabBarView(
        children: <Widget>[
          const ListWidget(
            'Tab1',
            scrollDirection: Axis.horizontal,
          ),
          const ListWidget(
            'Tab1',
            scrollDirection: Axis.horizontal,
          ),
        ],
        controller: tabController,
        scrollDirection: Axis.vertical,
      ),
    )
  ],
)

5. CacheExtent

设置缓存页面数量，默认为0；如果设置为1，则表示有两个页面被缓存。

ExtendedTabBarView(
  children: <Widget>[
    List("Tab000"),
    List("Tab001"),
    List("Tab002"),
    List("Tab003"),
  ],
  controller: tabController2,
  link: true,
  cacheExtent: 1,
)

6. ShouldIgnorePointerWhenScrolling

是否忽略滚动期间的指针事件，默认为true。如果设置为false，子组件可以在滚动过程中接收点击等交互事件。

ExtendedTabBarView(
  children: <Widget>[
    List("Tab000"),
    List("Tab001"),
    List("Tab002"),
    List("Tab003"),
  ],
  controller: tabController2,
  shouldIgnorePointerWhenScrolling: false,
  cacheExtent: 1,
)

三、完整示例代码

下面是一个完整的Flutter应用示例，演示了如何使用extended_tabs创建一个多Tab页面布局的应用程序。

import 'package:flutter/material.dart';
import 'package:extended_tabs/extended_tabs.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Extended Tabs Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Extended Tabs Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(48.0),
          child: ExtendedTabBar(
            controller: _tabController,
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
              Tab(text: 'Tab 3'),
            ],
            scrollDirection: Axis.horizontal,
            indicator: ColorTabIndicator(Colors.redAccent),
            labelColor: Colors.white,
            unselectedLabelColor: Colors.grey,
          ),
        ),
      ),
      body: ExtendedTabBarView(
        controller: _tabController,
        children: [
          Center(child: Text('Content of Tab 1')),
          Center(child: Text('Content of Tab 2')),
          Center(child: Text('Content of Tab 3')),
        ],
        scrollDirection: Axis.horizontal,
        cacheExtent: 1,
        shouldIgnorePointerWhenScrolling: false,
      ),
    );
  }
}

以上代码实现了一个简单的多Tab页面布局，每个Tab都有自己的内容区域，并且通过ExtendedTabBar和ExtendedTabBarView来管理和展示这些Tab。同时，还展示了如何配置滚动方向、缓存程度以及是否忽略滚动期间的指针事件等功能。希望这个例子能帮助你更好地理解和使用extended_tabs插件。