Flutter：使用InteractiveViewer时仅渲染可见Widget的异常问题

必须使用InteractiveViewer组件，无法改用ListView。但大量图片导致内存占用过高，于是尝试使用Google的visibility_detector包，却出现了可见性比例计算异常的问题。

复现步骤 #

1. 可复现代码如下：

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

class LogoItem extends StatefulWidget {
  final int id;
  const LogoItem({super.key, required this.id});

  @override
  State<LogoItem> createState() => _LogoItemState();
}

class _LogoItemState extends State<LogoItem> {
  bool visible = true;

  @override
  Widget build(BuildContext context) {
    final key = Key("logo_${widget.id}");
    return Container(
      color: Colors.grey,
      child: VisibilityDetector(
        // key: UniqueKey(),
        key: key,
        onVisibilityChanged: (info) {
          final visible = info.visibleFraction > 0;
          if (visible == this.visible) {
            return;
          }
          print("Visibility changed to $visible ${info.visibleFraction} ${info.size} ${info.visibleBounds}");
          this.visible = visible;
          setState(() {});
        },
        child: _buildLogo(),
      ),
    );
  }

  Widget _buildLogo() {
    if (!visible) {
      return const SizedBox.square(dimension: 300, child: Placeholder());
    }
    return Stack(
      children: [
        const FlutterLogo(size: 300),
        Text("Logo ${widget.id}", style: const TextStyle(color: Colors.white, fontSize: 20)),
      ],
    );
  }
}

class VisibilityDetectorBug extends StatelessWidget {
  const VisibilityDetectorBug({super.key});

  static const row = 5;
  static const column = 5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Interactive Viewer with Visibility Detector Bug'),
      ),
      body: InteractiveViewer(
        minScale: 0.01,
        boundaryMargin: const EdgeInsets.all(double.infinity),
        constrained: false,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: List.generate(row, (rowIndex) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: List.generate(column, (colIndex) {
                final id = rowIndex * column + colIndex;
                return LogoItem(id: id);
              }),
            );
          })
        ),
      ),
    );
  }
}

预期行为 #

组件能正确检测可见性，图片在不可见时切换为占位符：

实际行为 #

visibleFraction输出错误值，可见性检测异常：

问题原因及解决办法 #

1. 核心问题：在onVisibilityChanged回调里直接调用setState会触发组件重绘，此时VisibilityDetector的布局状态尚未稳定，导致后续可见性计算出现偏差；同时切换子组件（图片/占位符）的操作也会干扰检测逻辑的稳定性。

2. 具体修复方案：

   • 延迟状态更新：用WidgetsBinding.instance.addPostFrameCallback延迟执行setState，确保布局计算完成后再修改可见状态：

     onVisibilityChanged: (info) {
       final newVisible = info.visibleFraction > 0;
       if (newVisible == visible) return;
       WidgetsBinding.instance.addPostFrameCallback((_) {
         if (mounted) {
           setState(() {
             visible = newVisible;
           });
         }
       });
     },
     

   • 稳定检测边界：将VisibilityDetector移到Container外层，确保它的布局边界始终固定，不受子组件切换影响：

     return VisibilityDetector(
       key: key,
       onVisibilityChanged: (info) {
         // 回调逻辑
       },
       child: Container(
         color: Colors.grey,
         child: _buildLogo(),
       ),
     );
     

   • 初始化包配置：在main函数中初始化VisibilityDetector，合理设置更新间隔，平衡检测精度和性能：

     void main() {
       VisibilityDetectorController.instance.updateInterval = Duration(milliseconds: 100);
       runApp(const MyApp());
     }
     

   • 保留稳定Key：当前使用的Key("logo_${widget.id}")是正确的，不要改用UniqueKey()，否则每次重绘都会重置检测器状态。

3. 额外优化
   如果内存问题仍未解决，可结合缓存类图片组件（如CachedNetworkImage），配合可见性检测实现图片延迟加载，进一步降低内存占用。

内容的提问来源于stack exchange，提问作者TSR