Flutter实现自己的表格组件

表格组件最终效果如下：

整个表格的数据为一个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),
    );
  }
}