代码之家 › 专栏 › 技术社区 › Ammar Ahmad

如何使分页数据表在Flutter网站上有两个垂直和水平的滚动条?

scrollview flutter

0

Ammar Ahmad · 技术社区 · 2 年前

我有一个分页的数据表,我正在努力使它可以在Flutter网站上垂直和水平滚动条滚动。

我设法使用以下代码使其在一定程度上发挥作用:

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _verticalScrollController = ScrollController();
  final _horizontalScrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Data Table'),
      ),
      body: SizedBox(
        width: 600,
        height: 600,
        child: Scrollbar(
          thumbVisibility: true,
          controller: _verticalScrollController,
          child: SingleChildScrollView(
            controller: _verticalScrollController,
            scrollDirection: Axis.vertical,
            child: Scrollbar(
              scrollbarOrientation: ScrollbarOrientation.bottom,
              controller: _horizontalScrollController,
              child: PaginatedDataTable(
                header: const Text('Orders Table'),
                controller: _horizontalScrollController,
                columns: const [
                  DataColumn(label: Text('Sales Order')),
                  DataColumn(label: Text('Sold to Party')),
                  DataColumn(label: Text('Party Name')),
                  DataColumn(label: Text('Status')),
                  DataColumn(label: Text('Currency')),
                  DataColumn(label: Text('Order Type')),
                  DataColumn(label: Text('Creation Date')),
                  DataColumn(label: Text('Total Net Amount')),
                ],
                source: _DataSource(data: sampleOrders),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

现在它显示了垂直滚动条,但水平滚动条不会显示,除非我先用触控板滚动,然后它会显示并可以使用,但这在电脑上不起作用(因为没有触控板),我希望它从一开始就可见,这样用户就知道它可以滚动,如果可能的话,固定底部滚动条,这样它就可以在不向下滚动的情况下可见。

我认为部分问题在于,无论我是否放置滚动条,PaginatedDataTable都有某种滚动机制。

我尝试了其他堆栈溢出解决方案,但最终要么出现错误,要么出现相同的结果。

我该怎么解决这个问题?

0 回复 | 直到 2 年前