Flutter跟踪与监控插件flutter_tracker_widget的使用

Flutter跟踪与监控插件flutter_tracker_widget的使用

这是一个支持滚动播放和合理曝光的组件。

开始使用

1. 在 pubspec.yaml 中添加依赖

   dependencies:
     flutter_tracker_widget: any
   

2. 安装依赖

   在终端中运行：

   flutter pub get
   

3. 导入库

   import 'package:flutter_tracker_widget/flutter_tracker_widget.dart';
   

4. 使用示例

   下面是一个使用 TrackerScrollWidget 的完整示例。该示例展示了一个包含多个列表项的 ListView，并且每个列表项都有自己的曝光逻辑。

   import 'package:flutter/material.dart';
   import 'package:flutter_tracker_widget/flutter_tracker_widget.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,
         ),
         home: MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   
   class MyHomePage extends StatefulWidget {
     MyHomePage({Key? key, this.title}) : super(key: key);
   
     final String? title;
   
     [@override](/user/override)
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     List<Color> _colors = [Colors.red, Colors.orange, Colors.yellow, Colors.green, Colors.cyan, Colors.blue, Colors.purple];
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title ?? ''),
         ),
         body: Column(
           children: [
             TextButton(
               onPressed: () {
                 Navigator.of(context).push(
                   MaterialPageRoute(
                     builder: (_) => ListDemo(),
                   ),
                 );
               },
               child: Text('List Demo'),
             ),
           ],
         ),
       );
     }
   }
   
   class ListDemo extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return TrackerScrollWidget(
         isInViewPortCondition: (
           double deltaTop,
           double deltaBottom,
           double viewPortDimension,
         ) {
           return deltaTop < (0.5 * viewPortDimension) && deltaBottom > (0.5 * viewPortDimension);
         },
         child: ListView.builder(
           itemBuilder: (c, index) {
             return TrackerItemWidget(
               id: '$index',
               child: Container(
                 height: 200,
                 color: _colors[index % _colors.length],
                 child: Center(
                     child: Text(
                   '$index',
                   style: TextStyle(color: Colors.white),
                 )),
               ),
               displayNotifier: (
                 BuildContext context,
                 String id,
               ) {
                 print('开始曝光了 { id:$id - index:$index }');
               },
               builder: (
                 BuildContext context,
                 bool isInView,
                 Widget child,
               ) {
                 return Stack(children: [
                   child,
                   Positioned(
                     right: 0,
                     top: 0,
                     child: Text(
                       isInView ? '显示' : '',
                       style: TextStyle(color: Colors.white),
                     ),
                   )
                 ]);
               },
             );
           },
           itemCount: 100,
         ),
       );
     }
   }
   

   上述代码展示了如何使用 TrackerScrollWidget 和 TrackerItemWidget 来实现滚动列表的曝光跟踪。

主要功能

1. 在滚动结束时处理可见逻辑
   避免滚动过程中频繁处理逻辑导致性能问题。

2. 增加曝光逻辑
   支持滚动过程中只曝光一次或每次都曝光。

   /// 跟踪策略
   enum TrackerStrategy {
     only, // 只有一次
     every // 每一次
   }
   

   当 TrackerStrategy.only 时，曝光不会重复。

   flutter: 开始曝光了 { id:first - visiable:true }
   flutter: 开始曝光了 { id:second - visiable:true }
   

   当 TrackerStrategy.every 时，曝光会重复。

   flutter: 开始曝光了 { id:0 - index:0 - visiable:true }
   flutter: 开始曝光了 { id:1 - index:1 - visiable:true }
   

3. 首次进入也会走曝光和hit逻辑
   如果想指定首次命中的视图，可以使用 initHitIds 将指定的 ID 传入。

   initHitIds: ['0'],
   

4. 方便获取可见上下文
   底层维护一个上下文列表，便于获取 ListView 中可见的渲染对象。

5. 更合理的释放机制
   提供更合理的资源管理机制，确保在不使用时释放资源。

示例代码

完整的示例代码可以在以下文件中查看：

import 'package:example/custom_scroll_demo.dart';
import 'package:example/list_demo.dart';
import 'package:flutter/material.dart';

import 'horizontal_list.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,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<Color> _colors = [Colors.red, Colors.orange, Colors.yellow, Colors.green, Colors.cyan, Colors.blue, Colors.purple];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? ''),
      ),
      body: Column(
        children: [
          TextButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => ListDemo(),
                ),
              );
            },
            child: Text('List Demo'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => CustomScrollDemo(),
                ),
              );
            },
            child: Text('CustomScroll Demo'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => HorizontalList(),
                ),
              );
            },
            child: Text('Horizontal List Demo'),
          ),
        ],
      ),
    );
  }
}