flutter - 如何在 flutter 数据表中设置垂直和水平边框？

Question

由于我是 Flutter 新手，我无法在 DataTable 中设置 border。谁能告诉我如何使用 DataTable Widget 来做到这一点？根据我的要求，我必须在每行和每列之间设置边框。只有我在其中找到了 showBottomBorder 属性，但并不满意!因为我必须做一个表格结构，每行和每列都有黑色边框。请帮助我如何实现这一目标!

提前致谢:)

This is the image link ] 1

下面是我的代码。

Widget bodyData(PatientDataNotifier patientDataNotifier) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: DataTable(
              onSelectAll: (b) {},
              sortColumnIndex: 1,
              sortAscending: true,
              columns: <DataColumn>[
                DataColumn(
                  label: Text('Profile'),
                  numeric: false,
                ),
                DataColumn(
                    label: Text('Name'),
                    numeric: false,
                    onSort: (i, b) {
                    //  patientDataNotifier.sortPatient();
                      print('$i $b');
                     },
                    tooltip: 'First Name'),
                DataColumn(
                  label: Text('Age'),
                  numeric: false,
                ),
                DataColumn(
                  label: Text('Assigned Slots'),
                  numeric: false,
                ),
                DataColumn(
                  label: Text('Completed Slots'),
                  numeric: false,
                )
              ],
              rows: patientDataNotifier.patientMaster.map(
                    (detail) => DataRow(
                      cells: [
                        DataCell(CircleAvatar(radius: 25, backgroundImage: NetworkImage(detail.profile_pic),)),
                        DataCell(Text(detail.name), showEditIcon: false),
                        DataCell(Text(detail.age.toString()), showEditIcon: false),
                        DataCell(Text(detail.assigned_slots), showEditIcon: false),
                        DataCell(Text(detail.completed_slots), showEditIcon: false)
                      ],
                    ),
                  ).toList(),
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(80),
        child: Consumer<PatientDataNotifier>(
          builder: (context, patientDataNotifier, _){
            return appBarSection('Patient Details', patientDataNotifier);
          },
        ),
      ),
      //appBar: appBarSection('Patient Details'),
      body: Container(
        child: Consumer<PatientDataNotifier>(
          builder: (context, patientDataNotifier, _){
            return bodyData(patientDataNotifier);
          },
        ),
      ),
    );
  }

  Widget appBarSection(String title, PatientDataNotifier patientDataNotifier) {
    return AppBar(
      title: Text(title),
      actions: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: SizedBox(
            width: 150,
            child: TextFormField(
              controller: nameController,
              decoration: InputDecoration(
                hintText: "Search",
                hintStyle: TextStyle(fontSize: 16, color: Colors.white),
                isDense: true,
                suffixIcon: Icon(Icons.search, color: Colors.white),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(16),
                  borderSide: BorderSide(
                    color: Colors.white,
                    width: 2.0,
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(16),
                  borderSide: BorderSide(style: BorderStyle.none),
                ),
                filled: true,
                fillColor: Colors.lightBlue.shade200,
              ),
            ),
          ),
        ),
      ],
    );
  }

Answer 1

使用 DataTable decoration 可用于具有表格边框。要有内边框线，我们可以将 VerticalDivider() 小部件放在 columns 和每个 DataRow 的单元格 中。

如您所见，我只是缺少居中文本。

  Widget buildTable(BuildContext context) {
    return Theme(
          data: Theme.of(context).copyWith(dividerColor: Colors.black),
          child: DataTable(
            decoration: BoxDecoration(
                border: Border.all(
              width: 1,
              color: Colors.black,
            )),
            columns: const <DataColumn>[
              DataColumn(label: Text("Sport", textAlign: TextAlign.center)),
              DataColumn(label: VerticalDivider()),
              DataColumn(
                  label: Text("Total Players", textAlign: TextAlign.center))
            ],
            rows: const <DataRow>[
              DataRow(
                cells: <DataCell>[
                  DataCell(Text('Soccer')),
                  DataCell(VerticalDivider()),
                  DataCell(Text("11")),
                ],
              ),
              DataRow(
                cells: <DataCell>[
                  DataCell(Text('Hockey')),
                  DataCell(VerticalDivider()),
                  DataCell(Text("11")),
                ],
              ),
            ],
          ),
    );
  }