当前位置：文江博客话题详情

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

发布于 2025-01-11 15:59:49 字数 60 浏览 1 评论 0原文

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

如何确定滚动条在 flutter 小部件中是否可见？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℡Ms空城旧梦 2025-01-18 15:59:49

通过以下内容，我可以找出是否有滚动条

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

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

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

Through the following I could find out if there is a scrollbar

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

and when hasScrollbar is true I add padding for it:

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

回复收藏 0 原文

找个人就嫁了吧 2025-01-18 15:59:49

这个库可以帮助你做到这一点
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,
  );
}

this lib can help you to do it
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,
  );
}

回复收藏 0 原文

夏夜暖风 2025-01-18 15:59:49

老问题，但从 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(),
     ),
  ],
);

注意我是包作者。

Old question, but as of 2025 you can use widget DetectScroll from package assorted_layout_widgets.

DetectScroll can detect if a scrollbar is likely visible, and also tell you the width of the scrollbar. This is useful for positioning widgets relative to the scrollbar, so that the scrollbar doesn't overlap them. This can be important when the scrollbar is permanently visible, usually on the Web and desktop.

Wrap the scrollable you care about directly with a DetectScroll:

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

Then, in a descendent widget, you can get the current scroll state and the scrollbar width:

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

For example, suppose you want to add a help button to the top-right corner of a scrollable, and account for the scrollbar width only if it's visible:

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(),
     ),
  ],
);

Note I'm the package author.

回复收藏 0 原文

~没有更多了~