如何确定滚动条在 flutter 中是否可见/附加？

Question

我想在滚动条可见时为其添加空间/填充。

我怎样才能知道滚动条在 flutter 小部件中是否可见？

Answer 1

通过下面我可以发现是否有滚动条

NotificationListener<ScrollMetricsNotification>(
      onNotification: (notification) {
        setState(() {
          hasScrollbar = (notification.metrics.maxScrollExtent > 0);
        });
      },

当 hasScrollbar 为 true 时，我为其添加填充：

padding: hasScrollbar ? myThemeData.screenPadding.copyWith(right: 20.scaled()) : myThemeData.screenPadding,

Answer 2

这个库可以帮助你做到这一点 https://pub.dev/packages/visibility_ detector

@override
Widget build(BuildContext context) {
  return VisibilityDetector(
    key: Key('my-widget-key'),
    onVisibilityChanged: (visibilityInfo) {
      var visiblePercentage = visibilityInfo.visibleFraction * 100;
      debugPrint(
          'Widget ${visibilityInfo.key} is ${visiblePercentage}% visible');
    },
    child: someOtherWidget,
  );
}

Answer 3

老问题，但从 2025 年开始，您可以使用包

assorted_layout_widgets

中的小部件 DetectScroll。

DetectScroll

可以检测滚动条是否可见，并告诉您滚动条的宽度。这对于相对于滚动条定位小部件非常有用，这样滚动条就不会与它们重叠。当滚动条永久可见时（通常在 Web 和桌面上），这一点可能很重要。

直接用

DetectScroll

包裹您关心的可滚动内容：

DetectScrollbar(
 child: SingleChildScrollView(
    child: Column( ...
 ...
);

然后，在后代小部件中，您可以获取当前滚动状态和滚动条宽度：

bool isScrolled = DetectScroll.of(context).isScrolled;
double width = DetectScroll.of(context).scrollbarWidth;

例如，假设您想在可滚动条的右上角添加一个帮助按钮，并且仅在滚动条可见时才考虑滚动条宽度：

bool isScrollbarPresent = DetectScroll.of(context).isScrolled;
double width = DetectScroll.of(context).scrollbarWidth;

return Stack(
  children: [
     child,
     Positioned(
        right: isScrollbarPresent ? width : 0,
        top: 0,
        child: HelpButton(),
     ),
  ],
);

注意我是包作者。