如何判断Flutter组件是否在屏幕可见？含AnimatedList场景

嘿，针对你的两个Flutter问题，我来给你详细拆解解决方案：

要让指定Widget自动滚动到屏幕可视区域，最常用的两种方式：

• 使用Scrollable.ensureVisible方法：给目标Widget绑定一个GlobalKey，调用该方法后会自动计算滚动偏移，把Widget带到可视范围内，还能配置动画时长、对齐比例等参数。示例代码：

  final GlobalKey _targetKey = GlobalKey();
  
  // 触发滚动逻辑
  void ensureWidgetVisible() {
    Scrollable.ensureVisible(
      _targetKey.currentContext!,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
      alignment: 0.5, // 让Widget居中显示
    );
  }
  

• 通过ScrollController手动滚动：如果是ListView、AnimatedList这类列表组件，可以提前计算目标项的位置偏移，再用controller.animateTo或controller.jumpTo滚动到对应位置，就像你代码里实现的滚动到列表底部那样。

要判断列表项是否在可视区域，我们可以通过获取组件的RenderObject位置信息，和视口范围做对比来实现。结合你提供的代码，我给你修改后的完整示例，添加了判断项可见性的逻辑：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/rendering.dart';

class AnimatedListSample extends StatefulWidget {
  @override
  _AnimatedListSampleState createState() => _AnimatedListSampleState();
}

class _AnimatedListSampleState extends State<AnimatedListSample> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  ListModel<int> _list;
  final ScrollController _controller = ScrollController();
  int _nextItem;
  List<GlobalKey> _itemKeys = []; // 存储每个列表项的GlobalKey

  @override
  void initState() {
    super.initState();
    _list = ListModel<int>(
      listKey: _listKey,
      initialItems: <int>[0, 1, 2],
    );
    _nextItem = 3;
    // 初始化每个项的GlobalKey
    _itemKeys = List.generate(_list.length, (index) => GlobalKey());
  }

  Widget _buildItem(
      BuildContext context, int index, Animation<double> animation) {
    return CardItem(
      key: _itemKeys[index], // 给每个项绑定唯一Key
      animation: animation,
      item: _list[index],
    );
  }

  void _insert() {
    final newKey = GlobalKey();
    _itemKeys.add(newKey);
    _list.insert(_list.length, _list.length + 1);
    Timer(
        const Duration(milliseconds: 300),
        () => _controller.animateTo(
              _controller.position.maxScrollExtent,
              curve: Curves.easeIn,
              duration: const Duration(milliseconds: 300),
            ));
  }

  // 判断指定索引的项是否在可视范围内
  bool isItemVisible(int index) {
    if (index < 0 || index >= _itemKeys.length) return false;
    
    final renderBox = _itemKeys[index].currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return false;

    // 获取视口相关信息
    final viewport = RenderAbstractViewport.of(renderBox);
    final offset = _controller.position.pixels;
    final viewportSize = _controller.position.viewportDimension;
    
    // 获取当前项在视口中的矩形范围
    final itemRect = viewport.getOffsetToReveal(renderBox, 0.0).rect;
    // 获取当前屏幕可视区域的矩形
    final screenRect = Rect.fromLTWH(0, offset, MediaQuery.of(context).size.width, viewportSize);

    // 判断是否有重叠（部分可见也算可视）
    return screenRect.overlaps(itemRect);
    // 如果需要判断完全可见，替换为下面的代码：
    // return screenRect.contains(itemRect);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AnimatedList'),
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.add_circle),
              onPressed: _insert,
            ),
            IconButton(
              icon: const Icon(Icons.visibility),
              onPressed: () {
                // 测试判断第0项是否可见
                print('Item 0 is visible: ${isItemVisible(0)}');
              },
            )
          ],
        ),
        body: AnimatedList(
          controller: _controller,
          key: _listKey,
          initialItemCount: _list.length,
          itemBuilder: _buildItem,
        ),
      ),
    );
  }
}

class ListModel<E> {
  ListModel({
    @required this.listKey,
    Iterable<E> initialItems,
  }) : assert(listKey != null),
        _items = List<E>.from(initialItems ?? <E>[]);

  final GlobalKey<AnimatedListState> listKey;
  final List<E> _items;

  AnimatedListState get _animatedList => listKey.currentState!;

  void insert(int index, E item) {
    _items.insert(index, item);
    _animatedList.insertItem(index);
  }

  int get length => _items.length;

  E operator [](int index) => _items[index];

  int indexOf(E item) => _items.indexOf(item);
}

class CardItem extends StatelessWidget {
  const CardItem({Key? key, @required this.animation, @required this.item})
      : assert(animation != null),
        assert(item != null && item >= 0),
        super(key: key);

  final Animation<double> animation;
  final int item;

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = Theme.of(context).textTheme.headline4!;
    return SizeTransition(
      axis: Axis.vertical,
      sizeFactor: animation,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        child: SizedBox(
          height: 80,
          child: Card(
            color: Colors.primaries[item % Colors.primaries.length],
            child: Center(
              child: Text('Item $item', style: textStyle),
            ),
          ),
        ),
      ),
    );
  }
}

逻辑说明： #

1. 给每个CardItem绑定唯一的GlobalKey，这样我们能获取到它的RenderBox对象；
2. isItemVisible方法中，通过RenderBox获取项在视口中的矩形范围，再和当前屏幕可视区域的矩形对比；
3. 使用screenRect.overlaps(itemRect)判断是否有重叠（部分可见也算可视），如果需要判断完全可见，换成screenRect.contains(itemRect)即可。

另外，如果你不想自己写这些逻辑，也可以使用Flutter社区的VisibilityDetector组件，它能监听组件的可见性变化，不过需要在pubspec.yaml中添加对应的依赖。

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