Flutter Excel表格展示插件flutter_excel_table的使用
Flutter Excel表格展示插件flutter_excel_table的使用
flutter_excel_table
添加依赖到您的项目
dependencies:
flutter:
sdk: flutter
flutter_excel_table: ^latestVersion
安装
$ flutter pub get
导入
import 'package:flutter_excel_table/flutter_excel_table.dart';
更改日志
使用
FlutterExcelWidget<ExcelExampleModel>(
excel: ExcelModel(
x: 16,
y: 16,
showSn: true,
backgroundColor: Colors.white,
rowColor: Colors.blue.withOpacity(.25),
positionColor: (int x, int y) => y % 2 == 0,
),
items: [
ExcelItemModel(
position: ExcelPosition(5, 3),
value: ExcelExampleModel(value: '合并2222'),
color: Colors.cyan,
textAlign: TextAlign.end,
isReadOnly: true,
isMergeCell: true,
style: const TextStyle(fontSize: 12, color: Colors.amberAccent),
positions: [
ExcelPosition(5, 3),
ExcelPosition(5, 4),
ExcelPosition(6, 3),
ExcelPosition(6, 4),
ExcelPosition(7, 3),
ExcelPosition(7, 4),
],
),
ExcelItemModel(
position: ExcelPosition(0, 0),
value: ExcelExampleModel(value: '10'),
isReadOnly: true,
),
ExcelItemModel(
position: ExcelPosition(0, 1),
value: ExcelExampleModel(value: '100'),
inputType: ExcelInputType.date,
),
],
onItemClicked: (items, item) {},
onItemChanged: (items, item, value) {},
)
示例
示例-1
示例-2
示例-3
示例-4
示例代码
import 'package:flutter/material.dart';
import 'package:flutter_excel_table/flutter_excel_table.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomeScene(),
);
}
}
class HomeScene extends StatelessWidget {
const HomeScene({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Excel Demo'),
),
body: ListView(
children: [
_buildItem(
context,
'Example-1',
ExcelModel(
x: 16,
y: 36,
showSn: true,
backgroundColor: Colors.white,
rowColor: Colors.blue.withOpacity(.25),
positionColor: (int x, int y) => y % 2 == 0,
),
[
ExcelItemModel(
position: ExcelPosition(0, 0),
value: ExcelExampleModel(value: '10'),
isReadOnly: true,
),
ExcelItemModel(
position: ExcelPosition(0, 1),
value: ExcelExampleModel(value: '100'),
inputType: ExcelInputType.date,
),
ExcelItemModel(
position: ExcelPosition(0, 2),
value: ExcelExampleModel(value: '1000'),
inputType: ExcelInputType.integer,
),
ExcelItemModel(
position: ExcelPosition(0, 3),
value: ExcelExampleModel(value: '10000'),
inputType: ExcelInputType.float,
),
ExcelItemModel(
position: ExcelPosition(0, 4),
value: ExcelExampleModel(value: '2023-01-01'),
isReadOnly: true,
),
ExcelItemModel(
position: ExcelPosition(0, 5),
value: ExcelExampleModel(
value: '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ'),
maxLine: 4,
isReadOnly: true,
),
],
),
_buildItem(
context,
'Example-2',
ExcelModel(
x: 18,
y: 16,
showSn: false,
backgroundColor: Colors.white,
rowColor: Colors.blue.withOpacity(.25),
positionColor: (int x, int y) => y % 2 == 0,
rowHeight: (y) => y == 2 ? 100 : 36,
columnWidth: (x) => x % 2 == 0 ? 120 : 80,
),
[
ExcelItemModel(
position: ExcelPosition(3, 0),
value: ExcelExampleModel(value: '合并1'),
color: Colors.red,
textAlign: TextAlign.center,
isReadOnly: true,
isMergeCell: true,
positions: [
ExcelPosition(3, 0),
ExcelPosition(3, 1),
ExcelPosition(3, 2),
ExcelPosition(4, 0),
ExcelPosition(4, 1),
ExcelPosition(4, 2),
],
),
ExcelItemModel(
position: ExcelPosition(5, 3),
value: ExcelExampleModel(value: '合并2222'),
color: Colors.cyan,
textAlign: TextAlign.end,
isReadOnly: true,
isMergeCell: true,
style: const TextStyle(fontSize: 12, color: Colors.amberAccent),
positions: [
ExcelPosition(5, 3),
ExcelPosition(5, 4),
ExcelPosition(6, 3),
ExcelPosition(6, 4),
ExcelPosition(7, 3),
ExcelPosition(7, 4),
],
),
ExcelItemModel(
position: ExcelPosition(0, 0),
value: ExcelExampleModel(value: '10'),
isReadOnly: true,
),
ExcelItemModel(
position: ExcelPosition(0, 1),
value: ExcelExampleModel(value: '100'),
inputType: ExcelInputType.date,
),
ExcelItemModel(
position: ExcelPosition(0, 2),
value: ExcelExampleModel(value: '1000'),
inputType: ExcelInputType.integer,
),
ExcelItemModel(
position: ExcelPosition(0, 3),
value: ExcelExampleModel(value: '10000'),
inputType: ExcelInputType.float,
),
ExcelItemModel(
position: ExcelPosition(0, 4),
value: ExcelExampleModel(value: '2023-01-01'),
isReadOnly: true,
),
ExcelItemModel(
position: ExcelPosition(0, 5),
value: ExcelExampleModel(
value: '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ'),
maxLine: 4,
isReadOnly: true,
),
],
),
_buildItem(
context,
'Example-3',
ExcelModel(
x: 18,
y: 16,
showSn: true,
backgroundColor: Colors.white,
rowColor: Colors.blue.withOpacity(.25),
neighborColors: [
Colors.red,
Colors.orange,
],
noNeighborColorPositions: [
ExcelPosition(1, 0),
ExcelPosition(1, 1),
ExcelPosition(1, 2),
ExcelPosition(1, 3),
ExcelPosition(1, 4),
ExcelPosition(1, 5),
],
),
[
ExcelItemModel(
position: ExcelPosition(3, 0),
value: ExcelExampleModel(value: '合并1'),
color: Colors.green,
textAlign: TextAlign.center,
isReadOnly: true,
isMergeCell: true,
positions: [
ExcelPosition(3, 0),
ExcelPosition(3, 1),
ExcelPosition(3, 2),
ExcelPosition(4, 0),
ExcelPosition(4, 1),
ExcelPosition(4, 2),
],
),
ExcelItemModel(
position: ExcelPosition(5, 3),
value: ExcelExampleModel(value: '合并2222'),
color: Colors.cyan,
textAlign: TextAlign.end,
isReadOnly: true,
isMergeCell: true,
style: const TextStyle(fontSize: 12, color: Colors.amberAccent),
positions: [
ExcelPosition(5, 3),
ExcelPosition(5, 4),
ExcelPosition(6, 3),
ExcelPosition(6, 4),
ExcelPosition(7, 3),
ExcelPosition(7, 4),
],
),
ExcelItemModel(
position: ExcelPosition(0, 0),
value: ExcelExampleModel(value: '10'),
isReadOnly: true,
),
ExcelItemModel(
position: ExcelPosition(0, 1),
value: ExcelExampleModel(value: '100'),
inputType: ExcelInputType.date,
),
ExcelItemModel(
position: ExcelPosition(0, 2),
value: ExcelExampleModel(value: '1000'),
inputType: ExcelInputType.integer,
),
ExcelItemModel(
position: ExcelPosition(0, 3),
value: ExcelExampleModel(value: '10000'),
inputType: ExcelInputType.float,
),
ExcelItemModel(
position: ExcelPosition(0, 4),
value: ExcelExampleModel(value: '2023-01-01'),
isReadOnly: true,
),
ExcelItemModel(
position: ExcelPosition(0, 5),
value: ExcelExampleModel(
value: '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ'),
maxLine: 4,
isReadOnly: true,
),
],
),
_buildItem(
context,
'Example-4',
ExcelModel(
x: 5,
y: 5,
showSn: true,
backgroundColor: Colors.white,
rowColor: Colors.blue.withOpacity(.25),
alignment: Alignment.centerRight,
),
[
ExcelItemModel(
position: ExcelPosition(0, 0),
value: ExcelExampleModel(value: '10'),
builder: () => const Icon(
Icons.ac_unit,
size: 10,
color: Colors.purple,
),
isReadOnly: true,
),
],
),
],
),
);
}
Widget _buildItem(BuildContext context, String title, ExcelModel excel, List<ExcelItemModel<ExcelExampleModel>> items) {
return ListTile(
title: Text(title),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => ExampleScene(
title: title,
excel: excel,
items: items,
),
),
);
},
);
}
}
class ExampleScene extends StatelessWidget {
final String? title;
final ExcelModel excel;
final List<ExcelItemModel<ExcelExampleModel>> items;
const ExampleScene({
Key? key,
this.title,
required this.excel,
this.items = const [],
}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title ?? 'Excel Example'),
),
body: FlutterExcelWidget<ExcelExampleModel>(
excel: excel,
items: items,
onItemClicked: (items, item) {},
onItemChanged: (items, item, value) {},
),
);
}
}
class ExcelExampleModel extends ExcelItemImp {
ExcelExampleModel({super.value});
}
更多关于Flutter Excel表格展示插件flutter_excel_table的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter Excel表格展示插件flutter_excel_table的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter应用中使用flutter_excel_table插件来展示Excel表格的示例代码。首先，请确保您已经在pubspec.yaml文件中添加了flutter_excel_table依赖：
dependencies:
flutter:
sdk: flutter
flutter_excel_table: ^最新版本号 # 请替换为实际的最新版本号
然后，运行flutter pub get来安装依赖。
接下来，我们来看一个完整的示例代码，展示如何使用flutter_excel_table来展示Excel表格数据。
示例代码
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_excel_table/flutter_excel_table.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Excel Table Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 示例Excel数据
List<List<dynamic>> excelData = [
['Name', 'Age', 'Email'],
['Alice', 30, 'alice@example.com'],
['Bob', 25, 'bob@example.com'],
['Charlie', 35, 'charlie@example.com'],
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Excel Table Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: ExcelTable(
data: excelData,
header: true, // 显示表头
columnWidths: {
0: 150, // 第一列的宽度
1: 100, // 第二列的宽度
2: 200, // 第三列的宽度
},
rowHeights: {
0: 50, // 第一行的高度（表头行）
1: 40, // 后续行的高度可以根据需要调整
},
border: TableBorder.all(color: Colors.black, width: 1.0),
headerDecoration: BoxDecoration(
color: Colors.grey[300],
),
cellDecoration: (row, col) {
// 根据行列索引自定义单元格装饰
if (row % 2 == 0) {
return BoxDecoration(color: Colors.grey[100]);
}
return null;
},
),
),
);
}
}
代码说明
- 依赖导入：首先，我们在
pubspec.yaml文件中添加了flutter_excel_table依赖。 - 数据准备：在
_MyHomePageState类中，我们准备了一个示例的Excel数据excelData，它是一个二维列表，每个子列表代表一行数据。 - UI构建：在
build方法中，我们使用Scaffold和Padding来构建UI，并在其中嵌入了ExcelTable组件。 - ExcelTable配置：
data：传入Excel数据。header：是否显示表头。columnWidths：设置各列的宽度。rowHeights：设置各行的高度。border：设置表格边框。headerDecoration：设置表头的装饰，这里我们使用了灰色背景。cellDecoration：根据行列索引自定义单元格装饰，这里我们简单地实现了隔行换色效果。
运行这个示例代码，您将看到一个简单的Excel表格展示在Flutter应用中。您可以根据实际需求进一步定制表格的样式和功能。
