flutter 数据表如何在列之间添加垂直边框

Question

我有一个像下面这样的三列数据表，我想在所有列之间添加垂直边界分隔符、分隔符或任何它调用的东西——包括标题——这在 flutter 数据表中是否可用以及如何做到这一点？
谢谢
作为旁注:我尝试了多种选择，但很难像 listview 或 json_table 包那样进行最小化

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

Answer 1

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

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

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

              columns: [
                DataColumn(label: Text('كود الطلب')),
                DataColumn(label: _verticalDivider),
                DataColumn(label: Text('الاشعار')),
                DataColumn(label: _verticalDivider),
                DataColumn(
                    label: Text(
                      'التاريخ',
                      style: TextStyle(
                          color: Colors.blue, fontWeight: FontWeight.bold),
                    ),),
              ],
              rows: _products.map((item) {
                return DataRow(cells: [
                  DataCell(Text(item['id'].toString())),
                  DataCell(_verticalDivider),
                  DataCell(Text(item['name'])),
                  DataCell(_verticalDivider),
                  DataCell(Text(item['price'].toString()))
                ]);
              }).toList(),