Flutter表格展示插件table_plus的使用
Flutter表格展示插件table_plus的使用
开始使用
table_plus
插件支持表格搜索和CSV导出功能。
获取开始
本项目是一个 Flutter 的插件包,包含针对 Android、iOS 和 Web 平台的特定实现代码。
若要开始使用 Flutter,请查阅官方文档,其中包含了教程、示例、移动开发指南和完整的 API 参考。
联系我们
如有任何问题,可联系以下邮箱:
解决的问题
-
默认数据表无搜索功能: 默认的数据表仅包含升序和降序排序,需要单独实现搜索功能。即使实现了,也不支持按列搜索。 为了解决这个问题,我们创建了一个名为
Table Plus
的插件。 -
缺少导出选项: 目前可用的数据表和其他数据表插件不包含导出功能。 为了解决这个问题,我们在同一个插件中添加了导出功能。
插件详情
table_plus
插件提供了用户自定义的搜索控制器,并且实现了搜索功能。
除了搜索功能外,还提供了导出选项,可以将表格导出为 CSV 文件。
此插件允许每个列进行独立搜索,通过布尔变量 isSearchEnabled
来启用或禁用搜索功能。
搜索结果会根据行进行映射。
可以启用或禁用搜索栏在界面中的显示。
提供了导出选项,可以将表格导出为 Excel 格式。
这些功能目前适用于三个平台:ANDROID、iOS 和 WEB。
截图
Android
iOS
Web
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
更多关于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(),
),
),
);
}
}
代码说明:
-
数据准备:
data
列表包含了表格的数据,每个元素是一个包含Name
、Age
和Occupation
键的Map
。columns
列表包含了表格的列名。
-
表格配置:
columnWidths
:配置每列的宽度,这里使用了FlexColumnWidth
来按比例分配宽度。border
:设置表格的边框,这里使用了TableBorder.all
来添加统一的边框。header
:配置表头,使用了TableHeader
和TableCell
来定义表头的样式和内容。rows
:根据data
列表生成表格的行,每行包含多个TableCell
,每个TableCell
中显示对应的数据。
-
布局:
- 使用
Scaffold
和AppBar
来创建应用的布局和导航栏。 - 使用
Padding
来添加内边距,使表格内容不紧贴屏幕边缘。
- 使用
这个示例展示了如何使用table_plus
插件来创建一个简单的表格,并自定义列宽、边框和表头。你可以根据需要进一步自定义表格的样式和功能。