scrollable_list_tab_scroller

一个可定制的Flutter小部件，可将ScrollView与PageView同步作为选项卡。

创建自定义页面视图作为选项卡，并与内部ScrollView同步。页面视图跟随滚动视图的索引，反之亦然。

Demo

安装

在pubspec.yaml文件中为包添加依赖项

dependencies:
    scrollable_list_tab_scroller: <latest>

用法

要使用此小部件，我们必须首先定义我们的选项卡外观。

ScrollableListTabScroller

参数 定义
int itemCount 将构建的项目数量。
IndexedWidgetBuilder itemBuilder 列表项的构建器。
IndexedActiveStatusWidgetBuilder tabBuilder 带有活动状态的选项卡构建器，用于自定义。
HeaderBuilder? headerBuilder 用于自定义的可选头部构建器。
ItemScrollController? itemScrollController 项目列表的可选控制器。
PageController? tabPageController 选项卡的可选控制器。
ItemPositionsListener? itemPositionsListener 项目列表位置的可选监听器。
void Function(int)? tabChanged 选项卡更改的可选监听器。
double minEdgeBeforeChangeTab 在列表项到达边缘之前更改索引的可选高度百分比（默认为0）。

示例

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scrollable List Tab Scroller',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Scrollable List Tab Scroller'),
    );
  }
}

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> {
  final data = {
    "Category A": [
      "Item 1 (A)",
      "Item 2 (A)",
      "Item 3 (A)",
      "Item 4 (A)",
    ],
    "Category B": [
      "Item 1 (B)",
      "Item 2 (B)",
    ],
    "Category C": [
      "Item 1 (C)",
      "Item 2 (C)",
      "Item 3 (C)",
      "Item 4 (C)",
      "Item 5 (C)",
    ],
    "Category D": [
      "Item 1 (D)",
      "Item 2 (D)",
      "Item 3 (D)",
      "Item 4 (D)",
      "Item 5 (D)",
      "Item 6 (D)",
      "Item 7 (D)",
      "Item 8 (D)",
      "Item 9 (D)",
    ],
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ScrollableListTabScroller(
          tabBuilder: (BuildContext context, int index, bool active) => Text(
            data.keys.elementAt(index),
            style: !active
                ? null
                : TextStyle(fontWeight: FontWeight.bold, color: Colors.green),
          ),
          itemCount: data.length,
          itemBuilder: (BuildContext context, int index) => Column(
            children: [
              Text(
                data.keys.elementAt(index),
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              ...data.values
                  .elementAt(index)
                  .asMap()
                  .map(
                    (index, value) => MapEntry(
                      index,
                      ListTile(
                        leading: Container(
                          height: 40,
                          width: 40,
                          decoration: BoxDecoration(
                              shape: BoxShape.circle, color: Colors.grey),
                          alignment: Alignment.center,
                          child: Text(index.toString()),
                        ),
                        title: Text(value),
                      ),
                    ),
                  )
                  .values
            ],
          ),
        ));
  }
}

局限性与注意事项

选项卡滚动器有限制，它基于PageView构建，对选项卡的自定义可能性较小。

此小部件受到 scrollable_list_tabview 的启发。

许可证

本项目根据MIT许可证授权，有关该许可证的更多信息可在 此处 找到。

GitHub

查看 Github