Flutter曝光追踪插件flutter_exposure的使用

特性

A Flutter 点对点解决方案，目前支持滚动控件的曝光检测。

• 滚动曝光：可以在所有滚动控件中使用，如 ListView、GridView、CustomScrollView 等。

开始使用

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_exposure: ^0.0.2

2. 安装依赖

通过命令行安装依赖：

$ flutter pub get

3. 导入包

在 Dart 文件中导入 flutter_exposure 包：

import 'package:exposure/exposure.dart';

使用方法

在 ScrollView 上包裹 ScrollDetailProvider 小部件，然后在需要监控曝光的小部件上包裹 Exposure。当小部件进入用户视野时，可以通过 onExpose 回调函数获取通知。

如果希望在滚动停止后再检测曝光，可以将 ScrollDetailProvider 的 lazy 属性设置为 true。

还可以通过 exposeFactor 参数控制需要曝光的比例，默认值为 0.5（即至少有一半的小部件可见时触发）。

以下是一个完整的示例代码：

ScrollDetailProvider(
    lazy: true,                     // 默认值为 false
    child: ListView.builder(
        itemCount: 200,
        itemBuilder: (context, index) {
            return Exposure(
                exposeFactor: 0.9,  // 设置为 0.9 表示需要 90% 可见才触发
                onExpose: () {      // 曝光回调
                    debugPrint('$index');
                },
                onHide: (duration) { // 隐藏回调
                    debugPrint('$duration');
                },
                child: Text('$index'), // 曝光目标小部件
            );
        },
    ),
)

示例代码

以下是完整的示例代码，展示了如何使用 flutter_exposure 插件进行曝光追踪。

1. StaggeredGridViewDemo 示例

class StaggeredGridViewDemo extends StatelessWidget {
  StaggeredGridViewDemo({Key? key}) : super(key: key);
  final ScrollController _scrollController = ScrollController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScrollDetailProvider(
      lazy: false, // 不懒加载
      child: StaggeredGridView.countBuilder(
          shrinkWrap: true,
          controller: _scrollController,
          crossAxisCount: 4,
          crossAxisSpacing: 4,
          mainAxisSpacing: 10,
          itemCount: 30,
          itemBuilder: (context, index) {
            return Exposure(
              exposeFactor: 0, // 100% 可见才触发
              onExpose: () {
                debugPrint('$index'); // 打印曝光的索引
              },
              child: Container(
                  color: Colors.green,
                  child: Center(
                    child: CircleAvatar(
                      backgroundColor: Colors.white,
                      child: Text('$index'),
                    ),
                  )),
            );
          },
          staggeredTileBuilder: (index) =>
              StaggeredTile.count(2, index == 0 ? 2.5 : 3)),
    );
  }
}

2. CustomScrollViewDemo 示例

class CustomScrollViewDemo extends StatelessWidget {
  const CustomScrollViewDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Material(
      child: ScrollDetailProvider(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverPadding(
              padding: const EdgeInsets.all(8.0),
              sliver: SliverGrid(
                // Grid
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, // 按两列显示
                  mainAxisSpacing: 10.0,
                  crossAxisSpacing: 10.0,
                  childAspectRatio: 4.0,
                ),
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    // 创建子widget
                    return Exposure(
                        onExpose: () {
                          debugPrint('SliverGrid$index'); // 打印网格曝光索引
                        },
                        child: Container(
                          alignment: Alignment.center,
                          color: Colors.cyan[100 * (index % 9)],
                          child: Text('grid item $index'),
                        ));
                  },
                  childCount: 20,
                ),
              ),
            ),
            SliverFixedExtentList(
              itemExtent: 50.0,
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  // 创建列表项
                  return Exposure(
                    onExpose: () {
                      debugPrint('SliverFixedExtentList:$index'); // 打印固定高度列表的曝光索引
                    },
                    child: Container(
                      alignment: Alignment.center,
                      color: Colors.lightBlue[100 * (index % 9)],
                      child: Text('list item $index'),
                    ),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}