Flutter表格展示插件flutter_table的使用

Flutter表格展示插件flutter_table的使用

flutter_table 插件（实际为 table_sticky_headers）是用于在Flutter应用程序中显示带有粘性标题的二维表格。该插件允许你在水平和垂直方向上滚动表格时，保持顶部和左侧的标题固定。以下是一个完整的示例demo，展示了如何使用这个插件。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 table_sticky_headers 依赖：

dependencies:
  flutter:
    sdk: flutter
  table_sticky_headers: ^最新版本

然后运行 flutter pub get 来安装依赖。

2. 完整示例代码

以下是一个完整的示例代码，展示了如何使用 StickyHeadersTable 来创建一个带有粘性标题的表格，并提供了简单的数据生成逻辑。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TablePage(),
    );
  }
}

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

class _TablePageState extends State<TablePage> {
  // 表格的列数和行数
  final int columns = 10;
  final int rows = 20;

  // 生成表格数据
  List<List<String>> makeData() {
    final List<List<String>> output = [];
    for (int i = 0; i < columns; i++) {
      final List<String> row = [];
      for (int j = 0; j < rows; j++) {
        row.add('Col $i, Row $j');
      }
      output.add(row);
    }
    return output;
  }

  // 生成列标题
  List<String> makeTitleColumn() => List.generate(columns, (i) => 'Top $i');

  // 生成行标题
  List<String> makeTitleRow() => List.generate(rows, (i) => 'Left $i');

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Sticky Headers Table Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: StickyHeadersTable(
          // 列的数量
          columnsLength: columns,
          // 行的数量
          rowsLength: rows,
          // 列标题构建器
          columnsTitleBuilder: (int i) => Text(makeTitleColumn()[i]),
          // 行标题构建器
          rowsTitleBuilder: (int i) => Text(makeTitleRow()[i]),
          // 单元格内容构建器
          contentCellBuilder: (int i, int j) => Text(makeData()[i][j]),
          // 左上角的粘性单元格
          legendCell: Text('Sticky Legend'),
          // 设置单元格尺寸为统一大小
          cellDimensions: CellDimensions.uniform(width: 100, height: 50),
          // 设置单元格内容对齐方式
          cellAlignments: CellAlignments.uniform(Alignment.center),
          // 点击粘性单元格时的回调
          onStickyLegendPressed: () => print('Sticky legend pressed.'),
          // 点击列标题时的回调
          onColumnTitlePressed: (int i) => print('Column $i title pressed.'),
          // 点击行标题时的回调
          onRowTitlePressed: (int j) => print('Row $j title pressed.'),
          // 点击内容单元格时的回调
          onContentCellPressed: (int i, int j) => print('Cell at column $i, row $j pressed.'),
          // 初始滚动偏移量
          initialScrollOffsetX: 0.0,
          initialScrollOffsetY: 0.0,
          // 滚动结束时的回调
          onEndScrolling: (double scrollOffsetX, double scrollOffsetY) {
            print('Scroll ended at X: $scrollOffsetX, Y: $scrollOffsetY');
          },
        ),
      ),
    );
  }
}