Flutter中使用Table.fromTextArray()实现PDF表格行列合并咨询

Table.fromTextArray() 是快速生成简单表格的封装方法，本身不支持单元格合并。要实现行列合并，需要直接使用 Table 组件配合 TableCell 的 columnSpan 和 rowSpan 属性手动构建表格。

示例代码 #

以下是模拟目标表格结构的实现代码，你可以根据实际需求调整单元格内容、合并规则和样式：

import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'dart:typed_data';

Future<Uint8List> generatePdf() async {
  final pdf = pw.Document();

  pdf.addPage(
    pw.Page(
      build: (pw.Context context) {
        return pw.Table(
          // 配置表格边框，和 fromTextArray 效果一致
          border: pw.TableBorder.all(width: 1, color: PdfColors.black),
          // 可选：设置列宽比例
          columnWidths: const {
            0: pw.FlexColumnWidth(1),
            1: pw.FlexColumnWidth(2),
            2: pw.FlexColumnWidth(1),
          },
          children: [
            // 第一行：第一个单元格跨2列
            pw.TableRow(
              children: [
                pw.TableCell(
                  columnSpan: 2,
                  padding: const pw.EdgeInsets.all(8),
                  child: pw.Text('跨2列的表头', textAlign: pw.TextAlign.center, style: pw.TextStyle(fontWeight: pw.FontWeight.bold)),
                ),
                pw.TableCell(
                  padding: const pw.EdgeInsets.all(8),
                  child: pw.Text('列3', textAlign: pw.TextAlign.center, style: pw.TextStyle(fontWeight: pw.FontWeight.bold)),
                ),
              ],
            ),
            // 第二行：第一个单元格跨2行
            pw.TableRow(
              children: [
                pw.TableCell(
                  rowSpan: 2,
                  padding: const pw.EdgeInsets.all(8),
                  child: pw.Text('跨2行内容', textAlign: pw.TextAlign.center, verticalAlign: pw.VerticalAlign.middle),
                ),
                pw.TableCell(
                  padding: const pw.EdgeInsets.all(8),
                  child: pw.Text('行2列2'),
                ),
                pw.TableCell(
                  padding: const pw.EdgeInsets.all(8),
                  child: pw.Text('行2列3'),
                ),
              ],
            ),
            // 第三行：因第一个单元格被合并，只需2个单元格
            pw.TableRow(
              children: [
                pw.TableCell(
                  padding: const pw.EdgeInsets.all(8),
                  child: pw.Text('行3列2'),
                ),
                pw.TableCell(
                  padding: const pw.EdgeInsets.all(8),
                  child: pw.Text('行3列3'),
                ),
              ],
            ),
          ],
        );
      },
    ),
  );

  return pdf.save();
}

关键说明 #

• 单元格合并：通过 TableCell 的 columnSpan（列合并数）和 rowSpan（行合并数）属性控制单元格跨越范围。
• 布局适配：当单元格跨多行时，后续行不需要再添加对应位置的单元格（如示例中第三行省略了第一个单元格），否则会导致布局重叠。
• 样式定制：可以通过 padding、TextStyle、TableBorder 等属性自定义表格和内容样式，满足需求。
• 列宽控制：使用 columnWidths 配置每列的宽度比例，让表格布局更合理。

如果你的目标表格有更复杂的合并规则，只需调整 TableRow 和 TableCell 的组合即可，核心逻辑一致。

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