flutter datatable如何在列之间添加垂直边框

Question

我有一个如下所示的三列数据表，我想在所有列之间添加垂直边框分隔符、分隔线或任何名称（包括标题），这在颤振数据表中是否可用以及如何执行此操作？\n谢谢\nas旁注：我尝试了多个选项，但很难像 listview 或 json_table 包那样进行 minuplate

\n

 import 'package:flutter/material.dart';\n    import 'dart:math';\n    \n    import 'package:talab/helpers/constant_helper.dart';\n    \n    \n    class TablesPage extends StatefulWidget {\n      @override\n      TablesPageState createState() => TablesPageState();\n    }\n    \n    class TablesPageState extends State<TablesPage> {\n      // Generate a list of fiction prodcts\n      final List<Map> _products = List.generate(30, (i) {\n        return {"id": i, "name": "Product $i", "price": Random().nextInt(200) + 1};\n      });\n    \n      int _currentSortColumn = 0;\n      bool _isAscending = true;\n    \n      @override\n      Widget build(BuildContext context) {\n        return Scaffold(\n            appBar: AppBar(\n              title: Text('Kindacode.com'),\n            ),\n            body: Container(\n              width: double.infinity,\n              child: SingleChildScrollView(\n                child: DataTable(\n                  dividerThickness: 5,\n                  decoration: BoxDecoration(\n                      border:Border(\n                          right: Divider.createBorderSide(context, width: 5.0),\n                          left: Divider.createBorderSide(context, width: 5.0)\n                      ),\n                      color: AppColors.secondaryColor,\n                  ),\n                  showBottomBorder: true,\n                  sortColumnIndex: _currentSortColumn,\n                  sortAscending: _isAscending,\n                  headingRowColor: MaterialStateProperty.all(Colors.amber[200]),\n                  columns: [\n                    DataColumn(label: Text('\xd9\x83\xd9\x88\xd8\xaf \xd8\xa7\xd9\x84\xd8\xb7\xd9\x84\xd8\xa8')\n                    ),\n                    DataColumn(label: Text('\xd8\xa7\xd9\x84\xd8\xa7\xd8\xb4\xd8\xb9\xd8\xa7\xd8\xb1')),\n                    DataColumn(\n                        label: Text(\n                          '\xd8\xa7\xd9\x84\xd8\xaa\xd8\xa7\xd8\xb1\xd9\x8a\xd8\xae',\n                          style: TextStyle(\n                              color: Colors.blue, fontWeight: FontWeight.bold),\n                        ),),\n                  ],\n                  rows: _products.map((item) {\n                    return DataRow(cells: [\n                      DataCell(Text(item['id'].toString())),\n                      DataCell(Text(item['name'])),\n                      DataCell(Text(item['price'].toString()))\n                    ]);\n                  }).toList(),\n                ),\n              ),\n            ));\n      }\n    }\n

\n

Answer 1

正如其他人所建议的，添加垂直分隔线是一种解决方案。另一种方法是使用 DataTable 的内置边框，它为每个单元格添加边框。它的作用类似于装饰类中的边框。因此，使用您的代码示例，可以定义该表：

    DataTable(
        border: TableBorder.all(
            width: 5.0,
            color:AppColors.secondaryColor,
            dividerThickness: 5,

您可以删除代码中的所有其他边框。我相信这会给您带来您想要的外观。

Answer 2

DataTable调用中有一个默认属性border。要在列之间添加垂直分隔线，您可以像这样定义此属性：

border: const TableBorder(verticalInside: BorderSide(width: 1, style: BorderStyle.solid)),

TableBorder有关代码中使用的更多信息可在此处找到： https ://api.flutter.dev/flutter/rendering/TableBorder-class.html

Answer 3

作为变体，您可以使用 VerticalDivider 小部件。例如，定义垂直分隔线的道具

\n

  Widget _verticalDivider = const VerticalDivider(\n      color: Colors.black,\n      thickness: 1,\n  );\n

\n

并将其添加到标题列和单元格之间

\n

              columns: [\n                DataColumn(label: Text('\xd9\x83\xd9\x88\xd8\xaf \xd8\xa7\xd9\x84\xd8\xb7\xd9\x84\xd8\xa8')),\n                DataColumn(label: _verticalDivider),\n                DataColumn(label: Text('\xd8\xa7\xd9\x84\xd8\xa7\xd8\xb4\xd8\xb9\xd8\xa7\xd8\xb1')),\n                DataColumn(label: _verticalDivider),\n                DataColumn(\n                    label: Text(\n                      '\xd8\xa7\xd9\x84\xd8\xaa\xd8\xa7\xd8\xb1\xd9\x8a\xd8\xae',\n                      style: TextStyle(\n                          color: Colors.blue, fontWeight: FontWeight.bold),\n                    ),),\n              ],\n              rows: _products.map((item) {\n                return DataRow(cells: [\n                  DataCell(Text(item['id'].toString())),\n                  DataCell(_verticalDivider),\n                  DataCell(Text(item['name'])),\n                  DataCell(_verticalDivider),\n                  DataCell(Text(item['price'].toString()))\n                ]);\n              }).toList(),\n

\n