可滚动标签视图

这个 Flutter 包提供了一个垂直可滚动的标签栏小部件，允许您显示可调整大小的标签。

演示

gif

安装

将此添加到您的 pubspec.yaml 文件中

dependencies:
  scrollable_tab_view: <latest-version>

安装

在您的Dart文件中导入包

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 小部件允许您使用 TabController 创建一个带有可滚动标签的标签栏。

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)),
                  ),
                ),
              )),
    )
  ],
),

GitHub

查看 Github