Flutter标签页列表插件tabbed_sliverlist的使用
Flutter标签页列表插件tabbed_sliverlist的使用
tabbed_sliverlist
是一个用于简化 TabBar
初始化的 Flutter 插件,它使用 sliverappbar
和 sliverlist
实现了带有 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),
),
],
),
);
}
}
注意事项
- 你不需要使用所有的参数,其中一些是可选的。
- 确保
tabLength
与Tab
和TabListBuilder
的数量匹配。
想要贡献?
欢迎提交 Pull 请求和问题!
如何贡献?
- 叉仓库 repository
- 克隆到本地机器
- 在你喜欢的编辑器中打开项目
- 打开命令行/终端并运行
flutter clean
和flutter packages get
- 进行更改
- 创建一个 Pull 请求
未来改进
- 增加数据加载中的加载提示。
- 注册回调函数,当标签栏被按下时执行任务(如 API 调用)。
- 滚动通知,以识别滚动的位置。
查看问题
兼容性
此库仅在 Android 和 iOS 上进行了测试,预计在其他平台上也能正常工作。
更多关于Flutter标签页列表插件tabbed_sliverlist的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter标签页列表插件tabbed_sliverlist的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,tabbed_sliverlist
并不是一个官方 Flutter 插件,但假设它是一个提供标签页列表功能的自定义组件或第三方库,我们可以通过示例代码来展示如何在 Flutter 中实现类似的功能。这里,我将创建一个自定义的 TabbedSliverList
组件,它结合了 TabBar
和 SliverList
来实现标签页列表的效果。
首先,确保你的 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;
}
}
这个示例展示了如何使用 TabBar
和 SliverList
结合 NestedScrollView
来创建一个带有标签页的列表视图。每个标签页都包含一个 SliverList
,显示不同的项目列表。
注意:
NestedScrollView
用于嵌套滚动视图,允许SliverAppBar
和TabBarView
结合使用。SliverPersistentHeader
和_SliverAppBarDelegate
用于在滚动时保持标签栏的固定位置。TabBar
和TabBarView
用于创建标签页和相应的视图内容。
这个示例代码可以作为实现类似 tabbed_sliverlist
功能的起点,根据你的具体需求进行调整和扩展。