Flutter PDF组件文本超出容器约束，布局重叠问题求助

你使用pub.dev的pdf_widget库（简称pw）编写PDF排版代码，期望在页面中并排显示两个各占可用宽度50%的容器，但出现了内部文本重叠的问题。查看容器边框确认宽度设置正确，但内部内容仍互相覆盖，尝试过Expanded、SizedBox等方法未解决。截图显示两个并排容器的内部文本互相重叠，左侧容器的客户信息与右侧容器的Test文本交叉覆盖。

问题分析 #

核心问题是容器内部的Row组件没有合理分配子元素宽度，导致内容溢出父容器：

• 第一个容器内的Row默认会尽可能占满空间，内部的文本容器没有宽度限制，容易超出父容器范围；
• 仅用maxWidth约束容器宽度不够明确，需要固定宽度来限制内部元素的可用空间。

修复方案 #

1. 给两个并排的容器明确设置固定宽度（直接用width: pageFormat.availableWidth * 0.5），替代仅靠maxWidth约束；
2. 第一个容器内部的Row使用Expanded分配子元素宽度，避免内容溢出；
3. 第二个容器内部的Row也可以用Expanded让子Column均分空间，避免拥挤。

修改后的代码示例 #

pw.Padding(
  padding: const pw.EdgeInsets.only(top: 50, bottom: 30, right: 5),
  child: pw.Row(children: [
    // 第一个容器：明确固定宽度，内部Row用Expanded分配空间
    pw.Container(
      width: pageFormat.availableWidth * 0.5,
      decoration: pw.BoxDecoration(
        border: pw.Border.all(color: PdfColor.fromHex('#EE2A2A')),
      ),
      child: pw.Row(children: [
        pw.Container(
          padding: const pw.EdgeInsets.only(right: 15),
          alignment: pw.Alignment.center,
          child: pw.Text('Adresser à'),
        ),
        // 用Expanded让右侧容器占满剩余空间
        pw.Expanded(
          child: pw.Container(
            padding: const pw.EdgeInsets.only(left: 15, right: 15),
            decoration: pw.BoxDecoration(
              border: pw.Border(left: pw.BorderSide(color: PdfColor.fromHex('#EE2A2A'))),
            ),
            child: pw.Column(
              crossAxisAlignment: pw.CrossAxisAlignment.start, // 左对齐更合理
              children: [
                pw.Text(
                  invoiceData.invoiceModel.customerName,
                  softWrap: true,
                  maxLines: 4,
                ),
                pw.Text(
                  invoiceData.invoiceModel.customerAddress.printify(),
                  softWrap: true,
                  maxLines: 4,
                ),
              ],
            ),
          ),
        ),
      ]),
    ),
    // 第二个容器：明确固定宽度，内部Row用Expanded均分空间
    pw.Container(
      width: pageFormat.availableWidth * 0.5,
      child: pw.Column(children: [
        pw.Row(children: [
          pw.Expanded(child: pw.Column(children: [pw.Text('Test')])),
          pw.Expanded(child: pw.Column(children: [pw.Text('Test')])),
        ]),
        pw.Row(children: [
          pw.Expanded(child: pw.Column(children: [pw.Text('Test')])),
          pw.Expanded(child: pw.Column(children: [pw.Text('Test')])),
        ]),
        pw.Row(children: [
          pw.Expanded(child: pw.Column(children: [pw.Text('Test')])),
          pw.Expanded(child: pw.Column(children: [pw.Text('Test')])),
        ]),
        pw.Row(children: [
          pw.Expanded(child: pw.Column(children: [pw.Text('Test')])),
          pw.Expanded(child: pw.Column(children: [pw.Text('Test')])),
        ]),
        pw.Row(children: [
          pw.Expanded(child: pw.Column(children: [pw.Text('Test')])),
          pw.Expanded(child: pw.Column(children: [pw.Text('Test')])),
        ]),
      ]),
    ),
  ]),
)

关键修改点说明 #

• 把第一个容器的constraints换成直接的width，确保容器宽度严格限制为页面一半；
• 给第一个容器内部的右侧文本容器套上Expanded，让它在Row内合理占用剩余空间，避免溢出；
• 第二个容器内部的每个Row里的Column都用Expanded，让两个Test文本均分宽度，不会拥挤重叠；
• 给第一个容器内的Column加上crossAxisAlignment: pw.CrossAxisAlignment.start，让文本左对齐，符合常规排版。

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