Flutter表格展示插件simple_dart_table的使用

Flutter表格展示插件simple_dart_table的使用

在Flutter开发中，有时我们需要展示一些结构化的数据，比如表格。simple_dart_table 是一个轻量级的表格组件，可以帮助我们快速实现表格展示功能，并支持排序功能。

简介

simple_dart_table 提供了一个简单的方式来创建表格，并允许用户对列进行排序。它非常适合用于展示简单的数据集，例如产品列表、用户信息等。

使用步骤

以下是一个完整的示例，展示如何使用 simple_dart_table 插件来创建一个带有排序功能的表格。

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 simple_dart_table 依赖：

dependencies:
  simple_dart_table: ^1.0.0

然后运行以下命令以更新依赖：

flutter pub get

2. 创建表格组件

接下来，我们创建一个简单的表格组件，并为其添加排序功能。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Simple Dart Table 示例'),
        ),
        body: Center(
          child: SimpleDartTableExample(),
        ),
      ),
    );
  }
}

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

class _SimpleDartTableExampleState extends State<SimpleDartTableExample> {
  List<Map<String, dynamic>> data = [
    {"name": "Alice", "age": 25, "city": "New York"},
    {"name": "Bob", "age": 30, "city": "Los Angeles"},
    {"name": "Charlie", "age": 35, "city": "Chicago"},
    {"name": "David", "age": 40, "city": "Houston"},
  ];

  // 定义表格列
  List<ColumnModel> columns = [
    ColumnModel("name", "姓名", true), // 第一列：姓名，支持排序
    ColumnModel("age", "年龄", true), // 第二列：年龄，支持排序
    ColumnModel("city", "城市", false), // 第三列：城市，不支持排序
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      child: SimpleDartTable(
        data: data,
        columns: columns,
        onSort: (int columnIndex, bool ascending) {
          setState(() {
            // 根据点击的列和排序方向重新排序数据
            data.sort((a, b) {
              if (!ascending) {
                final temp = a;
                a = b;
                b = temp;
              }
              switch (columns[columnIndex].key) {
                case "name":
                  return a["name"].compareTo(b["name"]);
                case "age":
                  return a["age"].compareTo(b["age"]);
                default:
                  return 0;
              }
            });
          });
        },
      ),
    );
  }
}