Flutter表格展示插件table_plus的使用

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

Flutter表格展示插件table_plus的使用

开始使用

table_plus 插件支持表格搜索和CSV导出功能。

获取开始

本项目是一个 Flutter 的插件包,包含针对 Android、iOS 和 Web 平台的特定实现代码。

若要开始使用 Flutter,请查阅官方文档,其中包含了教程、示例、移动开发指南和完整的 API 参考。

联系我们

如有任何问题,可联系以下邮箱:

解决的问题

  1. 默认数据表无搜索功能: 默认的数据表仅包含升序和降序排序,需要单独实现搜索功能。即使实现了,也不支持按列搜索。 为了解决这个问题,我们创建了一个名为 Table Plus 的插件。

  2. 缺少导出选项: 目前可用的数据表和其他数据表插件不包含导出功能。 为了解决这个问题,我们在同一个插件中添加了导出功能。

插件详情

table_plus 插件提供了用户自定义的搜索控制器,并且实现了搜索功能。

除了搜索功能外,还提供了导出选项,可以将表格导出为 CSV 文件。

此插件允许每个列进行独立搜索,通过布尔变量 isSearchEnabled 来启用或禁用搜索功能。

搜索结果会根据行进行映射。

可以启用或禁用搜索栏在界面中的显示。

提供了导出选项,可以将表格导出为 Excel 格式。

这些功能目前适用于三个平台:ANDROID、iOS 和 WEB。

截图

Android

Android

iOS

iOS

Web

Web

Web with Search Functionality

Web with Search Functionality

完整示例代码

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var searchNameList = <dynamic>[];
  final bool isSearchEnabled = true;
  List<Widget> searchCtrl = [];
  List<String> tableHeading = [];

  List<DataColumn> dataColumnValues() {
    List<DataColumn> values = [];
    for (var i = 0; i < tableHeading.length; i++) {
      values.add(DataColumn(
        label: Container(
          margin: isSearchEnabled
              ? const EdgeInsets.only(top: 25.0, bottom: 20.0)
              : null,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text(
                tableHeading[i],
                style: const TextStyle(color: Colors.black),
              ),
              isSearchEnabled ? searchCtrl[i] : Container(),
            ],
          ),
        ),
        numeric: false,
      ));
    }
    return values;
  }

  List<DataRow> dataRowsValues() {
    return searchNameList
        .map(
          (objData) => DataRow(
            cells: [
              DataCell(
                Text(objData.firstName),
                showEditIcon: false,
                placeholder: false,
              ),
              DataCell(
                Text(objData.lastName),
                showEditIcon: false,
                placeholder: false,
              ),
              DataCell(
                Text(objData.age.toString()),
                showEditIcon: false,
                placeholder: false,
              ),
              DataCell(
                Text(objData.mobileNumber.toString()),
                showEditIcon: false,
                placeholder: false,
              )
            ],
          ),
        )
        .toList();
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    searchNameList = names;
    tableHeading.clear();
    tableHeading.add("First Name");
    tableHeading.add("Second Name");
    tableHeading.add("Age");
    tableHeading.add("Mobile Number");

    for (var index = 0; index < tableHeading.length; index++) {
      searchCtrl.add(CustomSearchTextFieldWidget(
        onChangedFunctions:
            (String value, TextEditingController controller, int position) {
          List<dynamic> searchList = [];

          if (value.isNotEmpty) {
            searchList.clear();
            for (int i = 0; i < names.length; i++) {
              if (index == 0 || index == 1) {
                String data =
                    index == 0 ? names[i].firstName : names[i].lastName;
                Name nameData = names[i];
                if (data.toLowerCase().contains(value.toLowerCase())) {
                  searchList.add(nameData);
                }
              } else if (index == 2) {
                int age = names[i].age;
                Name nameData = names[i];
                if (age.toString().contains(value)) {
                  searchList.add(nameData);
                }
              } else if (index == 3) {
                int mobileNumber = names[i].mobileNumber;
                Name nameData = names[i];
                if (mobileNumber.toString().contains(value)) {
                  searchList.add(nameData);
                }
              }
            }
            setState(() {
              searchNameList = searchList;
            });
          } else {
            setState(() {
              searchNameList = names;
            });
          }
        },
        index: index,
      ));
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          title: const Text('Table Plus Plugin'),
        ),
        body: TablePlus(
          exportFileName: "MyTableFile",
          tabelHeadingList: tableHeading,
          isExportCSVEnabled: true,
          columnSpacing: 60,
          sortColumnIndex: 1,
          isSearchEnabled: isSearchEnabled,
          rows: dataRowsValues(),
          columns: dataColumnValues(),
          dataValues: names,
          shareWidget: Container(
              color: Colors.blue,
              padding: const EdgeInsets.all(10.0),
              child: const Text(
                'Export',
                style: TextStyle(color: Colors.white),
              )),
        ),
      ),
    );
  }

  var names = [
    Name(
        firstName: "Aakav",
        lastName: "Kumar",
        age: 22,
        mobileNumber: 9087694590),
    Name(
        firstName: "Aakash",
        lastName: "Tewari",
        age: 23,
        mobileNumber: 9994628319),
    Name(
        firstName: "Rohan",
        lastName: "Singh",
        age: 24,
        mobileNumber: 99524018412),
  ];
}

class Name {
  String firstName;
  String lastName;
  int age;
  int mobileNumber;

  Name({
    required this.firstName,
    required this.lastName,
    required this.age,
    required this.mobileNumber,
  });
}

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

1 回复

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


当然,以下是一个关于如何在Flutter中使用table_plus插件来展示表格的示例代码。table_plus是一个功能强大的Flutter表格插件,它允许开发者以灵活和自定义的方式展示数据。

首先,确保你已经在pubspec.yaml文件中添加了table_plus的依赖:

dependencies:
  flutter:
    sdk: flutter
  table_plus: ^2.0.0  # 请检查最新版本号

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

接下来是一个完整的示例代码,展示了如何使用table_plus来创建一个简单的表格:

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

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

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

class MyHomePage extends StatelessWidget {
  final List<Map<String, dynamic>> data = [
    {'Name': 'Alice', 'Age': 30, 'Occupation': 'Engineer'},
    {'Name': 'Bob', 'Age': 25, 'Occupation': 'Designer'},
    {'Name': 'Charlie', 'Age': 35, 'Occupation': 'Teacher'},
  ];

  final List<String> columns = ['Name', 'Age', 'Occupation'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Table Plus Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TablePlus(
          columnWidths: {
            0: FlexColumnWidth(flex: 2), // Name column takes up more space
            1: FlexColumnWidth(flex: 1), // Age column takes up less space
            2: FlexColumnWidth(flex: 2), // Occupation column takes up more space
          },
          border: TableBorder.all(color: Colors.black, width: 1.0),
          header: TableHeader(
            decoration: BoxDecoration(
              color: Colors.grey[200],
            ),
            children: columns.map((column) {
              return TableCell(
                child: Center(
                  child: Text(
                    column,
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
              );
            }).toList(),
          ),
          rows: data.map((rowData) {
            return TableRow(
              children: columns.map((column) {
                final value = rowData[column];
                return TableCell(
                  child: Center(
                    child: Text(
                      value.toString(),
                    ),
                  ),
                );
              }).toList(),
            );
          }).toList(),
        ),
      ),
    );
  }
}

代码说明:

  1. 数据准备

    • data列表包含了表格的数据,每个元素是一个包含NameAgeOccupation键的Map
    • columns列表包含了表格的列名。
  2. 表格配置

    • columnWidths:配置每列的宽度,这里使用了FlexColumnWidth来按比例分配宽度。
    • border:设置表格的边框,这里使用了TableBorder.all来添加统一的边框。
    • header:配置表头,使用了TableHeaderTableCell来定义表头的样式和内容。
    • rows:根据data列表生成表格的行,每行包含多个TableCell,每个TableCell中显示对应的数据。
  3. 布局

    • 使用ScaffoldAppBar来创建应用的布局和导航栏。
    • 使用Padding来添加内边距,使表格内容不紧贴屏幕边缘。

这个示例展示了如何使用table_plus插件来创建一个简单的表格,并自定义列宽、边框和表头。你可以根据需要进一步自定义表格的样式和功能。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!