Flutter网格布局插件 flex_grid 的使用

flex_grid 是一个功能强大的Flutter插件，用于在表格格式中快速显示数据。它支持冻结列/行、加载更多数据、高性能渲染，并且在 TabBarView 或 PageView 中有更好的用户体验。

主要特性

• 冻结列/行
• 支持加载更多数据
• 高性能渲染
• 适用于 TabBarView 和 PageView

示例效果

冻结列/行	TabView	大量数据

Excel风格	股票列表	-
		-

参数说明

数据源 (source)

FlexGrid.source 来自 loading_more_list，LoadingMoreBase 是用于加载更多数据的数据集合。你需要重写 loadData 方法来加载数据，并在没有更多数据时将 hasMore 设置为 false。

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

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

  [@override](/user/override)
  bool get hasMore => _pageIndex < 4;

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

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

行装饰 (rowWrapper)

你可以通过 rowWrapper 回调来装饰每一行的控件。

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

自定义表头 (headersBuilder)

你可以在 headersBuilder 回调中添加自定义的表头。

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

完整示例 Demo

以下是一个完整的 flex_grid 使用示例：

import 'package:flutter/material.dart';
import 'package:flex_grid/flex_grid.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlexGrid Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FlexGridSource _source = FlexGridSource();

  [@override](/user/override)
  void initState() {
    super.initState();
    _source.loadData();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlexGrid Example'),
      ),
      body: FlexGrid<FlexGridSource>(
        source: _source,
        columnsCount: 3,
        frozenedColumnsCount: 1,
        frozenedRowsCount: 1,
        cellBuilder: (BuildContext context, int column, int row, FlexGridSource source) {
          if (row == 0 && column == 0) {
            return Container(
              padding: EdgeInsets.all(8.0),
              color: Colors.grey[300],
              child: Text('Frozen Header'),
            );
          } else if (row == 0) {
            return Container(
              padding: EdgeInsets.all(8.0),
              color: Colors.grey[300],
              child: Text('Header ${column + 1}'),
            );
          } else if (column == 0) {
            return Container(
              padding: EdgeInsets.all(8.0),
              color: Colors.grey[200],
              child: Text('Row ${row + 1}'),
            );
          } else {
            return Container(
              padding: EdgeInsets.all(8.0),
              child: Text('Item ${row + 1}-${column + 1}'),
            );
          }
        },
        headerStyle: CellStyle(headerColor: Colors.grey[300]),
        cellStyle: CellStyle(cellColor: Colors.white),
      ),
    );
  }
}