即使小部件比Flutter 中的屏幕更宽，也始终显示滚动条

发布于07月22日

我正在制作一款支持网络的应用程序，在一个屏幕上，我有一个可以非常大的表格，所以我嵌套了两个SingleChildScrollView，使其可以在两种方式下滚动.现在我试图 for each SingleChildScrollView设置一个滚动条，但问题是嵌套的SingleChildScrollView只有在到达小部件的末尾时才显示滚动条，但我希望这两个滚动条始终可见，如何实现这一点？

代码:

Scrollbar(
              controller: _horizontalController,
              thumbVisibility: true,
              child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  controller: _horizontalController,
                  child: Scrollbar( //! This scrollbar is only shown when the other reach the end
                    controller: _verticalController,
                    thumbVisibility: true,
                    child: SingleChildScrollView(
                      scrollDirection: Axis.vertical,
                      controller: _verticalController,
                      child: /*******************/,
                    ),
                  ),
                ),
            )

推荐答案

问题是，Scrollbar的默认notificationPredicate被定义为:

bool defaultScrollNotificationPredicate(ScrollNotification notification) {
  return notification.depth == 0;
}

因此，由于第二个Scrollbar的深度是1(因为它是嵌套的)，而默认谓词只判断0，所以您看不到嵌套的Scrollbar‘S拇指.

解决方案:当深度大于0时也会收到通知.

请参阅 comments :

@override
Widget build(BuildContext context) {
  /// The default 'notificationPredicate
  return Scrollbar(
    controller: _horizontalController,
    thumbVisibility: true,
    /// Nest the vertical 'Scrollbar' right below the horizontal one.
    child: Scrollbar(
      controller: _verticalController,
      thumbVisibility: true,
      /// Notification.depth == 1 here,
      /// but the default predicate checks whether Notification.depth == 0.
      notificationPredicate: (notification) => notification.depth >= 0,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        controller: _horizontalController,
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          controller: _verticalController,
          child: Container(
            width: 800.0,
            height: 1200.0,
            color: Colors.red,
          ),
        ),
      ),
    ),
  );
}