搜索插件、代码仓与 APP 分类

infinite_scroll_tab_view 封面
插件详情v1.0.3

infinite_scroll_tab_view

一个用于可无限滚动标签视图组件的 Flutter 包。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
406
喜欢数
32
Pub 分数
150

安装插件

flutter pub add infinite_scroll_tab_view

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,提供可无限水平滚动的标签视图组件,允许用户在无限数量的标签之间导航。专为具有动态或大量标签内容的应用程序设计,支持流畅的过渡效果和跨所有主要平台的响应式布局。该包非常适合需要无边界连续标签导航的应用程序,例如媒体画廊、仪表板或数据密集型界面。可通过 pub.dev 轻松集成,并持续积极开发维护。

适合场景

  • 动态内容导航
  • 媒体画廊界面
  • 数据仪表板选项卡
  • 分类项目长列表
  • 多设备上的响应式界面

主要特点

  • 无限水平标签页滚动
  • 跨平台支持(Android、iOS、Web、macOS、Windows、Linux)
  • 平滑过渡动画
  • 通过 pub.dev 轻松集成
  • 自适应布局以适应不同屏幕尺寸

适合对象

  • 标签页数量较多的应用程序
  • 交互式仪表板
  • 内容丰富的移动和网页应用
  • 寻求可重用标签组件的开发人员
  • 需要流式导航的项目

使用建议

  • 可能会影响非常繁重的标签内容的性能
  • 需要仔细管理状态以实现动态标签页
  • 不适合静态的小标签集
  • 最适合水平滚动模式
  • 需要在低端设备上进行测试以确保流畅性

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

📜 infinite_scroll_tab_view

pub package

A Flutter package for tab view component that can scroll infinitely.

✍️ Usage

  1. Import it.

    dependencies:
        infinite_scroll_tab_view: <latest-version>
    
    import 'package:infinite_scroll_tab_view/infinite_scroll_tab_view.dart';
    
  2. Place InfiniteScrollTabView Widget into your app.

     return InfiniteScrollTabView(
       contentLength: contents.length,
       onTabTap: (index) {
         print('tapped $index');
       },
       tabBuilder: (index, isSelected) => Text(
         _convertContent(contents[index]),
         style: TextStyle(
           color: isSelected ? Colors.pink : Colors.black54,
           fontWeight: FontWeight.bold,
           fontSize: 18,
         ),
       ),
       separator: BorderSide(color: Colors.black12, width: 1.0),
       onPageChanged: (index) => print('page changed to $index.'),
       indicatorColor: Colors.pink,
       pageBuilder: (context, index, _) {
         return SizedBox.expand(
           child: DecoratedBox(
             decoration: BoxDecoration(
               color: Colors.green.withOpacity(contents[index] / 10),
             ),
             child: Center(
               child: Text(
                 _convertContent(contents[index]),
                 style: Theme.of(context).textTheme.headline3!.copyWith(
                       color: contents[index] / 10 > 0.6
                           ? Colors.white
                           : Colors.black87,
                     ),
               ),
             ),
           ),
         );
       },
     );
    

💭 Have a question?

If you have a question or found issue, feel free to create an issue.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。