Flutter 纵横轴滚动条

Question

我的 flutter 项目中有两个滚动条用于滚动数据表。这是代码。

  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
                width: MediaQuery.of(context).size.width * (1 / 2),
                height: MediaQuery.of(context).size.height * (1 / 2),
                child: Scrollbar(
                    isAlwaysShown: true,
                    controller: _controllerOne,
                    child: SingleChildScrollView(
                        scrollDirection: Axis.vertical,
                        controller: _controllerOne,
                        child: Scrollbar(
                          controller: _controllerTwo,
                          isAlwaysShown: true,
                          child: SingleChildScrollView(
                            scrollDirection: Axis.horizontal,
                            controller: _controllerTwo,
                            child: DataTable(
                             ...
                            ),
                          ),
                        ))))));
  }

这两个滚动条工作正常。但我不能同时看到他们两个。我的意思是，如果我首先在垂直方向上编写带有 scrollDirection 的滚动条，就像；

Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
                width: MediaQuery.of(context).size.width * (1 / 2),
                height: MediaQuery.of(context).size.height * (1 / 2),
                child: Scrollbar(
                    isAlwaysShown: true,
                    controller: _controllerOne,
                    child: SingleChildScrollView(
                        **scrollDirection: Axis.vertical,**
                        controller: _controllerOne,
                        child: Scrollbar(
                          controller: _controllerTwo,
                          isAlwaysShown: true,
                          child: SingleChildScrollView(
                            **scrollDirection: Axis.horizontal,**
                            controller: _controllerTwo,
                            child: DataTable(
                             ...
                            ),
                          ),
                        ))))));
  }

如果我首先在水平方向上编写带有 scrollDirection 的滚动条，就像；

Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
                width: MediaQuery.of(context).size.width * (1 / 2),
                height: MediaQuery.of(context).size.height * (1 / 2),
                child: Scrollbar(
                    isAlwaysShown: true,
                    controller: _controllerOne,
                    child: SingleChildScrollView(
                        **scrollDirection: Axis.horizontal,**
                        controller: _controllerOne,
                        child: Scrollbar(
                          controller: _controllerTwo,
                          isAlwaysShown: true,
                          child: SingleChildScrollView(
                            **scrollDirection: Axis.vertical,**
                            controller: _controllerTwo,
                            child: DataTable(
                             ...
                            ),
                          ),
                        ))))));
  }

当我滚动到最后时，我可以看到两个方向的另一个滚动条。 但是当显示表格时，我需要同时看到它们。

有解决办法吗？

Answer 1

我建议您使用 InteractiveViewer，因为在表格上显示大数据时导航更容易，但是要解决您的问题，您实际上可以在不依赖任何包的情况下做到这一点。

你要做的是嵌套垂直和水平的 SingleChildScrollView 并用两个 ScrollBar 包裹它，然后分别附加一个 ScrollController 并在内部 ScrollBar 上使用 notificationPredicate 属性。

class MyWidget extends StatelessWidget {
  final List<int> shades = [100, 200, 300, 400, 500, 600, 700, 800, 900];
  final ScrollController _horizontal = ScrollController(),
      _vertical = ScrollController();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 500,
      width: 400,
      child: Scrollbar(
        controller: _vertical,
        thumbVisibility: true,
        trackVisibility: true,
        child: Scrollbar(
          controller: _horizontal,
          thumbVisibility: true,
          trackVisibility: true,
          notificationPredicate: (notif) => notif.depth == 1,
          child: SingleChildScrollView(
            controller: _vertical,
            child: SingleChildScrollView(
              controller: _horizontal,
              scrollDirection: Axis.horizontal,
              child: DataTable(
                columns: const <DataColumn>[
                  DataColumn(label: Text('Preview')),
                  DataColumn(label: Text('Color')),
                  DataColumn(label: Text('Shade')),
                ],
                rows: [
                  for (var color in Colors.primaries)
                    for (var shade in shades)
                      DataRow(
                        cells: [
                          DataCell(Container(
                              height: 20, width: 50, color: color[shade])),
                          DataCell(Text(color.toString())),
                          DataCell(Text('$shade')),
                        ],
                      ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

我遇到了同样的问题，而不是我为它创建了自己的包。 我个人在我的生产应用程序中使用它。 这是非常容易使用。 自动处理滚动条和 Thumb 但担心您可以根据您的应用程序主题自定义滚动条和 Thumb。 此外，它在所有平台上都能正常工作。

cross_scroll: ^0.0.75

只需 3 行代码即可使用它，如下所示：

CrossScroll(
      child:///your child 
    )

确保您的孩子有特定的身高和宽度。

也许这个包也将帮助您轻松自定义拇指和滚动轨道水平和垂直

十字卷轴套餐

Answer 3

任何需要解决方案的人，

https://pub.dev/packages/adaptive_scrollbar#multiple-scrollbars

使用这个包。

（感谢 MuratWeny）

Answer 4

如果你想创建服装列表但具有像表格这样可以水平滚动的功能，那么试试这个代码。

 ScrollController _scrollControllerHorizontal = ScrollController();
 ScrollController _scrollControllerVertical = ScrollController();

 Widget MyListTable() {
   return Scrollbar(
       thumbVisibility: true,
       trackVisibility: true,
       controller: _scrollControllerVertical,
       child: SingleChildScrollView(
         controller: _scrollControllerVertical,
         scrollDirection: Axis.vertical,
         child: Scrollbar(
           thumbVisibility: true,
           trackVisibility: true,
           controller: _scrollControllerHorizontal,
           child: SingleChildScrollView(
             controller: _scrollControllerHorizontal,
             scrollDirection: Axis.horizontal,
             child: Wrap(
               direction: Axis.vertical,
               children: List.generate(
                 40,
                 (index) => Container(
                   width: 400,
                   height: 100,
                   color: Colors.blue,
                   margin: EdgeInsets.all(4),
                   child: Text("oke ${index}"),
                 ),
               ),
             ),
           ),
         ),
       ));
 }