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

在本文中，我们将学习一个重要的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

核心使用代码如下：

  //核心使用代码
  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),
      ),
    );
  }