如何用Flutter的pdf包给PDF页面添加标题、表格及页脚页码？

你需要用pw.Column作为页面的根组件，将标题、表格、页脚垂直组合在一起，以下是满足你需求的完整代码：

pdf.addPage(pw.Page(
  pageFormat: PdfPageFormat.standard,
  build: (pw.Context context) {
    // 模拟表格数据源，可替换为你的业务数据列表
    final List<String> names = ['张三', '李四', '王五', '赵六'];
    final List<int> ages = [25, 30, 28, 32];

    return pw.Column(
      crossAxisAlignment: pw.CrossAxisAlignment.stretch,
      children: [
        // 顶部居中标题
        pw.Center(
          child: pw.Text(
            '用户信息表',
            style: pw.TextStyle(fontSize: 20, fontWeight: pw.FontWeight.bold),
          ),
        ),
        pw.SizedBox(height: 20), // 标题与表格的间距

        // 多列多行表格，用Expanded让表格占据中间空间
        pw.Expanded(
          child: pw.Table(
            border: pw.TableBorder.all(),
            children: [
              // 表头行
              pw.TableRow(
                children: [
                  pw.Container(
                    padding: pw.EdgeInsets.all(8),
                    child: pw.Text('姓名', style: pw.TextStyle(fontWeight: pw.FontWeight.bold)),
                  ),
                  pw.Container(
                    padding: pw.EdgeInsets.all(8),
                    child: pw.Text('年龄', style: pw.TextStyle(fontWeight: pw.FontWeight.bold)),
                  ),
                ],
              ),
              // 循环生成数据行
              ...names.asMap().entries.map((entry) {
                int index = entry.key;
                return pw.TableRow(
                  children: [
                    pw.Container(
                      padding: pw.EdgeInsets.all(8),
                      child: pw.Text(names[index]),
                    ),
                    pw.Container(
                      padding: pw.EdgeInsets.all(8),
                      child: pw.Text(ages[index].toString()),
                    ),
                  ],
                );
              }),
            ],
          ),
        ),

        // 底部页码
        pw.Align(
          alignment: pw.Alignment.bottomCenter,
          child: pw.Text(
            '第 ${context.pageNumber} 页，共 ${context.pagesCount} 页',
            style: pw.TextStyle(fontSize: 12),
          ),
        ),
      ],
    );
  },
));

关键说明： #

• 根组件pw.Column：垂直排列所有元素，crossAxisAlignment: pw.CrossAxisAlignment.stretch让表格撑满页面宽度
• 标题居中：通过pw.Center实现，搭配SizedBox增加与表格的间距，提升排版美观度
• 多列表格：定义两列表头，通过循环数据源生成多行数据；用pw.Expanded包裹表格，确保它占据标题和页脚之间的所有可用空间，避免内容压缩
• 动态页码：利用pw.Context的pageNumber和pagesCount属性自动获取当前页和总页数，无需手动维护页码计数

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