dart 总是显示滚动条,即使小部件是宽于在Flutter屏幕

eufgjt7s  于 2023-07-31  发布在  Flutter
关注(0)|答案(1)|浏览(169)

我正在制作一个支持网络的应用程序,在一个屏幕上,我有一个可以非常大的表,所以我嵌套了两个SingleChildScrollView,使其在两种方式下都可以滚动。现在我试图设置一个ScrollBar到每个SingleChildScrollView,但问题是,嵌套的SingleChildScrollView显示ScrollBar只有当小部件的末尾到达,但我希望两个ScrollBar总是可见,如何才能实现这一点?
代码:

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: /*******************/,
                    ),
                  ),
                ),
            )

字符串

wtzytmuj

wtzytmuj1#

问题在于,Scrollbar的默认notificationPredicate定义为:

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

字符串
因此,由于第二个Scrollbar的深度是1(因为它是嵌套的),并且默认 predicate 只检查0,所以您看不到嵌套Scrollbar的拇指。
解决方案:当深度大于0时也会得到通知。
见备注:

@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,
          ),
        ),
      ),
    ),
  );
}

相关问题