搜尋套件、儲存庫與 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.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。