Flutter文本表格生成插件text_table的使用
Flutter 文本表格生成插件 text_table 的使用
text_table 插件可以用来生成可自定义样式的 ASCII 表格。下面是 text_table 的使用方法及一些示例。
特性
- 可自定义表格边框样式
- 支持多行单元格
- 可控制列宽
- 最小和最大列宽
- 灵活的列宽
- 百分比列宽
- 单元格内文本对齐
- 单元格内边距
TODO
- ❌ 合并单元格
- ❌ 文本截断和省略号
使用方法
简单示例
import 'package:text_table/text_table.dart';
void main() {
final tab = TableRenderer().render([
['Messi', 'Barcelona FC', 80],
['Christiano Ronaldo', 'Real Madrid', 30],
['Luiz Suarez', 'Barcelona FC', 50]
], columns: [
'Player',
'Team',
'Goals'
]);
print(tab);
}
生成的表格如下：
┌──────────────────┬────────────┬─────┐
│ Player │ Team │Goals│
┝━━━━━━━━━━━━━━━━━━┿━━━━━━━━━━━━┿━━━━━┥
│Messi │Barcelona FC│80 │
├──────────────────┼────────────┼─────┤
│Christiano Ronaldo│Real Madrid │30 │
├──────────────────┼────────────┼─────┤
│Luiz Suarez │Barcelona FC│50 │
└──────────────────┴────────────┴─────┘
文本对齐
final tab = TableRenderer().render([
['Messi', 'Barcelona FC', 80],
['Christiano Ronaldo', 'Real Madrid', 30],
['Luiz Suarez', 'Barcelona FC', 50]
], columns: [
ColSpec(name: 'Player', width: Fixed(25), align: Align.left),
ColSpec(name: 'Team', width: Fixed(25), align: Align.center),
ColSpec(name: 'Goals', width: Fixed(10), align: Align.right)
]);
print(tab);
生成的表格如下：
┌─────────────────────────┬─────────────────────────┬──────────┐
│ Player │ Team │ Goals │
┝━━━━━━━━━━━━━━━━━━━━━━━━━┿━━━━━━━━━━━━━━━━━━━━━━━━━┿━━━━━━━━━━┥
│Messi │ Barcelona FC │ 80│
├─────────────────────────┼─────────────────────────┼──────────┤
│Christiano Ronaldo │ Real Madrid │ 30│
├─────────────────────────┼─────────────────────────┼──────────┤
│Luiz Suarez │ Barcelona FC │ 50│
└─────────────────────────┴─────────────────────────┴──────────┘
边距设置
import 'package:text_table/text_table.dart';
void main() {
final tab = TableRenderer(padding: Padding.same(1)).render([
['Messi', 'Barcelona FC', 80],
['Christiano Ronaldo', 'Real Madrid', 30],
['Luiz Suarez', 'Barcelona FC', 50]
], columns: [
'Player',
'Team',
ColSpec(name: 'Goals', padding: Padding.same(2)),
]);
print(tab);
}
生成的表格如下：
┌────────────────────┬──────────────┬─────────┐
│ Player │ Team │ Goals │
┝━━━━━━━━━━━━━━━━━━━━┿━━━━━━━━━━━━━━┿━━━━━━━━━┥
│ Messi │ Barcelona FC │ 80 │
├────────────────────┼──────────────┼─────────┤
│ Christiano Ronaldo │ Real Madrid │ 30 │
├────────────────────┼──────────────┼─────────┤
│ Luiz Suarez │ Barcelona FC │ 50 │
└────────────────────┴──────────────┴─────────┘
灵活列宽
import 'package:text_table/text_table.dart';
void main() {
final tab = TableRenderer(padding: Padding.same(2)).render([
['Messi', 'Barcelona FC', 80],
['Christiano Ronaldo', 'Real Madrid', 30],
['Luiz Suarez', 'Barcelona FC', 50]
], columns: [
ColSpec(name: 'Player', width: Flex(2)),
ColSpec(name: 'Team', width: Flex(1), minWidth: Fixed(15)),
ColSpec(name: 'Goals', width: Flex(1), align: Align.right)
], width: 50);
print(tab);
}
生成的表格如下：
┌─────────────────┬───────────────────┬──────────┐
│ Player │ Team │ Goals │
┝━━━━━━━━━━━━━━━━━┿━━━━━━━━━━━━━━━━━━━┿━━━━━━━━━━┥
│ Messi │ Barcelona FC │ 80 │
├─────────────────┼───────────────────┼──────────┤
│ Christiano Ro │ Real Madrid │ 30 │
│ naldo │ │ │
├─────────────────┼───────────────────┼──────────┤
│ Luiz Suarez │ Barcelona FC │ 50 │
└─────────────────┴───────────────────┴──────────┘
自定义边框样式
可以使用 border 字段来自定义表格的边框样式。
双线边框
final tab = TableRenderer(border: Border.doubleLines)
.render(rows, columns: columns);
print(tab);
生成的表格如下：
╔══════════════════╤════════════╤═════╗
║ Player │ Team │Goals║
╠══════════════════╪════════════╪═════╣
║Messi │Barcelona FC│80 ║
╟──────────────────┼────────────┼─────╢
║Christiano Ronaldo│Real Madrid │30 ║
╟──────────────────┼────────────┼─────╢
║Luiz Suarez │Barcelona FC│50 ║
╚══════════════════╧════════════╧═════╝
紧凑边框
final tab =
TableRenderer(border: Border.compact).render(rows, columns: columns);
print(tab);
生成的表格如下：
Player Team Goals
-------------------------------------
Messi Barcelona FC 80
Christiano Ronaldo Real Madrid 30
Luiz Suarez Barcelona FC 50
圆角边框
final tab =
TableRenderer(border: Border.round).render(rows, columns: columns);
print(tab);
生成的表格如下：
╭──────────────────┬────────────┬─────╮
│ Player │ Team │Goals│
┝━━━━━━━━━━━━━━━━━━┿━━━━━━━━━━━━┿━━━━━┥
│Messi │Barcelona FC│80 │
├──────────────────┼────────────┼─────┤
│Christiano Ronaldo│Real Madrid │30 │
├──────────────────┼────────────┼─────┤
│Luiz Suarez │Barcelona FC│50 │
╰──────────────────┴────────────┴─────╯
更多关于Flutter文本表格生成插件text_table的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter文本表格生成插件text_table的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
text_table 是一个用于在 Flutter 中生成文本表格的插件。它可以帮助开发者以简单的方式生成格式化的文本表格，适用于控制台输出或其他文本展示场景。下面是如何使用 text_table 插件的详细步骤。
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 text_table 插件的依赖：
dependencies:
flutter:
sdk: flutter
text_table: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get 来安装依赖。
2. 导入包
在你的 Dart 文件中导入 text_table 包：
import 'package:text_table/text_table.dart';
3. 创建表格
使用 TextTable 类来创建表格。你需要定义表格的列和行数据。
定义列
列可以通过 TableColumn 类来定义，每个列可以指定标题、对齐方式等属性。
final columns = [
TableColumn(title: 'ID', alignment: Alignment.center),
TableColumn(title: 'Name', alignment: Alignment.left),
TableColumn(title: 'Age', alignment: Alignment.center),
];
定义行数据
行数据是一个列表，每个元素对应一行的数据。
final rows = [
['1', 'Alice', '23'],
['2', 'Bob', '30'],
['3', 'Charlie', '25'],
];
生成表格
使用 TextTable 类的 generate 方法来生成表格。
final table = TextTable(
columns: columns,
rows: rows,
);
print(table);
4. 自定义表格样式
你可以通过 TextTable 的构造函数参数来自定义表格的样式，例如边框、分隔符等。
final table = TextTable(
columns: columns,
rows: rows,
border: Border.all(color: BorderColor.blue),
headerStyle: TextStyle(bold: true, color: TextColor.red),
rowSeparator: RowSeparator.dash,
);
print(table);
5. 完整示例
以下是一个完整的示例，展示如何使用 text_table 插件生成并打印一个表格。
import 'package:text_table/text_table.dart';
void main() {
final columns = [
TableColumn(title: 'ID', alignment: Alignment.center),
TableColumn(title: 'Name', alignment: Alignment.left),
TableColumn(title: 'Age', alignment: Alignment.center),
];
final rows = [
['1', 'Alice', '23'],
['2', 'Bob', '30'],
['3', 'Charlie', '25'],
];
final table = TextTable(
columns: columns,
rows: rows,
border: Border.all(color: BorderColor.blue),
headerStyle: TextStyle(bold: true, color: TextColor.red),
rowSeparator: RowSeparator.dash,
);
print(table);
}
6. 输出结果
运行上述代码后，你将看到如下格式的表格输出：
+----+---------+-----+
| ID | Name | Age |
+----+---------+-----+
| 1 | Alice | 23 |
| 2 | Bob | 30 |
| 3 | Charlie | 25 |
+----+---------+-----+