表格组件最终效果如下:
整个表格的数据为一个List<List<TableDetail>> tableList
每一行的数据为一个List<TableDetail> list
表格的数据实体类:
class TableDetail {
String title, content;
TableDetail(String title, String content) {
this.title = title;
this.content = content;
}
}
生成表格数据:
List<TableDetail> list1 = [TableDetail('姓名', '张三')];
List<TableDetail> list2 = [TableDetail('性别', '男'), TableDetail('年龄', '30')];
List<TableDetail> list3 = [TableDetail('企业名称', '艾里巴巴')];
List<TableDetail> list4 = [TableDetail('部门', '技术部'), TableDetail('岗位/工种', '程序猿')];
List<TableDetail> list5 = [TableDetail('接触的职业病危害因素', '职业病危害因素1、职业病危害因素2、职业病危害因素3、职业病危害因素4、职业病危害因素5')];
List<TableDetail> list6 = [TableDetail('鉴定机构', '阿里巴爸爸巴巴巴')];
List<TableDetail> list7 = [TableDetail('鉴定日期', '2021年6月2日'), TableDetail('鉴定结论', 'xxxxxx')];
List<TableDetail> list8 = [TableDetail('报告出具日期', '2021年6月10日'), TableDetail('附件', 'xxxxxx'), TableDetail('附件2', 'xxxxxx2')];
tableList = [list1,list2,list3,list4,list5,list6,list7,list8];
使用的话就一行代码:
Container(
child: HiTable2(tableList),
),
然后看下HiTable的具体实现
import 'package:flutter/material.dart';
import 'package:pneum_app/component/hitable/table_mo.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
///表格组件
class HiTable2 extends StatefulWidget {
final List<List<TableDetail>> tableList;
const HiTable2(this.tableList);
@override
_HiTableState createState() => _HiTableState();
}
class _HiTableState extends State<HiTable2> {
List<List<TableDetail>> tableList = [];
@override
void initState() {
super.initState();
this.tableList = widget.tableList;
}
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(5),
child: Column(
children: [
_horizontalDivider(),//第一个根横线
Column(
children: tableList.map((child) {
return Column(
children: [Row(children: _children(child)), _horizontalDivider()],
);
}).toList())
],
));
}
_children(List<TableDetail> list) {
List<Widget> children = [];
List<Widget> children1 = list.map((tableDetail) {
return Expanded(
flex: 1,
child: Container(
child: Row(
children: [
_containerTitle(tableDetail.title),
_verticalDivider(),
_containerContent(tableDetail.content),
_verticalDivider(),
],
),
));
}).toList();
children.add(_verticalDivider());//添加一行当中第一个竖线
children.addAll(children1);
return children;
}
_containerTitle(String title) {
return Container(
padding: EdgeInsets.only(left: 2, right: 2),
alignment: Alignment.center,
width: 120.w,
child: Text(title, style: TextStyle(fontSize: 20.sp), textAlign: TextAlign.center),
);
}
_containerContent(String content) {
return Expanded(
child: Text(content,
style: TextStyle(fontSize: 20.sp),
textAlign: TextAlign.center,
maxLines: 3,
overflow: TextOverflow.ellipsis));
}
_verticalDivider() {
return Container(
width: 2.w,
height: 100.h,
decoration: BoxDecoration(color: Colors.red),
);
}
_horizontalDivider() {
return Container(
width: double.infinity,
height: 2.h,
decoration: BoxDecoration(color: Colors.red),
);
}
}