搜尋套件、儲存庫與 APP 分類

flex_grid 封面
套件詳情v5.1.0

flex_grid

FlexGrid 以表格格式顯示資料。它包含凍結欄/列、載入更多、高性能量以及在 TabBarView/PageView 中更好的體驗。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
157
喜歡數
51
Pub 分數
130

安裝套件

flutter pub add flex_grid

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

FlexGrid 是一個高效率的表格組件,適用於 Flutter,能以表格格式顯示資料,支援凍結欄位與列、無限捲動並載入更多內容,以及在動態環境(如 TabBarView 或 PageView)中進行優化渲染,確保流暢的效能。專為大型資料集設計,能在行動裝置、網頁及桌面等所有平台提供即時回應的使用者體驗。此套件非常適合需要高效佈局管理與視覺清晰度的資料密集型應用。

適用情境

  • 以表格形式顯示大型數據集
  • 建立具有固定標頭的可捲動表格
  • 在標籤頁中實現分頁或無限列表
  • 使用凍結欄位建構資料儀表板
  • 優化嵌套導航視圖中的效能

主要特色

  • 用於更好導航的凍結欄位與列
  • 無限加載與'載入更多'功能
  • 高效能渲染大量資料集
  • 與 TabBarView/PageView 的平滑整合
  • 跨平台相容性(Android、iOS、Web、macOS、Windows、Linux)

適合對象

  • 資料密集型應用
  • 管理面板和儀表板
  • 具有複雜表格的移動和網頁應用
  • 需要高效表格渲染的開發人員
  • 使用 TabBarView 或 PageView 進行導航的項目

使用建議

  • 需要仔細處理大型資料集,以避免記憶體問題
  • 可能需要自定樣式來處理複雜的單元格佈局
  • 性能取決於資料大小和複雜性
  • 有限的內建編輯功能
  • 最適合只讀或簡單互動場景

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

flex_grid

pub package GitHub stars GitHub forks GitHub license GitHub issues FlutterCandies QQ 群

Language: English| 中文简体

The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that frozened column/row,loading more, high performance and better experience in TabBarView/PageView.

parameter description default
frozenedColumnsCount The count of forzened columns 0
frozenedRowsCount The count of forzened rows 0
cellBuilder The builder to create cell required
cellBuilder The builder to create header required
columnsCount The count of columns, it should big than 0 required
source The data source of [FlexGrid] required
rowWrapper decorate row widget in this call back null
rebuildCustomScrollView rebuild when source is changed, It's from [LoadingMoreCustomScrollView] false
controller The [ScrollController] on vertical direction null
horizontalController The [SyncControllerMixin] for horizontal direction null
outerHorizontalSyncController The Outer [SyncControllerMixin], for example [ExtendedTabBarView] or [ExtendedPageView]. It make better experience when scroll on horizontal direction null
physics The physics on both horizontal and vertical direction null
verticalHighPerformance/horizontalHighPerformance If true, forces the children to have the given extent(Cell height/width) in the scroll direction. false
headerStyle An immutable style describing how to create header CellStyle.header()
cellStyle An immutable style describing how to create cell CellStyle.cell()
indicatorBuilder Widget builder for different loading state, it's from [LoadingMoreCustomScrollView] null
extendedListDelegate A delegate that provides extensions, it's from [LoadingMoreCustomScrollView] null
headersBuilder The builder to custom the headers of [FlexGrid] null
link if link is true, scroll parent [ExtendedTabView] when [FlexGrid] is over scroll false

source

[FlexGrid.source] is form loading_more_list, LoadingMoreBase is data collection for loading more. override loadData method to load your data. set hasMore to false when it has no more data.

class FlexGridSource extends LoadingMoreBase<GridRow> {
  int _pageIndex = 1;

  void _load() {
    for (int i = 0; i < 15; i++) {
      add(GridRow(name: 'index:$_pageIndex-$i'));
    }
  }

  @override
  bool get hasMore => _pageIndex < 4;

  @override
  Future<bool> loadData([bool isloadMoreAction = false]) async {
    await Future<void>.delayed(const Duration(seconds: 2));
    _load();
    _pageIndex++;
    return true;
  }

  @override
  Future<bool> refresh([bool notifyStateChanged = false]) async {
    _pageIndex = 1;
    return super.refresh(notifyStateChanged);
  }
}

rowWrapper

decorate row widget in this call back.

    FlexGrid(
      rowWrapper: (
        BuildContext context,
        T data,
        int row,
        Widget child,
      ) {
        return Column(
          children: <Widget>[
            child,
            const Divider(),
          ],
        );
      },
    );

headersBuilder

you can add anyother headers in this call back.

    FlexGrid(
      headersBuilder: (BuildContext b, Widget header) {
        return <Widget>[
          header,
          SliverToBoxAdapter(
            child: PullToRefreshContainer(
                (PullToRefreshScrollNotificationInfo info) {
              return PullToRefreshHeader(
                info,
                source.lastRefreshTime,
              );
            }),
          ),
        ];
      },
    );

所屬分類

依賴

依賴清單 4 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。