Flutter中如何获取ListView内Widget的宽高以实现选中动画？

我正在开发一个接收Widget列表的组件，支持选中某个Widget并添加装饰（比如彩色边框）。为了实现装饰矩形在不同Widget间的平移和缩放动画（绘制在其他Widget上方），需要获取列表中Widget的高度，所以用了CustomMultiChildLayout组件。但问题是当列表数据量大时，CustomMultiChildLayout会渲染所有Widget（包括不可见的），没法享受Flutter原生ListView的懒加载优势，自己实现懒加载又重复造轮子。想请教：有没有办法获取ListView内各Item的宽高，从而改用ListView替代CustomMultiChildLayout？

注：列表中的Widget可能有不同的宽高，增加了复杂度。

现有代码示例：

CustomMultiChildLayout(
  delegate: SelectableListViewLayoutDelegate(
    itemCount: widget.children.length,
    //...
  ),
  children: [
    for (int i = 0; i < widget.children.length; i++)
      LayoutId(
        id: i,
        child: GestureDetector(
          child: widget.children[i],
          onTap: () {
            //...
          },
        ),
      ),
    if (widget.controller?.selectedIndex != null)
      LayoutId(
        id: -1,
        child: selectedItemOverlayWidget, // 装饰矩形
      ),
  ],
);

下面是几种无需重复造轮子，结合ListView懒加载特性同时获取Item尺寸的可行方案：

1. 给ListItem绑定GlobalKey获取实时尺寸 #

给每个列表项分配唯一的GlobalKey，通过Key获取对应的RenderBox来拿到尺寸和位置信息。适合需要精准获取单个Item尺寸的场景。

实现步骤： #

• 维护一个Map存储每个index对应的GlobalKey
• 在ListView.builder的itemBuilder中为每个Item设置Key
• 点击Item时，通过Key获取RenderBox，进而拿到size和全局偏移
• 用缓存存储已加载Item的尺寸，避免重复计算

示例代码：

final Map<int, GlobalKey> _itemKeys = {};
final Map<int, Size> _itemSizes = {};
Offset _selectedOffset = Offset.zero;
Size _selectedSize = Size.zero;

void _updateSelectedDecoration(int index) {
  final key = _itemKeys[index];
  final renderBox = key?.currentContext?.findRenderObject() as RenderBox?;
  if (renderBox != null) {
    final size = renderBox.size;
    final offset = renderBox.localToGlobal(Offset.zero);
    setState(() {
      _selectedSize = size;
      _selectedOffset = offset;
      _itemSizes[index] = size; // 缓存尺寸
    });
  }
}

@override
Widget build(BuildContext context) {
  return Stack(
    children: [
      ListView.builder(
        itemCount: widget.children.length,
        itemBuilder: (context, index) {
          _itemKeys[index] = GlobalKey();
          return GestureDetector(
            key: _itemKeys[index],
            onTap: () => _updateSelectedDecoration(index),
            child: widget.children[index],
          );
        },
      ),
      // 选中装饰层，用AnimatedPositioned实现动画
      if (widget.controller?.selectedIndex != null)
        AnimatedPositioned(
          duration: const Duration(milliseconds: 300),
          left: _selectedOffset.dx,
          top: _selectedOffset.dy,
          width: _selectedSize.width,
          height: _selectedSize.height,
          child: selectedItemOverlayWidget,
        ),
    ],
  );
}

注意事项： #

• ListView懒加载时，不可见的Item会被销毁，对应的Key会失效，所以需要在Item被dispose时从缓存中移除对应尺寸（可以通过自定义StatefulWidget的ListItem来监听dispose）
• 如果列表有滚动，需要监听ScrollController，在滚动结束后更新选中Item的偏移位置

2. 自定义ListItem组件，主动上报尺寸 #

封装一个自定义的SelectableListItem组件，在其布局完成后主动把自身尺寸和index回调给父组件，适合需要批量获取可见Item尺寸的场景。

示例代码：

class SelectableListItem extends StatefulWidget {
  final Widget child;
  final int index;
  final Function(int index, Size size) onSizeReported;

  const SelectableListItem({
    super.key,
    required this.child,
    required this.index,
    required this.onSizeReported,
  });

  @override
  State<SelectableListItem> createState() => _SelectableListItemState();
}

class _SelectableListItemState extends State<SelectableListItem> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _reportSize();
    });
  }

  void _reportSize() {
    final renderBox = context.findRenderObject() as RenderBox?;
    if (renderBox != null) {
      widget.onSizeReported(widget.index, renderBox.size);
    }
  }

  @override
  void didUpdateWidget(covariant SelectableListItem oldWidget) {
    super.didUpdateWidget(oldWidget);
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _reportSize();
    });
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

父组件使用：

final Map<int, Size> _itemSizes = {};

ListView.builder(
  itemCount: widget.children.length,
  itemBuilder: (context, index) {
    return SelectableListItem(
      index: index,
      onSizeReported: (index, size) {
        _itemSizes[index] = size;
      },
      child: GestureDetector(
        onTap: () {
          // 使用_itemSizes中的尺寸更新装饰
        },
        child: widget.children[index],
      ),
    );
  },
);

3. 结合ScrollController和视口计算位置 #

通过ScrollController获取ListView的视口，结合Item的缓存尺寸计算每个Item的偏移位置，适合需要预估未加载Item位置的场景（如果Item尺寸有规律的话，无规律则需要依赖已缓存的尺寸）。

示例代码片段：

final ScrollController _scrollController = ScrollController();

void _calculateItemOffset(int index) {
  double offset = 0;
  for (int i = 0; i < index; i++) {
    // 用缓存的尺寸累加偏移
    offset += _itemSizes[i]?.height ?? 0;
  }
  // 结合滚动偏移得到全局位置
  final globalOffset = Offset(0, offset - _scrollController.offset);
  // 更新装饰位置
}

• 用Stack+AnimatedPositioned替代CustomMultiChildLayout来实现装饰层的动画，装饰层独立于ListView渲染，不影响懒加载
• 缓存已加载Item的尺寸，避免重复计算
• 监听ListView的滚动事件，在滚动时更新选中装饰的位置，确保动画跟随滚动

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