DataTable Flutter 中的列和行具有不同的样式

Question

我想使用数据表或表创建这样的表。但数据表对整个行和列进行装饰。并且表没有 margin 参数来添加之间的边距。

这是表代码：

return Table(
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,
      children: [
        TableRow(
          decoration: BoxDecoration(
            color: Color.fromRGBO(237, 239, 245, 1),
            borderRadius: BorderRadius.all(Radius.circular(8)),
          ),
          children: [
            headerItem("Name"),
            headerItem("Email"),
            headerItem("Video Courses"),
            headerItem("Webinar Courses"),
            headerItem("Total course view time"),
            headerItem("Progress", flex: 1),
            headerItem("Details", flex: 1),
          ],
        ),
        TableRow(
          decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(12), boxShadow: [AppShadow.simple]),
          children: [
            item(
              child: Row(
                children: [CircleAvatar(), Text("\t\t\tKristin Watson", style: AppTextStyle.cardTitle)],
              ),
            ),
            item(child: FittedBox(child: Text("dolores.chambers@example.com", style: AppTextStyle.body))),
            item(child: Text("3 Courses", style: AppTextStyle.body)),
            item(child: Text("7 Courses", style: AppTextStyle.body)),
            item(child: Text("Time Spent: 8:46:13", style: AppTextStyle.body)),
            item(
              child: Align(
                alignment: Alignment.centerLeft,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    CircularProgressIndicator(value: 0.7, color: Colors.green),
                    Text("34%", style: AppTextStyle.body.copyWith(color: Colors.green)),
                  ],
                ),
              ),
            ),
            item(child: Text("See Profile", style: AppTextStyle.textButtonPrimary)),
          ],
        ),
        TableRow(
          decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(12), boxShadow: [AppShadow.simple]),
          children: [
            item(
              child: Row(
                children: [CircleAvatar(), Text("\t\t\tKristin Watson", style: AppTextStyle.cardTitle)],
              ),
            ),
            item(child: FittedBox(child: Text("dolores.chambers@example.com", style: AppTextStyle.body))),
            item(child: Text("3 Courses", style: AppTextStyle.body)),
            item(child: Text("7 Courses", style: AppTextStyle.body)),
            item(child: Text("Time Spent: 8:46:13", style: AppTextStyle.body)),
            item(
              child: Align(
                alignment: Alignment.centerLeft,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    CircularProgressIndicator(value: 0.7, color: Colors.green),
                    Text("34%", style: AppTextStyle.body.copyWith(color: Colors.green)),
                  ],
                ),
              ),
            ),
            item(child: Text("See Profile", style: AppTextStyle.textButtonPrimary)),
          ],
        ),
      ],
    )

这是数据表代码：

DataTable(
        decoration: BoxDecoration(
          color: Colors.grey.shade100,
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(20),
        ),
        dataRowColor: MaterialStateProperty.all(Colors.white),
        columns: [
          DataColumn(label: Text("Num", style: AppTextStyle.tableItemHeader)),
          DataColumn(label: Text("Quiz Name", style: AppTextStyle.tableItemHeader)),
          DataColumn(label: Text("Lesson", style: AppTextStyle.tableItemHeader)),
          DataColumn(label: Text("Date", style: AppTextStyle.tableItemHeader)),
          DataColumn(label: Text("Details", style: AppTextStyle.tableItemHeader)),
        ],
        rows: [
          DataRow(
            cells: [
              DataCell(Text("07", style: AppTextStyle.tableItem)),
              DataCell(Text("Mid-Term Quiz", style: AppTextStyle.tableItem)),
              DataCell(Text("The art of  2D character design", style: AppTextStyle.tableItem)),
              DataCell(
                Row(
                  children: [
                    Image.asset("assets/calendar.png"),
                    SizedBox(width: 10),
                    Text("11/04/2020, 13:30 PM", style: AppTextStyle.tableItem),
                  ],
                ),
              ),
              DataCell(Image.asset("assets/menu_horizontal.png")),
            ],
          ),
        ],
      )

Answer 1

不幸的是，据我现在所知，每个TableRow/DataRow 都没有padding 或margin 设置。但您可以设置空 TableRow/DataRow 作为解决方法：

TableRow emptyRow(int columnCount, double rowHeight){
  return TableRow(
    children: List.generate(columnCount, (index) => SizedBox(height: rowHeight,),),
  );
}

您可以在表/数据表之外设置水平边距。

如果它仍然不能满足您的要求，您可能需要定制您的表格。