Flutter表格展示插件sliver_table的使用

Flutter表格展示插件sliver_table的使用

Sliver Table

sliver_table 是一个Flutter插件，它提供了一个可以在 CustomScrollView 中使用的表格组件。通过这个插件，你可以轻松地创建带有固定表头和列头的滚动表格。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  sliver_table: ^0.0.2

预览

使用示例

下面是一个完整的示例代码，展示了如何使用 sliver_table 插件来创建一个带有固定表头和列头的表格。这个示例中，我们创建了一个包含100行和5列的表格，每行和每列都有不同的颜色和文本内容。

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

void main() async {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.deepPurple),
      home: const Scaffold(
        body: DefaultTextStyle(
          child: ColorsTable(),
          style: TextStyle(fontSize: 15.0, color: Colors.white),
        ),
      ),
    ),
  );
}

class ColorsTable extends StatelessWidget {
  const ColorsTable({Key? key}) : super(key: key);

  static const colorShades = [500, 600, 700, 800, 900]; // 定义颜色深浅

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        const SliverAppBar(
          pinned: true, // 固定顶部栏
          primary: true,
          expandedHeight: 150.0, // 顶部栏展开高度
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            title: Text('Sliver Table Demo'), // 顶部栏标题
          ),
        ),
        SliverTable(
          cellWidth: 100.0, // 单元格宽度
          cellHeight: 50.0, // 单元格高度
          rowsCount: 100, // 行数
          colsCount: colorShades.length, // 列数
          topHeaderHeight: 60.0, // 顶部表头高度
          leftHeaderCellWidth: 120.0, // 左侧表头单元格宽度
          topLeftCorner: Container(
            color: Colors.yellowAccent.shade700, // 顶左角背景色
            alignment: Alignment.center,
            child: const Text('Corner'), // 顶左角文本
          ),
          topHeaderBuilder: (context, i) {
            return TableCell(text: 'Col #$i'); // 顶部表头构建器
          },
          leftHeaderBuilder: (context, i) {
            return TableCell(
              text: 'Row Header #$i', // 左侧表头文本
              color: Colors.primaries[i % Colors.primaries.length].shade400, // 左侧表头背景色
            );
          },
          cellBuilder: (context, row, col) {
            return TableCell(
              text: 'Cell ($row, $col)', // 单元格文本
              color: Colors.primaries[row % Colors.primaries.length][colorShades[col]], // 单元格背景色
            );
          },
          topHeaderContainerBuilder: (context, header) {
            return Material(
              color: Colors.yellowAccent, // 顶部表头容器背景色
              elevation: 5, // 顶部表头容器阴影
              child: header, // 顶部表头内容
            );
          },
        ),
      ],
    );
  }
}

class TableCell extends StatelessWidget {
  const TableCell({required this.text, this.color, super.key});

  final String text; // 单元格文本
  final Color? color; // 单元格背景色

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center, // 文本居中
      color: color, // 背景色
      child: Text(text), // 文本内容
    );
  }
}