Flutter标签页列表插件tabbed_sliverlist的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter标签页列表插件tabbed_sliverlist的使用

tabbed_sliverlist 是一个用于简化 TabBar 初始化的 Flutter 插件,它使用 sliverappbarsliverlist 实现了带有 ListView 的标签页。通过为每个标签列表提供唯一的字符串,可以维护不同标签页的滚动位置。

支持的 Dart 版本

Dart SDK 版本 >= 2.15.1

安装

pubspec.yaml 文件中添加以下依赖:

dependencies:
  tabbed_sliverlist: ^0.1.0

如何使用

首先,在你的 Dart 文件中导入插件:

import 'package:tabbed_sliverlist/tabbed_sliverlist.dart';

然后,将插件包裹在 Scaffold 中。以下是一个示例代码,展示了如何使用 tabbed_sliverlist 插件:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key}) : super(key: key);
  var listitems = [
    'item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10',
    'item11', 'item12', 'item13', 'item14', 'item15', 'item16', 'item18', 'item19', 'item20'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabbedList(
        tabLength: 3,
        sliverTabBar: const SliverTabBar(
          title: Text('Tabbed SliverList'),
          centerTitle: true,
          tabBar: TabBar(
            tabs: [
              Tab(text: 'tab1'),
              Tab(text: 'tab2'),
              Tab(text: 'tab3'),
            ],
          ),
        ),
        tabLists: [
          TabListBuilder(
            uniquePageKey: 'page1',
            length: listitems.length,
            builder: (BuildContext context, int index) {
              return Padding(
                padding: const EdgeInsets.only(top: 10),
                child: ListTile(
                  title: Text(listitems[index]),
                  tileColor: Colors.white,
                ),
              );
            },
            tabListPadding: const EdgeInsets.symmetric(horizontal: 10),
          ),
          TabListBuilder(
            uniquePageKey: 'page2',
            length: listitems.length,
            builder: (BuildContext context, int index) {
              return Padding(
                padding: const EdgeInsets.only(top: 10),
                child: ListTile(
                  title: Text(listitems[index]),
                  tileColor: Colors.white,
                ),
              );
            },
            tabListPadding: const EdgeInsets.symmetric(horizontal: 10),
          ),
          TabListBuilder(
            uniquePageKey: 'page3',
            length: listitems.length,
            builder: (BuildContext context, int index) {
              return Padding(
                padding: const EdgeInsets.only(top: 10),
                child: ListTile(
                  title: Text(listitems[index]),
                  tileColor: Colors.white,
                ),
              );
            },
            tabListPadding: const EdgeInsets.symmetric(horizontal: 10),
          ),
        ],
      ),
    );
  }
}

注意事项

  • 你不需要使用所有的参数,其中一些是可选的。
  • 确保 tabLengthTabTabListBuilder 的数量匹配。

想要贡献?

欢迎提交 Pull 请求和问题!

如何贡献?

  1. 叉仓库 repository
  2. 克隆到本地机器
  3. 在你喜欢的编辑器中打开项目
  4. 打开命令行/终端并运行 flutter cleanflutter packages get
  5. 进行更改
  6. 创建一个 Pull 请求

未来改进

  • 增加数据加载中的加载提示。
  • 注册回调函数,当标签栏被按下时执行任务(如 API 调用)。
  • 滚动通知,以识别滚动的位置。

查看问题

查看问题

兼容性

此库仅在 Android 和 iOS 上进行了测试,预计在其他平台上也能正常工作。


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

1 回复

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


当然,tabbed_sliverlist 并不是一个官方 Flutter 插件,但假设它是一个提供标签页列表功能的自定义组件或第三方库,我们可以通过示例代码来展示如何在 Flutter 中实现类似的功能。这里,我将创建一个自定义的 TabbedSliverList 组件,它结合了 TabBarSliverList 来实现标签页列表的效果。

首先,确保你的 pubspec.yaml 文件中包含了 Flutter SDK 的依赖项(通常默认已经包含)。

接下来,是主要的 Dart 代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tabbed Sliver List Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TabbedSliverListScreen(),
    );
  }
}

class TabbedSliverListScreen extends StatefulWidget {
  @override
  _TabbedSliverListScreenState createState() => _TabbedSliverListScreenState();
}

class _TabbedSliverListScreenState extends State<TabbedSliverListScreen> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tabbed Sliver List'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(icon: Icon(Icons.directions_car), text: 'Tab 1'),
            Tab(icon: Icon(Icons.directions_transit), text: 'Tab 2'),
            Tab(icon: Icon(Icons.directions_bike), text: 'Tab 3'),
          ],
        ),
      ),
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                title: Text('Tabbed Sliver List'),
                expandedHeight: 150.0,
                forceElevated: innerBoxIsScrolled,
                floating: true,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  title: Text('Flexible Space Title'),
                  background: Image.network(
                    'https://via.placeholder.com/1500x500',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            SliverPersistentHeader(
              delegate: _SliverAppBarDelegate(
                TabBar(
                  controller: _tabController,
                  tabs: [
                    Tab(icon: Icon(Icons.directions_car), text: 'Tab 1'),
                    Tab(icon: Icon(Icons.directions_transit), text: 'Tab 2'),
                    Tab(icon: Icon(Icons.directions_bike), text: 'Tab 3'),
                  ],
                ),
              ),
              pinned: true,
            ),
          ];
        },
        body: TabBarView(
          controller: _tabController,
          children: [
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index in Tab 1'),
                  );
                },
                childCount: 20,
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index in Tab 2'),
                  );
                },
                childCount: 20,
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index in Tab 3'),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar tabBar;

  _SliverAppBarDelegate(this.tabBar);

  @override
  double get minExtent => kToolbarHeight;

  @override
  double get maxExtent => kToolbarHeight;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.transparent,
      child: tabBar,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return tabBar != oldDelegate.tabBar;
  }
}

这个示例展示了如何使用 TabBarSliverList 结合 NestedScrollView 来创建一个带有标签页的列表视图。每个标签页都包含一个 SliverList,显示不同的项目列表。

注意:

  1. NestedScrollView 用于嵌套滚动视图,允许 SliverAppBarTabBarView 结合使用。
  2. SliverPersistentHeader_SliverAppBarDelegate 用于在滚动时保持标签栏的固定位置。
  3. TabBarTabBarView 用于创建标签页和相应的视图内容。

这个示例代码可以作为实现类似 tabbed_sliverlist 功能的起点,根据你的具体需求进行调整和扩展。

回到顶部