Flutter 如何检查一个小部件是否可见? visbility_detector 来帮你实现

在本文中，我们将学习一个重要的Flutter小部件。很多时候，在应用程序中，我们必须知道一个小部件是否可见。

类似Android的onResum事件，在Flutter中，需要使用一些额外的方法来实现这个事件检测。

简单的应用场景就是在A页面中点击一个按钮打开B页面，A页面失去焦点，然后B页面关闭消失，A页面重新获取得了焦点，同时回调onResum事件。

要回调这个事件，我非就是想在B页面消失的时候，再做一事内容处理，我一般使用的方法是使用 future await 来实现处理，核心代码如下：

TextButton buildTextButton(BuildContext context) {
  return TextButton(
    onPressed: () async {
      //打开其他页面
      await Navigator.of(context)
          .push(MaterialPageRoute(builder: (BuildContext context) {
        return OnePage();
      }));
      //处理其他事情
    },
    child: const Text("测试"),
  );
}

现我也可以使用 visibilityDetector 在页面中做统一的处理。

添加依赖如下：

visibility_detector: ^0.4.0+2

然后在页面中引入依赖：

import 'package:visibility_detector/visibility_detector.dart';

核心使用代码如下：

//核心使用代码
VisibilityDetector buildVisibilityDetector(BuildContext context) {
  return VisibilityDetector(
    onVisibilityChanged: (visibilityInfo) {
      setState(() {
        //当前页面可见
        _isVisible = visibilityInfo.visibleFraction > 0;
        // It will show how much percentage the widget is visible
        var visiblePercentage = visibilityInfo.visibleFraction * 100;
        //页面的可见度
        print('Widget is ${visiblePercentage}% visible');
      });
    },
    key: const Key('my-widget-key'),
    child: Center(
      //页面的其他布局
      child: buildTextButton(context),
    ),
  );
}

如果你有兴趣，可以关注一下微信公众号 biglead 程序员知识架构