在Flutter中，数据表中不显示水平滚动条

Question

我正在使用

DataTable

以及垂直和水平

scrollbar

。垂直滚动条指示器显示，但水平滚动条指示器向下不显示。这是我的代码：

class NewAppointments extends StatelessWidget {
  const NewAppointments({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      physics: const AlwaysScrollableScrollPhysics(),
      scrollDirection: Axis.vertical,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          columns: [
            DataColumn(
              label: Expanded(
                child: Text(
                  'Date',
                  style: fontStyleSemibold,
                ),
              ),
            ),
            DataColumn(
              label: Expanded(
                child: Text(
                  'Patient Name',
                  style: fontStyleSemibold,
                ),
              ),
            ),
            DataColumn(
              label: Expanded(
                child: Text(
                  'Contact',
                  style: fontStyleSemibold,
                ),
              ),
            ),
            DataColumn(
              label: Expanded(
                child: Text(
                  'Doctor',
                  style: fontStyleSemibold,
                ),
              ),
            )
          ],
          rows: [
            DataRow(
              cells: [
                DataCell(
                  Text(
                    '12-04-2023',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Row(
                    children: [
                      CircularImage(
                          height: 24,
                          width: 24,
                          imageUrl: 'assests/images/icon_person.png',
                          onClick: () {}),
                      const SizedBox(
                        width: 4,
                      ),
                      Text(
                        'Muhammad Hasnain',
                        style: fontStyleRegular.copyWith(fontSize: 14),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
                DataCell(
                  Text(
                    '03028983053',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Text(
                    'Dr Hasnain',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            DataRow(
              cells: [
                DataCell(
                  Text(
                    '12-04-2023',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Row(
                    children: [
                      CircularImage(
                          height: 24,
                          width: 24,
                          imageUrl: 'assests/images/icon_person.png',
                          onClick: () {}),
                      const SizedBox(
                        width: 4,
                      ),
                      Text(
                        'Muhammad Hasnain',
                        style: fontStyleRegular.copyWith(fontSize: 14),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
                DataCell(
                  Text(
                    '03028983053',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Text(
                    'Dr Hasnain',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            DataRow(
              cells: [
                DataCell(
                  Text(
                    '12-04-2023',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Row(
                    children: [
                      CircularImage(
                          height: 24,
                          width: 24,
                          imageUrl: 'assests/images/icon_person.png',
                          onClick: () {}),
                      const SizedBox(
                        width: 4,
                      ),
                      Text(
                        'Muhammad Hasnain',
                        style: fontStyleRegular.copyWith(fontSize: 14),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
                DataCell(
                  Text(
                    '03028983053',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Text(
                    'Dr Hasnain',
                    maxLines: 1,
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            DataRow(
              cells: [
                DataCell(
                  Text(
                    '12-04-2023',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Row(
                    children: [
                      CircularImage(
                          height: 24,
                          width: 24,
                          imageUrl: 'assests/images/icon_person.png',
                          onClick: () {}),
                      const SizedBox(
                        width: 4,
                      ),
                      Text(
                        'Muhammad Hasnain',
                        style: fontStyleRegular.copyWith(fontSize: 14),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
                DataCell(
                  Text(
                    '03028983053',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Text(
                    'Dr Hasnain',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            DataRow(
              cells: [
                DataCell(
                  Text(
                    '12-04-2023',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Row(
                    children: [
                      CircularImage(
                          height: 24,
                          width: 24,
                          imageUrl: 'assests/images/icon_person.png',
                          onClick: () {}),
                      const SizedBox(
                        width: 4,
                      ),
                      Text(
                        'Muhammad Hasnain',
                        style: fontStyleRegular.copyWith(fontSize: 14),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
                DataCell(
                  Text(
                    '03028983053',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Text(
                    'Dr Hasnain',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            DataRow(
              cells: [
                DataCell(
                  Text(
                    '12-04-2023',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Row(
                    children: [
                      CircularImage(
                          height: 24,
                          width: 24,
                          imageUrl: 'assests/images/icon_person.png',
                          onClick: () {}),
                      const SizedBox(
                        width: 4,
                      ),
                      Text(
                        'Muhammad Hasnain',
                        style: fontStyleRegular.copyWith(fontSize: 14),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
                DataCell(
                  Text(
                    '03028983053',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Text(
                    'Dr Hasnain',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            DataRow(
              cells: [
                DataCell(
                  Text(
                    '12-04-2023',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Row(
                    children: [
                      CircularImage(
                          height: 24,
                          width: 24,
                          imageUrl: 'assests/images/icon_person.png',
                          onClick: () {}),
                      const SizedBox(
                        width: 4,
                      ),
                      Text(
                        'Muhammad Hasnain',
                        style: fontStyleRegular.copyWith(fontSize: 14),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
                DataCell(
                  Text(
                    '03028983053',
                    maxLines: 1,
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Text(
                    'Dr Hasnain',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            DataRow(
              cells: [
                DataCell(
                  Text(
                    '12-04-2023',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Row(
                    children: [
                      CircularImage(
                          height: 24,
                          width: 24,
                          imageUrl: 'assests/images/icon_person.png',
                          onClick: () {}),
                      const SizedBox(
                        width: 4,
                      ),
                      Text(
                        'Muhammad Hasnain',
                        style: fontStyleRegular.copyWith(fontSize: 14),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
                DataCell(
                  Text(
                    '03028983053',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                DataCell(
                  Text(
                    'Dr Hasnain',
                    style: fontStyleRegular.copyWith(fontSize: 14),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以使用 adaptive_scrollbar 包。它将显示多个滚动条

Answer 2

用ScrollBar包裹你的ScrollView并给出你想要显示滚动条的方向。

ScrollBar(
    scrollbarOrientation: ScrollbarOrientation.bottom,
)

Answer 3

尝试这个演示：

import 'package:flutter/material.dart';

class horizontalScroll extends StatefulWidget {
  const horizontalScroll({super.key});

  @override
  State<horizontalScroll> createState() => _horizontalScrollState();
}

class _horizontalScrollState extends State<horizontalScroll> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          columns: [
            DataColumn(label: Text('Column 1')),
            DataColumn(label: Text('Column 2')),
            DataColumn(label: Text('Column 3')),
            DataColumn(label: Text('Column 1')),
            DataColumn(label: Text('Column 2')),
            DataColumn(label: Text('Column 3')),
          ],
          rows: [
            DataRow(cells: [
              DataCell(Text('Cell 1')),
              DataCell(Text('Cell 2')),
              DataCell(Text('Cell 3')),
              DataCell(Text('Cell 1')),
              DataCell(Text('Cell 2')),
              DataCell(Text('Cell 3')),
            ]),
          ],
        ),
      ),
    );
  }
}