//
// 曝光埋点案例
//

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)),
              ),
            ),
          );
        },
      ),
    );
  }
}