Question

由于我是 Flutter 新手，我无法在 border 中设置 DataTable。谁能告诉我如何通过使用 DataTable 小部件来做到这一点？根据我的要求，我必须在每行和每列之间设置边框。只有我在其中找到了 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

您可以使用 dividerThickness 来确定分隔线的厚度，不幸的是，在 DataTable 中无法添加垂直分隔线。

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

1 个答案: