Flutter可滚动标签页插件scrollable_tab_view的使用

简介

scrollable_tab_view 是一个Flutter包，它提供了一个垂直可滚动的标签栏组件，允许您显示可调整大小的标签。该组件使得在Flutter应用中实现类似标签页的界面变得简单。

版本与许可

• pub package
• 许可证：MIT

安装

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

dependencies:
  scrollable_tab_view: ^latest-version

2. 导入包：

import 'package:scrollable_tab_view/scrollable_tab_view.dart';

使用方法

不使用控制器的ScrollableTab

这是一个简单的例子，展示了如何创建一个不带控制器的可滚动标签页。

ScrollableTab(
  labelColor: Colors.black,
  tabs: List.generate(
      5,
      (index) => Tab(
            text: 'index $index',
          )),
  children: List.generate(
      5,
      (index) => ListTile(
            title: Center(
              child: Text(
                'tab Number $index',
                style: Theme.of(context).textTheme.labelLarge!.copyWith(fontSize: 20.0 + (30 * index)),
              ),
            ),
          )),
),

使用控制器的ScrollableTabBar和ScrollableTabViewWithController

如果需要更复杂的控制，比如手动切换标签或与其他部件同步，则可以使用带有控制器的方式。

Column(
  children: [
    ScrollableTabBar(
      labelColor: Colors.black,
      controller: controller,
      tabs: List.generate(
          5,
          (index) => Tab(
                text: 'index $index',
              )),
    ),
    ScrollableTabViewWithController(
      controller: controller,
      children: List.generate(
          5,
          (index) => ListTile(
                title: Center(
                  child: Text(
                    'tab Number $index',
                    style: Theme.of(context).textTheme.labelLarge!.copyWith(fontSize: 20.0 + (30 * index)),
                  ),
                ),
              )),
    )
  ],
),

完整示例代码

下面是一个完整的示例应用程序，演示了如何使用scrollable_tab_view插件。

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late TabController controller;

  @override
  void initState() {
    // 初始化TabController
    controller = TabController(length: 5, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    // 释放资源
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Scrollable Tab View'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              // 滚动标签页
              const TitleWidget(title: 'ScrollableTab widget'),
              ScrollableTab(
                labelColor: Colors.black,
                onTap: (value) {
                  if (kDebugMode) {
                    print('index $value');
                  }
                },
                tabs: List.generate(5, (index) => Tab(text: 'index $index')),
                children: List.generate(
                    5,
                    (index) => ListTile(
                          title: Center(
                            child: Text(
                              'tab Number $index',
                              style: Theme.of(context).textTheme.labelLarge!.copyWith(fontSize: 20.0 + (30 * index)),
                            ),
                          ),
                        )),
              ),
              // 带有控制器的滚动标签栏
              const TitleWidget(title: 'ScrollableTabBar'),
              ScrollableTabBar(
                labelColor: Colors.black,
                controller: controller,
                tabs: List.generate(5, (index) => Tab(text: 'index $index')),
              ),
              ScrollableTabViewWithController(
                controller: controller,
                children: List.generate(
                    5,
                    (index) => ListTile(
                          title: Center(
                            child: Text(
                              'tab Number $index',
                              style: Theme.of(context).textTheme.labelLarge!.copyWith(fontSize: 20.0 + (30 * index)),
                            ),
                          ),
                        )),
              )
            ],
          ),
        ),
      ),
    );
  }
}

// 标题组件
class TitleWidget extends StatelessWidget {
  final String title;
  const TitleWidget({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Text(
          title,
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
    );
  }
}

这个例子包括两个部分：一个是直接使用ScrollableTab，另一个是结合ScrollableTabBar和ScrollableTabViewWithController来展示更复杂的用法。希望这可以帮助您更好地理解和使用scrollable_tab_view插件。