Flutter组件可见性检测插件 widget_visibility_detector 的使用

widget_visibility_detector 是一个用于检测Flutter组件是否出现在视口中的插件。通过它可以方便地监听某个组件的出现和消失事件。

安装

首先，在你的 pubspec.yaml 文件中添加对 widget_visibility_detector 的依赖：

dependencies:
  widget_visibility_detector: ^latest_version

然后运行 flutter pub get 来安装该包。

使用示例

下面是一个完整的示例，展示了如何使用 WidgetVisibilityDetector 来检测组件的可见性变化。

示例代码

import 'package:flutter/material.dart';
import 'package:widget_visibility_detector/widget_visibility_detector.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int index = 0;

  List<Widget> get _page => [_page1(), _page2()];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WidgetVisibilityDetector(
      onAppear: () {
        print('page1 onAppear');
      },
      onDisappear: () {
        print('page1 onDisappear');
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: IndexedStack(
          index: index,
          children: _page,
        ),
        floatingActionButton: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            FloatingActionButton(
              heroTag: '1',
              onPressed: () {
                setState(() {
                  index = 1;
                });
              },
              child: Icon(Icons.subdirectory_arrow_left),
            ),
            FloatingActionButton(
              heroTag: '2',
              onPressed: () {
                setState(() {
                  index = 0;
                });
              },
              child: Icon(Icons.add),
            ),
            FloatingActionButton(
              heroTag: '3',
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return Page2();
                }));
              },
              child: Icon(Icons.ac_unit),
            ),
          ],
        ),
      ),
    );
  }

  Widget _page1() {
    return WidgetVisibilityDetector(
      onAppear: () {
        print('tab1 onAppear');
      },
      onDisappear: () {
        print('tab1 onDisappear');
      },
      child: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Container(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('tab1'),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _page2() {
    return WidgetVisibilityDetector(
      onAppear: () {
        print('tab2 onAppear');
      },
      onDisappear: () {
        print('tab2 onDisappear');
      },
      child: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Container(
            child: Text('tab2'),
          ),
        ),
      ),
    );
  }
}

class Page2 extends StatefulWidget {
  [@override](/user/override)
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return WidgetVisibilityDetector(
      onAppear: () {
        print('page2 onAppear');
      },
      onDisappear: () {
        print('page2 onDisappear');
      },
      child: Scaffold(
        appBar: AppBar(),
        body: Container(
          child: Text('page2'),
        ),
      ),
    );
  }
}