Flutter VisibilityDetector

https://pub.dev/packages/flutter_widgets 

https://pub.dev/documentation/flutter_widgets/latest/flutter_widgets/VisibilityDetector-class.html 


//
// 曝光埋点案例    flutter_widgets: 0.1.7
//

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

class Exposure extends StatefulWidget {
  const Exposure({Key key}) : super(key: key);

  @override
  _ExposureState createState() => _ExposureState();
}

class _ExposureState extends State<Exposure> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color:Colors.white,
       child: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return ListView.builder(
        itemBuilder: (context, i) {
          return _buildRow(i);
        }
    );
  }

  Widget _buildRow(int i) {
    return SizedBox(
      height: 180,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (_, j) {
          String key = '$i - $j';
          return Container(
            width: 200,
            height: 180,
            margin: const EdgeInsets.all(3.0),
            decoration: BoxDecoration(
                border: Border.all(width: 1)
            ),
            child: VisibilityDetector(
              key: Key(key),
              onVisibilityChanged: (visibilityInfo) {
                final double visiblePercentage = visibilityInfo.visibleFraction * 100;
                debugPrint('---------------------Widget ${visibilityInfo.key} is ${visiblePercentage.toInt()}% visible');
              },
              child: Center(
                child: Text(key, style: TextStyle(fontSize: 18.0)),
              ),
            ),
          );
        },
      ),
    );
  }
}

flutter_widgets: 0.1.7

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值