CustomPainter接收Widget列表参数时如何获取每个Widget的高度

你当前写法无法获取Widget尺寸的核心原因是，myWidgetList中存储的只是未经过Flutter布局、渲染流程的配置对象，本身不携带任何尺寸信息，直接在paint方法中遍历无法拿到对应参数。

可以通过离屏预测量的方式实现需求，不需要依赖GlobalKey，适配任意用户传入的Widget，具体实现如下： #

第一步：封装通用Widget测量工具 #

利用Flutter的PipelineOwner做离屏布局，无需将Widget挂载到可见渲染树即可测量尺寸：

import 'package:flutter/material.dart';

Future<Size> measureWidget(Widget widget, {BoxConstraints constraints = const BoxConstraints()}) async {
  final pipelineOwner = PipelineOwner();
  final buildOwner = BuildOwner(focusManager: FocusManager());

  // 适配全局上下文依赖，比如Theme、MediaQuery等，可根据你的业务场景补充上层嵌套
  Widget wrappedWidget = Material(
    child: widget,
  );

  final root = RenderObjectToWidgetAdapter<RenderBox>(
    container: RenderView(
      configuration: ViewConfiguration(size: Size.zero),
      window: WidgetsBinding.instance.window,
    ),
    child: wrappedWidget,
  ).attachToRenderTree(buildOwner);

  pipelineOwner.rootNode = root;
  buildOwner.buildScope(root);
  pipelineOwner.flushLayout();
  pipelineOwner.flushCompositingBits();
  pipelineOwner.flushPaint();

  final size = (root.renderObject as RenderBox).size;
  root.renderObject.detach();
  return size;
}

第二步：改造你的CustomPainter实现 #

CustomPainter本身不支持异步预计算，需要在外层套一层StatefulWidget完成测量后再把尺寸传给Painter：

// 外层承载Widget，负责预测量逻辑
class MyPainterWidget extends StatefulWidget {
  final List<Widget> myWidgetList;

  const MyPainterWidget({super.key, required this.myWidgetList});

  @override
  State<MyPainterWidget> createState() => _MyPainterWidgetState();
}

class _MyPainterWidgetState extends State<MyPainterWidget> {
  List<(Widget widget, Size size)> _measuredWidgets = [];
  bool _isMeasuring = true;

  @override
  void initState() {
    super.initState();
    _measureAllWidgets();
  }

  @override
  void didUpdateWidget(covariant MyPainterWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 外部传入的Widget列表更新时自动重新测量
    if (oldWidget.myWidgetList != widget.myWidgetList) {
      _measureAllWidgets();
    }
  }

  Future<void> _measureAllWidgets() async {
    setState(() => _isMeasuring = true);
    final List<(Widget, Size)> result = [];
    // 传入你实际的父布局约束，保证测量尺寸和实际显示一致
    final parentConstraints = BoxConstraints(
      maxWidth: MediaQuery.of(context).size.width,
      maxHeight: MediaQuery.of(context).size.height,
    );
    for (final w in widget.myWidgetList) {
      final size = await measureWidget(w, constraints: parentConstraints);
      result.add((w, size));
    }
    setState(() {
      _measuredWidgets = result;
      _isMeasuring = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_isMeasuring) {
      // 测量中可以自定义加载占位
      return const SizedBox.shrink();
    }
    return CustomPaint(
      painter: MyPainter(measuredWidgets: _measuredWidgets),
      // 可根据你的业务调整CustomPaint的尺寸
      size: Size.infinite,
    );
  }
}

// 改造后的MyPainter
class MyPainter extends CustomPainter {
  final List<(Widget widget, Size size)> measuredWidgets;

  MyPainter({
    required this.measuredWidgets,
  });

  @override
  void paint(Canvas canvas, Size size) {
    for (var item in measuredWidgets) {
      final widgetSize = item.$2;
      // 直接拿取尺寸做绘制逻辑
      print('Widget宽度：${widgetSize.width}，Widget高度：${widgetSize.height}');
    }
  }

  @override
  bool shouldRepaint(covariant MyPainter oldDelegate) {
    return oldDelegate.measuredWidgets != measuredWidgets;
  }
}

注意事项 #

• 如果你的Widget依赖Theme、MediaQuery或者其他上层InheritedWidget，需要在measureWidget方法的wrappedWidget外层补充对应的嵌套，保证测量环境和实际使用环境一致，避免测量尺寸偏差
• 如果Widget列表数量较多，测量会有少量耗时，可以根据需求添加加载过渡效果
• 如果你之后要在Painter里绘制对应的Widget，可配合ParagraphBuilder或者Canvas.drawPicture实现

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