Flutter数据网格展示插件syncfusion_flutter_datagrid的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter数据网格展示插件syncfusion_flutter_datagrid的使用

简介

Syncfusion Flutter DataGrid (DataTable) 是一个用于在Flutter应用程序中显示和操作数据的表格视图组件。它具有高性能，即使加载大量数据也能保持流畅。

syncfusion flutter datagrid

注意: 这是一个商业包。要使用此包，您需要拥有 Syncfusion® 商业许可证或 免费的 Syncfusion® 社区许可证。更多详情，请参阅LICENSE文件。

功能特性

  • 列类型：支持在每列中加载任何小部件。
  • 编辑：允许用户编辑单元格值。
  • 列尺寸调整：设置列宽以适应单元格内容，提高可读性。
  • 行高设置：设置表头和数据行的高度，也可以为特定行设置不同高度。
  • 排序：对一个或多个列进行升序或降序排序。
  • 选择：选择一行或多行，支持键盘导航（Web平台）。
  • 样式定制：自定义单元格和表头外观，支持条件样式。
  • 堆叠表头：显示多行表头。
  • 摘要行：显示额外的未绑定行以展示汇总信息。
  • 列调整大小：通过拖动列标题的右边界来调整列宽。
  • 加载更多：当滚动到底部时显示交互视图。
  • 分页：分段加载数据。
  • 页脚：显示额外的行在最后一行下方。
  • 冻结窗格：滚动时固定行和列。
  • 分组：根据特定标准组织和分类数据。
  • 列拖拽：通过拖放自定义列顺序。
  • 滑动：左右滑动行执行删除、编辑等操作。
  • 下拉刷新：下拉刷新数据。
  • 导出：将DataGrid内容导出为Excel和PDF格式。
  • 主题：提供深色和浅色主题。
  • 无障碍：支持屏幕阅读器。
  • 从右到左(RTL)：支持RTL语言如希伯来语和阿拉伯语。

安装与入门

安装

安装最新版本可以从pub获取。

快速开始

导入包

import 'package:syncfusion_flutter_datagrid/datagrid.dart';

创建应用数据

class Employee {
  Employee(this.id, this.name, this.designation, this.salary);
  final int id;
  final String name;
  final String designation;
  final int salary;
}

创建员工数据集合，并初始化EmployeeDataSource：

List<Employee> employees = <Employee>[];
late EmployeeDataSource employeeDataSource;

@override
void initState() {
  super.initState();
  employees = getEmployees();
  employeeDataSource = EmployeeDataSource(employees: employees);
}

List<Employee> getEmployees() {
  return [
    Employee(10001, 'James', 'Project Lead', 20000),
    Employee(10002, 'Kathryn', 'Manager', 30000),
    Employee(10003, 'Lara', 'Developer', 15000),
    Employee(10004, 'Michael', 'Designer', 15000),
    Employee(10005, 'Martin', 'Developer', 15000),
    Employee(10006, 'Newberry', 'Developer', 15000),
    Employee(10007, 'Balnc', 'Developer', 15000),
    Employee(10008, 'Perry', 'Developer', 15000),
    Employee(10009, 'Gable', 'Developer', 15000),
    Employee(10010, 'Grimes', 'Developer', 15000)
  ];
}

创建数据源

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource({required List<Employee> employees}) {
    _employees = employees
        .map<DataGridRow>((e) => DataGridRow(cells: [
              DataGridCell<int>(columnName: 'id', value: e.id),
              DataGridCell<String>(columnName: 'name', value: e.name),
              DataGridCell<String>(
                  columnName: 'designation', value: e.designation),
              DataGridCell<int>(columnName: 'salary', value: e.salary),
            ]))
        .toList();
  }

  List<DataGridRow> _employees = [];

  @override
  List<DataGridRow> get rows => _employees;

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return Container(
        alignment: (dataGridCell.columnName == 'id' || dataGridCell.columnName == 'salary')
            ? Alignment.centerRight
            : Alignment.centerLeft,
        padding: EdgeInsets.all(16.0),
        child: Text(dataGridCell.value.toString()),
      );
    }).toList());
  }
}

定义列

SfDataGrid(
  source: employeeDataSource,
  columns: <GridColumn>[
    GridColumn(
        columnName: 'id',
        label: Container(
            padding: EdgeInsets.all(16.0),
            alignment: Alignment.centerRight,
            child: Text('ID'))),
    GridColumn(
        columnName: 'name',
        label: Container(
            padding: EdgeInsets.all(16.0),
            alignment: Alignment.centerLeft,
            child: Text('Name'))),
    GridColumn(
        columnName: 'designation',
        width: 120,
        label: Container(
            padding: EdgeInsets.all(16.0),
            alignment: Alignment.centerLeft,
            child: Text('Designation'))),
    GridColumn(
        columnName: 'salary',
        label: Container(
            padding: EdgeInsets.all(16.0),
            alignment: Alignment.centerRight,
            child: Text('Salary'))),
  ],
)

完整示例代码

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

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

/// The application that contains datagrid on it.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Syncfusion DataGrid Demo',
      theme: ThemeData(useMaterial3: false),
      home: MyHomePage(),
    );
  }
}

/// The home page of the application which hosts the datagrid.
class MyHomePage extends StatefulWidget {
  /// Creates the home page.
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Employee> employees = <Employee>[];
  late EmployeeDataSource employeeDataSource;

  @override
  void initState() {
    super.initState();
    employees = getEmployeeData();
    employeeDataSource = EmployeeDataSource(employeeData: employees);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter DataGrid'),
      ),
      body: SfDataGrid(
        source: employeeDataSource,
        columnWidthMode: ColumnWidthMode.fill,
        columns: <GridColumn>[
          GridColumn(
              columnName: 'id',
              label: Container(
                  padding: EdgeInsets.all(16.0),
                  alignment: Alignment.center,
                  child: Text('ID'))),
          GridColumn(
              columnName: 'name',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text('Name'))),
          GridColumn(
              columnName: 'designation',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text(
                    'Designation',
                    overflow: TextOverflow.ellipsis,
                  ))),
          GridColumn(
              columnName: 'salary',
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text('Salary'))),
        ],
      ),
    );
  }

  List<Employee> getEmployeeData() {
    return [
      Employee(10001, 'James', 'Project Lead', 20000),
      Employee(10002, 'Kathryn', 'Manager', 30000),
      Employee(10003, 'Lara', 'Developer', 15000),
      Employee(10004, 'Michael', 'Designer', 15000),
      Employee(10005, 'Martin', 'Developer', 15000),
      Employee(10006, 'Newberry', 'Developer', 15000),
      Employee(10007, 'Balnc', 'Developer', 15000),
      Employee(10008, 'Perry', 'Developer', 15000),
      Employee(10009, 'Gable', 'Developer', 15000),
      Employee(10010, 'Grimes', 'Developer', 15000)
    ];
  }
}

/// Custom business object class which contains properties to hold the detailed
/// information about the employee which will be rendered in datagrid.
class Employee {
  /// Creates the employee class with required details.
  Employee(this.id, this.name, this.designation, this.salary);

  /// Id of an employee.
  final int id;

  /// Name of an employee.
  final String name;

  /// Designation of an employee.
  final String designation;

  /// Salary of an employee.
  final int salary;
}

/// An object to set the employee collection data source to the datagrid. This
/// is used to map the employee data to the datagrid widget.
class EmployeeDataSource extends DataGridSource {
  /// Creates the employee data source class with required details.
  EmployeeDataSource({required List<Employee> employeeData}) {
    _employeeData = employeeData
        .map<DataGridRow>((e) => DataGridRow(cells: [
              DataGridCell<int>(columnName: 'id', value: e.id),
              DataGridCell<String>(columnName: 'name', value: e.name),
              DataGridCell<String>(
                  columnName: 'designation', value: e.designation),
              DataGridCell<int>(columnName: 'salary', value: e.salary),
            ]))
        .toList();
  }

  List<DataGridRow> _employeeData = [];

  @override
  List<DataGridRow> get rows => _employeeData;

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((e) {
      return Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(8.0),
        child: Text(e.value.toString()),
      );
    }).toList());
  }
}

支持与反馈

如果您有任何问题，可以联系Syncfusion® 支持团队或在社区论坛发帖。您也可以通过我们的反馈门户提交功能请求或错误报告。

希望这个指南能帮助您更好地理解和使用Syncfusion Flutter DataGrid！


更多关于Flutter数据网格展示插件syncfusion_flutter_datagrid的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter数据网格展示插件syncfusion_flutter_datagrid的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用syncfusion_flutter_datagrid插件来展示数据网格的示例代码。这个示例将展示如何设置一个基本的DataGrid，包括如何加载数据、设置列以及处理一些基本的样式和配置。

首先，确保你已经在pubspec.yaml文件中添加了syncfusion_flutter_datagrid依赖：

dependencies:
  flutter:
    sdk: flutter
  syncfusion_flutter_datagrid: ^x.y.z  # 替换为最新版本号

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

接下来，在你的Flutter项目中创建一个新的Dart文件（例如main.dart），并添加以下代码：

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter DataGrid Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DataGridExample(),
    );
  }
}

class DataGridExample extends StatefulWidget {
  @override
  _DataGridExampleState createState() => _DataGridExampleState();
}

class _DataGridExampleState extends State<DataGridExample> {
  final List<Map<String, Object>> _dataSource = [
    {'OrderID': 10248, 'CustomerID': 'VINET', 'OrderDate': '1996-07-04'},
    {'OrderID': 10249, 'CustomerID': 'TOMSP', 'OrderDate': '1996-07-05'},
    {'OrderID': 10250, 'CustomerID': 'HANAR', 'OrderDate': '1996-07-08'},
    // 可以添加更多数据
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DataGrid Example'),
      ),
      body: SfDataGrid(
        source: _dataSource,
        columns: <GridColumn>[
          GridColumn(
            columnName: 'OrderID',
            label: Container(
              child: Text('Order ID'),
            ),
            width: 120,
          ),
          GridColumn(
            columnName: 'CustomerID',
            label: Container(
              child: Text('Customer ID'),
            ),
            width: 150,
          ),
          GridColumn(
            columnName: 'OrderDate',
            label: Container(
              child: Text('Order Date'),
            ),
            width: 180,
            formatter: (columnIndex, rowIndex, value) {
              // 格式化日期显示
              return DateTime.parse(value.toString()).toLocaleDateString();
            },
          ),
        ],
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个MyApp小部件作为应用的根。
  2. DataGridExample是一个有状态的小部件，它包含了一个数据源_dataSource，这是一个包含订单信息的列表。
  3. 在DataGridExample的build方法中，我们创建了一个Scaffold，并在其body中放置了一个SfDataGrid。
  4. SfDataGrid的source属性被设置为我们的数据源_dataSource。
  5. 我们定义了三个列：OrderID、CustomerID和OrderDate，并为每个列设置了标签和宽度。
  6. 对于OrderDate列，我们还设置了一个formatter函数来格式化日期显示。

运行这个示例，你将看到一个包含订单信息的DataGrid。你可以根据需要进一步自定义和扩展这个示例，例如添加更多的列、设置列的排序、过滤等功能。

注意：由于Syncfusion的插件是商业产品，你可能需要注册并获取许可证密钥，以便在生产环境中使用它的完整功能。确保遵守Syncfusion的许可协议。

回到顶部