Flutter可滚动列表标签页插件scrollable_list_tabview的使用

scrollable_list_tabview

一个Flutter小部件，它能够同步一个滚动视图和自定义标签页。

主要思想是创建一个与内部滚动视图同步的自定义标签页。当滚动活动发生时，顶部的自定义标签页会根据内部滚动视图的小部件的索引来跟随更新。

安装

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

dependencies:
    scrollable_list_tabview: <latest>

运行以下命令以安装依赖：

flutter pub get

使用

要使用此小部件，我们首先需要定义标签页的外观。

ListTab

ListTab用于定义单个标签页的外观，其参数如下表所示：

参数名	描述
`Widget icon`	标签页尾部的小部件，通常为图标。
`Widget label`	标签页中显示的文字，必须非空。
`BorderRadiusGeometry borderRadius`	单个标签页的圆角值。
`Color activeBackgroundColor`	当前选中的标签页背景颜色。
`Color inactiveBackgroundColor`	未选中的标签页背景颜色。
`bool showIconInList`	是否在滚动视图中显示图标小部件。
`Color borderColor`	未选中状态下的标签页边框颜色。

然后我们可以使用ListTab在ScrollableListTab中。

ScrollableListTab

ScrollableListTab用于定义每个标签页及其对应的滚动视图，其参数如下表所示：

参数名	描述
`tab`	用于渲染标签页的数据模型。
`body`	单独的可滚动小部件。

然后ScrollableListTabView将接收一个ScrollableListTab的列表作为参数。

ScrollableListTabView

ScrollableListTabView是主控件，用于将所有标签页和滚动视图组合在一起，其参数如下表所示：

参数名	描述
`tabs`	要构建的标签页列表。
`height`	视图顶部标签的高度。
`tabAnimationDuration`	标签切换动画的持续时间。
`bodyAnimationDuration`	内部滚动视图动画的持续时间。
`tabAnimationCurve`	标签切换动画使用的曲线。
`bodyAnimationCurve`	改变内部滚动视图索引时使用的动画曲线。

示例

以下是一个完整的示例代码，展示了如何使用scrollable_list_tabview插件来实现一个带有多个标签页的可滚动列表。

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

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

class MyApp extends StatelessWidget {
  // 这是应用程序的根小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ScrollableListTabView 示例',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter ScrollableListTabView 示例'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ScrollableListTabView(
        tabHeight: 48, // 标签页的高度
        bodyAnimationDuration: const Duration(milliseconds: 150), // 滚动视图动画持续时间
        tabAnimationCurve: Curves.easeOut, // 标签切换动画曲线
        tabAnimationDuration: const Duration(milliseconds: 200), // 标签切换动画持续时间
        tabs: [
          ScrollableListTab(
              tab: ListTab(
                  label: Text('标签 1'),
                  icon: Icon(Icons.group),
                  showIconOnList: false),
              body: ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 10,
                itemBuilder: (_, 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('列表元素 $index'),
                ),
              )),
          ScrollableListTab(
              tab: ListTab(label: Text('标签 2'), icon: Icon(Icons.subject)),
              body: GridView.builder(
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                physics: NeverScrollableScrollPhysics(),
                itemCount: 10,
                itemBuilder: (_, index) => Card(
                  child: Center(child: Text('卡片元素 $index')),
                ),
              )),
          ScrollableListTab(
              tab: ListTab(
                  label: Text('标签 3'),
                  icon: Icon(Icons.subject),
                  showIconOnList: true),
              body: GridView.builder(
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                physics: NeverScrollableScrollPhysics(),
                itemCount: 10,
                itemBuilder: (_, index) => Card(
                  child: Center(child: Text('卡片元素 $index')),
                ),
              )),
          ScrollableListTab(
              tab: ListTab(label: Text('标签 4'), icon: Icon(Icons.add)),
              body: ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 10,
                itemBuilder: (_, 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('列表元素 $index'),
                ),
              )),
          ScrollableListTab(
              tab: ListTab(label: Text('标签 5'), icon: Icon(Icons.group)),
              body: ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 10,
                itemBuilder: (_, 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('列表元素 $index'),
                ),
              )),
          ScrollableListTab(
              tab: ListTab(label: Text('标签 6'), icon: Icon(Icons.subject)),
              body: GridView.builder(
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                physics: NeverScrollableScrollPhysics(),
                itemCount: 10,
                itemBuilder: (_, index) => Card(
                  child: Center(child: Text('卡片元素 $index')),
                ),
              )),
          ScrollableListTab(
              tab: ListTab(
                  label: Text('标签 7'),
                  icon: Icon(Icons.subject),
                  showIconOnList: true),
              body: GridView.builder(
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                physics: NeverScrollableScrollPhysics(),
                itemCount: 10,
                itemBuilder: (_, index) => Card(
                  child: Center(child: Text('卡片元素 $index')),
                ),
              )),
          ScrollableListTab(
              tab: ListTab(label: Text('标签 8'), icon: Icon(Icons.add)),
              body: ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 10,
                itemBuilder: (_, 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('列表元素 $index'),
                ),
              ))
        ],
      ),
    );
  }
}

更多关于Flutter可滚动列表标签页插件scrollable_list_tabview的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼

更多关于Flutter可滚动列表标签页插件scrollable_list_tabview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

scrollable_list_tabview 是一个 Flutter 插件，用于实现可滚动的标签页列表。它允许你在一个页面中创建多个标签页，每个标签页可以包含一个独立的可滚动列表。这个插件非常适合用于需要展示多个分类或数据集的场景。

安装

首先，你需要在 pubspec.yaml 文件中添加 scrollable_list_tabview 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  scrollable_list_tabview: ^1.0.0 # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示如何使用 scrollable_list_tabview 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scrollable List TabView Example'),
        ),
        body: ScrollableListTabView(
          tabHeight: 48, // 标签栏高度
          bodyAnimationDuration: const Duration(milliseconds: 150), // 页面切换动画时长
          tabAnimationCurve: Curves.easeInOut, // 标签切换动画曲线
          tabAnimationDuration: const Duration(milliseconds: 200), // 标签切换动画时长
          tabs: [
            ScrollableListTab(
              tab: ListTab(
                label: Text('Tab 1'),
                // 可以设置图标
                // icon: Icon(Icons.star),
              ),
              body: ListView.builder(
                itemCount: 20,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
              ),
            ),
            ScrollableListTab(
              tab: ListTab(
                label: Text('Tab 2'),
              ),
              body: ListView.builder(
                itemCount: 15,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
              ),
            ),
            ScrollableListTab(
              tab: ListTab(
                label: Text('Tab 3'),
              ),
              body: ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}