Flutter VisibilityDetector 组件曝光

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: MyList(),
    );
  }
}

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return new 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: EdgeInsets.all(3.0),
            decoration: BoxDecoration(
                border: Border.all(width: 1)
            ),
            child: VisibilityDetector(
              key: Key(key),
              onVisibilityChanged: (visibilityInfo) {
                var visiblePercentage = visibilityInfo.visibleFraction * 100;
                debugPrint('Widget ${visibilityInfo.key} is ${visiblePercentage.toInt()}% visible');
              },
              child: Center(
                child: Text(key, style: TextStyle(fontSize: 18.0)),
              ),
            ),
          );
        },
      ),
    );
  }
}

https://pub.dev/packages/flutter_widgets

写了个 ListView 监听可见内容的Demo, 可以参考下. 用的是 flutter_widgets库提供的 VisibilityDetector