Flutter垂直滚动标签页插件vertical_scrollable_tabview的使用

vertical_scrollable_tabview 是一个Flutter插件，它允许创建一个自定义的标签视图，并使其与内部的ScrollView同步。当用户滚动时，顶部的自定义标签视图会根据内层滚动视图的位置自动更新。

安装

在您的pubspec.yaml文件中添加依赖：

dependencies:
  vertical_scrollable_tabview: ^1.0.0
  scroll_to_index: ^2.0.0

确保您使用的是最新版本。

使用方法

VerticalScrollableTabView

为了使用这个组件，您需要实现TabController和AutoScrollController。以下是关键参数的解释：

• autoScrollController: 滚动条和CustomScrollView的控制器。
• tabController: Tab的控制器，通常用于管理TabBar的状态。
• listItemData: 必须是List<dynamic>类型的数据列表。
• eachItemChild: 列表项的子组件，接收两个参数：数据对象和索引。
• verticalScrollPosition: 初始位置。
• TabBar: 必须放置在SliverAppBar的底部。

此外，该组件还支持从Scrollbar和CustomScrollView复制的多个参数，如scrollbarThumbVisibility, scrollDirection, reverse等，以提供更灵活的配置选项。

示例代码

下面是一个完整的示例demo，展示了如何使用VerticalScrollableTabView来创建一个带有可滚动标签栏的应用界面。

import 'package:flutter/material.dart';
import 'package:vertical_scrollable_tabview/vertical_scrollable_tabview.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

// 假设CategorySection和ExampleData是已经定义好的类或函数
import 'category_section.dart'; // 自定义的分类部分组件
import 'example_data.dart';     // 示例数据源

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vertical Scrollable TabView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Vertical Scrollable TabView Plugin'),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  final List<Category> data = ExampleData.data;

  late TabController tabController;
  late AutoScrollController autoScrollController;

  @override
  void initState() {
    tabController = TabController(length: data.length, vsync: this);
    autoScrollController = AutoScrollController();
    super.initState();
  }

  @override
  void dispose() {
    tabController.dispose();
    autoScrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: VerticalScrollableTabView(
        autoScrollController: autoScrollController,
        scrollbarThumbVisibility: false,
        tabController: tabController,
        listItemData: data,
        verticalScrollPosition: VerticalScrollPosition.begin,
        eachItemChild: (object, index) =>
            CategorySection(category: object as Category),
        slivers: [
          SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: const FlexibleSpaceBar(
              title: Text("SliverAppBar"),
              titlePadding: EdgeInsets.only(bottom: 50),
              collapseMode: CollapseMode.pin,
              background: FlutterLogo(),
            ),
            bottom: TabBar(
              isScrollable: true,
              controller: tabController,
              indicatorPadding: const EdgeInsets.symmetric(horizontal: 16.0),
              indicatorColor: Colors.cyan,
              labelColor: Colors.cyan,
              unselectedLabelColor: Colors.white,
              indicatorWeight: 3.0,
              tabs: data.map((e) {
                return Tab(text: e.title);
              }).toList(),
              onTap: (index) {
                VerticalScrollableTabBarStatus.setIndex(index);
              },
            ),
          ),
        ],
      ),
    );
  }
}

请注意，为了使上述代码正常工作，您还需要定义CategorySection和ExampleData这两个辅助类或函数。它们分别用于显示每个类别的内容以及提供初始数据集。

以上就是关于vertical_scrollable_tabview插件的基本介绍及使用方式。希望这对您有所帮助！如果您有任何问题或者需要进一步的帮助，请随时提问。