Flutter横竖屏报表截图生成PDF解决方案求助

问题根源 #

用RepaintBoundary截图时，10列多行的报表组件要么未完成布局就触发截图，要么因超宽/超尺寸导致布局约束异常，从而抛出RenderBox未布局、performResize错误。

1. 等布局完成再截图 #

通过帧回调延迟执行截图，确保当前帧所有组件都完成布局：

void captureReport() {
  WidgetsBinding.instance.addPostFrameCallback((_) async {
    final boundary = _repaintBoundaryKey.currentContext?.findRenderObject() as RenderRepaintBoundary?;
    if (boundary == null) return;
    // 高像素比保证截图清晰度
    final image = await boundary.toImage(pixelRatio: 3.0);
    // 后续转PDF的逻辑
  });
}

2. 适配超宽报表的布局 #

10列报表横向宽度大概率超出屏幕，用SingleChildScrollView包裹并强制指定最小宽度，避免布局计算失败：

RepaintBoundary(
  key: _repaintBoundaryKey,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: ConstrainedBox(
      constraints: const BoxConstraints(minWidth: 1000), // 按实际列宽计算总宽度
      child: YourReportWidget(), // 替换成你的报表组件
    ),
  ),
)

3. 横竖屏切换后等布局稳定 #

切换横竖屏会触发布局重建，延迟几百毫秒再截图，确保布局状态稳定：

OrientationBuilder(
  builder: (context, orientation) {
    return ElevatedButton(
      onPressed: () {
        Future.delayed(const Duration(milliseconds: 300), captureReport);
      },
      child: const Text('生成截图'),
    );
  },
)

4. 给报表明确的尺寸约束 #

避免父组件给报表无限约束（比如直接放Expanded里），用SizedBox或ConstrainedBox指定确定尺寸：

SizedBox(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height * 0.8,
  child: RepaintBoundary(
    key: _repaintBoundaryKey,
    child: YourReportWidget(),
  ),
)

5. 调试布局问题的小技巧 #

• 开启布局调试：在main函数里加debugPaintSizeEnabled = true，能直观看到组件的约束和尺寸
• 截图前打印组件尺寸，确认布局正常：

if (boundary != null) {
  print('报表实际尺寸：${boundary.size}');
  final image = await boundary.toImage(pixelRatio: 3.0);
}

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