Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fluttercandies/extended_tabs
A powerful official extension library of Tab/TabBar/TabView, which support to scroll ancestor or child Tabs when current is overscroll, and set scroll direction and cache extent.
https://github.com/fluttercandies/extended_tabs
flutter indicator synchronous tabs
Last synced: 4 days ago
JSON representation
A powerful official extension library of Tab/TabBar/TabView, which support to scroll ancestor or child Tabs when current is overscroll, and set scroll direction and cache extent.
- Host: GitHub
- URL: https://github.com/fluttercandies/extended_tabs
- Owner: fluttercandies
- License: mit
- Created: 2019-02-14T14:51:56.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-24T09:28:39.000Z (5 months ago)
- Last Synced: 2024-06-24T10:58:18.414Z (5 months ago)
- Topics: flutter, indicator, synchronous, tabs
- Language: Dart
- Homepage: https://fluttercandies.github.io/extended_tabs/
- Size: 2.26 MB
- Stars: 261
- Watchers: 5
- Forks: 46
- Open Issues: 7
-
Metadata Files:
- Readme: README-ZH.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# extended_tabs
[](https://pub.dartlang.org/packages/extended_tabs) [](https://github.com/fluttercandies/extended_tabs/stargazers) [](https://github.com/fluttercandies/extended_tabs/network) [](https://github.com/fluttercandies/extended_tabs/blob/master/LICENSE) [](https://github.com/fluttercandies/extended_tabs/issues) 
语言: [English](README.md) | 中文简体
强大的官方 Tab/TabBar/TabView 扩展组件, 支持 TabView 嵌套滚动，支持设置滚动方向和缓存大小。
[在线例子](https://fluttercandies.github.io/extended_tabs/)
[Flutter 扩展的联动Tabs](https://juejin.im/post/5c34b87ef265da61553b01a8)
- [extended_tabs](#extended_tabs)
- [使用](#使用)
- [传送带指示器](#传送带指示器)
- [色块指示器](#色块指示器)
- [嵌套滚动](#嵌套滚动)
- [滚动方向](#滚动方向)
- [缓存大小](#缓存大小)
- [ShouldIgnorePointerWhenScrolling](#shouldignorepointerwhenscrolling)
- [☕️Buy me a coffee](#️buy-me-a-coffee)
## 使用
``` yaml
dependencies:
flutter:
sdk: flutter
extended_tabs: any
```
### 传送带指示器
``` dart
CarouselIndicator(
controller: _controller,
selectedColor: Colors.white,
unselectedColor: Colors.grey,
strokeCap: StrokeCap.round,
indicatorPadding: const EdgeInsets.all(5),
),
```
### 色块指示器
``` dart
TabBar(
indicator: ColorTabIndicator(Colors.blue),
labelColor: Colors.black,
tabs: [
Tab(text: "Tab0"),
Tab(text: "Tab1"),
],
controller: tabController,
)
```
### 嵌套滚动
``` dart
/// 如果开启，当当前TabBarView不能滚动的时候，会去查看父和子TabBarView是否能滚动，
/// 如果能滚动就会直接滚动父和子
/// 默认开启
final bool link;
ExtendedTabBarView(
children: [
List("Tab000"),
List("Tab001"),
List("Tab002"),
List("Tab003"),
],
controller: tabController2,
link: true,
)
```
### 滚动方向
``` dart
/// 滚动方向
/// 默认为水平滚动
final Axis scrollDirection;
Row(
children: [
ExtendedTabBar(
indicator: const ColorTabIndicator(Colors.blue),
labelColor: Colors.black,
scrollDirection: Axis.vertical,
tabs: const [
ExtendedTab(
text: 'Tab0',
scrollDirection: Axis.vertical,
),
ExtendedTab(
text: 'Tab1',
scrollDirection: Axis.vertical,
),
],
controller: tabController,
),
Expanded(
child: ExtendedTabBarView(
children: [
const ListWidget(
'Tab1',
scrollDirection: Axis.horizontal,
),
const ListWidget(
'Tab1',
scrollDirection: Axis.horizontal,
),
],
controller: tabController,
scrollDirection: Axis.vertical,
),
)
],
)
```
### 缓存大小
``` dart
/// 缓存页面的个数
/// 默认为0
/// 如果设置为1，那么意味内存里面有两页
final int cacheExtent;
ExtendedTabBarView(
children: [
List("Tab000"),
List("Tab001"),
List("Tab002"),
List("Tab003"),
],
controller: tabController2,
cacheExtent: 1,
)
```
### ShouldIgnorePointerWhenScrolling
当 Scrollable 滚动未停止的时候，是默认阻止其内容获得 hittest， 这就会导致在快速切换 tab 的时候，
给人一种不能马上操作内容的感觉。
为了解决这个问题你可以通过下面2种方式来处理：
1. 将 ShouldIgnorePointerWhenScrolling 设置成false，这样的话 Scrollable 在滚动中也不会阻止内容获得 hittest
2. 可以设置 LessSpringClampingScrollPhysics 让滚动动画更快结束
``` dart
/// Whether the contents of the widget should ignore [PointerEvent] inputs.
///
/// Setting this value to true prevents the use from interacting with the
/// contents of the widget with pointer events. The widget itself is still
/// interactive.
///
/// For example, if the scroll position is being driven by an animation, it
/// might be appropriate to set this value to ignore pointer events to
/// prevent the user from accidentally interacting with the contents of the
/// widget as it animates. The user will still be able to touch the widget,
/// potentially stopping the animation.
///
///
/// if true, child can't accept event before [ExtendedPageView],[ExtendedScrollable] stop scroll.
///
///
/// if false, child can accept event before [ExtendedPageView],[ExtendedScrollable] stop scroll.
/// notice: we don't know there are any issues if we don't ignore [PointerEvent] inputs when it's scrolling.
///
///
/// Two way to solve issue that child can't hittest before [PageView] stop scroll.
/// 1. set [shouldIgnorePointerWhenScrolling] false
/// 2. use LessSpringClampingScrollPhysics to make animation quickly
///
/// default is true.
final bool shouldIgnorePointerWhenScrolling;
ExtendedTabBarView(
children: [
List("Tab000"),
List("Tab001"),
List("Tab002"),
List("Tab003"),
],
controller: tabController2,
shouldIgnorePointerWhenScrolling: false,
cacheExtent: 1,
)
```
## ☕️Buy me a coffee
