Flutter如何知道页面/组件可见？

在Flutter中，可以使用VisibilityDetector包来检测页面上的组件是否可见。这个包提供了一个VisibilityDetector widget，它可以包裹其他widget，并且在该widget可见或不可见时通知父widget。

首先，你需要在pubspec.yaml中添加visibility_detector_widget依赖：

dependencies:
  flutter:
    sdk: flutter
  visibility_detector_widget: ^0.2.0

然后，你可以使用VisibilityDetector来包裹你想要检测可见性的widget。以下是一个简单的例子：

import 'package:flutter/material.dart';
import 'package:visibility_detector_widget/visibility_detector_widget.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: VisibilityDetector(
          key: Key('my-widget'),
          onVisibilityChanged: (VisibilityInfo info) {
            print(info.visibleFraction);
            if (info.visibleFraction > 0.5) {
              print('Widget is more than 50% visible.');
            }
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

在这个例子中，当Container部件可见时，onVisibilityChanged回调会被触发。info.visibleFraction表示widget可见的比例，如果这个值大于0.5，表示widget至少有50%是可见的。