tabbed_sliverlist

一个用于简化初始化 TabBar 和 ListView builder 的包，使用 sliverappbar 和 sliverlist 实现。通过为每个 tablist 提供唯一的字符串来维护不同标签的滚动位置。

 
LinkedIn   Get the library   Example

支持的Dart版本

Dart SDK 版本 >= >=2.15.1

演示

tabbed_sliverlist Demo

安装

Pub

添加包

dependencies:
  tabbed_sliverlist: ^0.1.0

如何使用

在您的 dart 文件中导入该包

import 'package:tabbed_sliverlist/tabbed_sliverlist.dart';

将 widget 包装在 Scaffold widget 中。
以下代码是一个关于如何使用此插件的示例

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, index) {
                  return Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: ListTile(
                        title: Text(listitems[index].toString()),
                        tileColor: Colors.white,
                      ));
                }),
            TabListBuilder(
                uniquePageKey: 'page2',
                length: listitems.length,
                builder: (context, index) {
                  return Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: ListTile(
                        title: Text(listitems[index].toString()),
                        tileColor: Colors.white,
                      ));
                }),
            TabListBuilder(
                uniquePageKey: 'page3',
                length: listitems.length,
                builder: (context, index) {
                  return Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: ListTile(
                        title: Text(listitems[index].toString()),
                        tileColor: Colors.white,
                      ));
                })
          ]),
    );
  }
}

Note: 
You don't need to use all parameters, few of them are optional.
Make sure that tabLength matches number of Tab's and TabListBuilder's.

想贡献吗？

欢迎提交拉取请求和问题！

如何贡献？

  1. Fork 仓库
  2. 将其克隆到本地机器
  3. 在您喜欢的编辑器中打开项目
  4. 打开 cmd/终端并运行 flutter clean 然后 flutter packages get
  5. 进行更改
  6. 创建一个拉取请求

未来改进？

  1. 如果数据尚未获取，则启用加载。
  2. 当按下 tabbar 时注册一个回调以执行类似 API 调用等任务。
  3. 滚动通知以识别滚动到的位置。

在此处 查看问题

此库仅在 Android 上进行了测试，iOS 应该也能正常工作。

GitHub

查看 Github