{"id":19273065,"url":"https://github.com/fluttercandies/extended_tabs","last_synced_at":"2025-05-16T04:05:39.089Z","repository":{"id":56828597,"uuid":"170707707","full_name":"fluttercandies/extended_tabs","owner":"fluttercandies","description":"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.","archived":false,"fork":false,"pushed_at":"2025-05-07T09:48:45.000Z","size":2648,"stargazers_count":295,"open_issues_count":11,"forks_count":53,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-07T10:46:40.838Z","etag":null,"topics":["flutter","indicator","synchronous","tabs"],"latest_commit_sha":null,"homepage":"https://fluttercandies.github.io/extended_tabs/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fluttercandies.png","metadata":{"files":{"readme":"README-ZH.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"custom":"http://zmtzawqlp.gitee.io/my_images/images/qrcode.png"}},"created_at":"2019-02-14T14:51:56.000Z","updated_at":"2025-05-07T09:48:48.000Z","dependencies_parsed_at":"2024-11-09T20:40:45.414Z","dependency_job_id":"03f7b73f-d4f2-430a-8de4-34826947b645","html_url":"https://github.com/fluttercandies/extended_tabs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fextended_tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fextended_tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fextended_tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fextended_tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fluttercandies","download_url":"https://codeload.github.com/fluttercandies/extended_tabs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464895,"owners_count":22075570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","indicator","synchronous","tabs"],"created_at":"2024-11-09T20:40:41.371Z","updated_at":"2025-05-16T04:05:34.071Z","avatar_url":"https://github.com/fluttercandies.png","language":"Dart","funding_links":["http://zmtzawqlp.gitee.io/my_images/images/qrcode.png"],"categories":[],"sub_categories":[],"readme":"# extended_tabs\n\n[![pub package](https://img.shields.io/pub/v/extended_tabs.svg)](https://pub.dartlang.org/packages/extended_tabs) [![GitHub stars](https://img.shields.io/github/stars/fluttercandies/extended_tabs)](https://github.com/fluttercandies/extended_tabs/stargazers) [![GitHub forks](https://img.shields.io/github/forks/fluttercandies/extended_tabs)](https://github.com/fluttercandies/extended_tabs/network) [![GitHub license](https://img.shields.io/github/license/fluttercandies/extended_tabs)](https://github.com/fluttercandies/extended_tabs/blob/master/LICENSE) [![GitHub issues](https://img.shields.io/github/issues/fluttercandies/extended_tabs)](https://github.com/fluttercandies/extended_tabs/issues) \u003ca target=\"_blank\" href=\"https://jq.qq.com/?_wv=1027\u0026k=5bcc0gy\"\u003e\u003cimg border=\"0\" src=\"https://pub.idqqimg.com/wpa/images/group.png\" alt=\"flutter-candies\" title=\"flutter-candies\"\u003e\u003c/a\u003e\n\n语言: [English](README.md) | 中文简体\n\n强大的官方 Tab/TabBar/TabView 扩展组件, 支持 TabView 嵌套滚动，支持设置滚动方向和缓存大小。\n\n[在线例子](https://fluttercandies.github.io/extended_tabs/)\n\n[Flutter 扩展的联动Tabs](https://juejin.im/post/5c34b87ef265da61553b01a8)\n\n![](https://github.com/fluttercandies/Flutter_Candies/tree/master/gif/extended_tab/link.gif)\n\n![](https://github.com/fluttercandies/Flutter_Candies/tree/master/gif/extended_tab/scrollDirection.gif) \n\n- [extended_tabs](#extended_tabs)\n  - [使用](#使用)\n    - [传送带指示器](#传送带指示器)\n    - [色块指示器](#色块指示器)\n    - [嵌套滚动](#嵌套滚动)\n    - [滚动方向](#滚动方向)\n    - [缓存大小](#缓存大小)\n    - [ShouldIgnorePointerWhenScrolling](#shouldignorepointerwhenscrolling)\n  - [☕️Buy me a coffee](#️buy-me-a-coffee)\n\n## 使用\n\n``` yaml\ndependencies:\n  flutter:\n    sdk: flutter\n  extended_tabs: any\n```\n\n### 传送带指示器\n``` dart\n   CarouselIndicator(\n     controller: _controller,\n     selectedColor: Colors.white,\n     unselectedColor: Colors.grey,\n     strokeCap: StrokeCap.round,\n     indicatorPadding: const EdgeInsets.all(5),\n   ),\n```\n### 色块指示器\n\n``` dart\n    TabBar(\n      indicator: ColorTabIndicator(Colors.blue),\n      labelColor: Colors.black,\n      tabs: [\n        Tab(text: \"Tab0\"),\n        Tab(text: \"Tab1\"),\n      ],\n      controller: tabController,\n    )\n```\n### 嵌套滚动\n``` dart\n  /// 如果开启，当当前TabBarView不能滚动的时候，会去查看父和子TabBarView是否能滚动，\n  /// 如果能滚动就会直接滚动父和子\n  /// 默认开启\n  final bool link;\n  \n  ExtendedTabBarView(\n    children: \u003cWidget\u003e[\n      List(\"Tab000\"),\n      List(\"Tab001\"),\n      List(\"Tab002\"),\n      List(\"Tab003\"),\n    ],\n    controller: tabController2,\n    link: true,\n  )\n```\n\n### 滚动方向\n\n``` dart\n  /// 滚动方向\n  /// 默认为水平滚动\n  final Axis scrollDirection;\n\n  Row(\n    children: \u003cWidget\u003e[\n      ExtendedTabBar(\n        indicator: const ColorTabIndicator(Colors.blue),\n        labelColor: Colors.black,\n        scrollDirection: Axis.vertical,\n        tabs: const \u003cExtendedTab\u003e[\n          ExtendedTab(\n            text: 'Tab0',\n            scrollDirection: Axis.vertical,\n          ),\n          ExtendedTab(\n            text: 'Tab1',\n            scrollDirection: Axis.vertical,\n          ),\n        ],\n        controller: tabController,\n      ),\n      Expanded(\n        child: ExtendedTabBarView(\n          children: \u003cWidget\u003e[\n            const ListWidget(\n              'Tab1',\n              scrollDirection: Axis.horizontal,\n            ),\n            const ListWidget(\n              'Tab1',\n              scrollDirection: Axis.horizontal,\n            ),\n          ],\n          controller: tabController,\n          scrollDirection: Axis.vertical,\n        ),\n      )\n    ],\n  )\n``` \n### 缓存大小\n``` dart\n  /// 缓存页面的个数\n  /// 默认为0\n  /// 如果设置为1，那么意味内存里面有两页\n  final int cacheExtent;\n  \n  ExtendedTabBarView(\n    children: \u003cWidget\u003e[\n      List(\"Tab000\"),\n      List(\"Tab001\"),\n      List(\"Tab002\"),\n      List(\"Tab003\"),\n    ],\n    controller: tabController2,\n    cacheExtent: 1,\n  )  \n```\n\n### ShouldIgnorePointerWhenScrolling\n\n当 Scrollable 滚动未停止的时候，是默认阻止其内容获得 hittest， 这就会导致在快速切换 tab 的时候，\n给人一种不能马上操作内容的感觉。\n\n为了解决这个问题你可以通过下面2种方式来处理：\n\n1. 将 ShouldIgnorePointerWhenScrolling 设置成false，这样的话 Scrollable 在滚动中也不会阻止内容获得 hittest\n2. 可以设置 LessSpringClampingScrollPhysics 让滚动动画更快结束\n\n``` dart\n  /// Whether the contents of the widget should ignore [PointerEvent] inputs.\n  ///\n  /// Setting this value to true prevents the use from interacting with the\n  /// contents of the widget with pointer events. The widget itself is still\n  /// interactive.\n  ///\n  /// For example, if the scroll position is being driven by an animation, it\n  /// might be appropriate to set this value to ignore pointer events to\n  /// prevent the user from accidentally interacting with the contents of the\n  /// widget as it animates. The user will still be able to touch the widget,\n  /// potentially stopping the animation.\n  ///\n  ///\n  /// if true, child can't accept event before [ExtendedPageView],[ExtendedScrollable] stop scroll.\n  ///\n  ///\n  /// if false, child can accept event before [ExtendedPageView],[ExtendedScrollable] stop scroll.\n  /// notice: we don't know there are any issues if we don't ignore [PointerEvent] inputs when it's scrolling.\n  ///\n  ///\n  /// Two way to solve issue that child can't hittest before [PageView] stop scroll.\n  /// 1. set [shouldIgnorePointerWhenScrolling] false\n  /// 2. use LessSpringClampingScrollPhysics to make animation quickly\n  ///\n  /// default is true.\n  final bool shouldIgnorePointerWhenScrolling;\n  \n  ExtendedTabBarView(\n    children: \u003cWidget\u003e[\n      List(\"Tab000\"),\n      List(\"Tab001\"),\n      List(\"Tab002\"),\n      List(\"Tab003\"),\n    ],\n    controller: tabController2,\n    shouldIgnorePointerWhenScrolling: false,\n    cacheExtent: 1,\n  )  \n```\n\n## ☕️Buy me a coffee\n\n![img](http://zmtzawqlp.gitee.io/my_images/images/qrcode.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercandies%2Fextended_tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffluttercandies%2Fextended_tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercandies%2Fextended_tabs/lists"}