Flutter PDF发票中ListView.builder无法设置动态图片求助

核心实现思路 #

遍历你的图片数据源列表，将每个索引对应的图片转换为PDF可识别的PdfImage对象，再嵌入到PDF的列表项中即可实现动态展示。以下是基于常用pdf包的具体实现方案：

1. 依赖准备 #

确保pubspec.yaml中引入必要依赖：

dependencies:
  pdf: ^3.10.0
  path_provider: ^2.1.1
  # 加载网络图片需添加http包
  http: ^1.1.0

2. 完整代码示例 #

import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:flutter/services.dart' show rootBundle;
// 网络图片需要引入http
// import 'package:http/http.dart' as http;

Future<pw.Document> generateDynamicImageInvoice() async {
  final pdf = pw.Document();
  
  // 替换为你的实际动态图片数据源：Asset路径/本地文件路径/网络URL列表
  final dynamicImageSources = [
    'assets/invoice_items/item1.jpg',
    'assets/invoice_items/item2.png',
    'assets/invoice_items/item3.png',
  ];

  // 预加载所有图片为PdfImage，避免循环中重复IO操作
  final List<pw.PdfImage> pdfImages = [];
  for (var source in dynamicImageSources) {
    // 处理Asset图片
    final assetBytes = await rootBundle.load(source);
    pdfImages.add(pw.PdfImage.file(
      pdf.document,
      bytes: assetBytes.buffer.asUint8List(),
    ));

    // 如果是网络图片，替换为以下代码：
    // final response = await http.get(Uri.parse(source));
    // if (response.statusCode == 200) {
    //   pdfImages.add(pw.PdfImage.file(
    //     pdf.document,
    //     bytes: response.bodyBytes,
    //   ));
    // }
  }

  pdf.addPage(
    pw.Page(
      build: (context) {
        return pw.Column(
          crossAxisAlignment: pw.CrossAxisAlignment.start,
          children: [
            pw.Text('XX公司发票', style: pw.TextStyle(fontSize: 24, fontWeight: pw.FontWeight.bold)),
            pw.SizedBox(height: 30),
            pw.Text('商品明细', style: pw.TextStyle(fontSize: 18, fontWeight: pw.FontWeight.bold)),
            pw.SizedBox(height: 15),
            // 遍历数据源，按索引匹配图片生成列表项
            ...dynamicImageSources.asMap().entries.map((entry) {
              final index = entry.key;
              final itemName = '商品 ${index + 1}';

              return pw.Container(
                margin: pw.EdgeInsets.symmetric(vertical: 8),
                child: pw.Row(
                  children: [
                    pw.Image(
                      pdfImages[index],
                      width: 60,
                      height: 60,
                      fit: pw.BoxFit.cover,
                    ),
                    pw.SizedBox(width: 12),
                    pw.Expanded(
                      child: pw.Text(itemName, style: pw.TextStyle(fontSize: 16)),
                    ),
                  ],
                ),
              );
            }).toList(),
          ],
        );
      },
    ),
  );

  return pdf;
}

关键注意事项 #

• 图片预加载：提前将所有图片转换为PdfImage存储，避免循环构建时重复执行IO操作，提升PDF生成效率。
• 图片类型适配：根据图片来源（Asset/网络/本地文件）选择对应字节流获取方式，确保正确转换为PdfImage。
• Asset声明：使用本地Asset图片时，需在pubspec.yaml的flutter节点下声明资源路径：

  flutter:
    assets:
      - assets/invoice_items/
  

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