Flutter中如何实现列内嵌套多行多列布局？现有代码需做哪些调整

原有代码核心问题 #

• 顶部单号*YAT5869507*属于跨全宽的内容，错误放到了第一列内部，导致布局错位
• 左右两组列的行数不匹配：左侧标签列共6行，对应内容列只有5行；右侧标签列共4行，和左侧行高不对齐，越往下水平偏移越明显
• 未给每列分配固定宽度占比，仅靠spaceBetween分配宽度，和参考图的左右两组均等分布局不一致
• 手动输入下划线做分割线，长度不可控，不符合组件规范

调整后代码 #

pw.Column(
  crossAxisAlignment: pw.CrossAxisAlignment.start,
  children: <pw.Widget>[
    pw.Container(
      padding: const pw.EdgeInsets.only(left: 20, bottom: 20, right: 20),
      child: pw.Column(
        crossAxisAlignment: pw.CrossAxisAlignment.start,
        children: <pw.Widget>[
          pw.Text('Header',
              textScaleFactor: 2,
              style: pw.Theme.of(context)
                  .defaultTextStyle
                  .copyWith(fontWeight: pw.FontWeight.bold)),
          pw.SizedBox(height: 30),
          // 顶部单号独立出来，跨全宽
          pw.Text(
            '*YAT5869507*',
            style: const pw.TextStyle(
              fontSize: SharedFontSizes.headline3Mobile,
            ),
          ),
          pw.SizedBox(height: 20),
          // 外层Row放左右两组布局，各占50%宽度
          pw.Row(
            crossAxisAlignment: pw.CrossAxisAlignment.start,
            children: <pw.Widget>[
              // 左侧组：标签+内容，占一半宽度
              pw.Expanded(
                child: pw.Row(
                  crossAxisAlignment: pw.CrossAxisAlignment.start,
                  children: [
                    pw.Column(
                      crossAxisAlignment: pw.CrossAxisAlignment.start,
                      children: <pw.Widget>[
                        pw.Text('Code :'),
                        pw.SizedBox(height: 8),
                        pw.Text('Name :'),
                        pw.SizedBox(height: 8),
                        pw.Text('Expected Date :'),
                        pw.SizedBox(height: 8),
                        pw.Text('Receipt Date :'),
                        pw.SizedBox(height: 8),
                        pw.Text('Number :'),
                      ],
                    ),
                    pw.SizedBox(width: 16),
                    pw.Expanded(
                      child: pw.Column(
                        crossAxisAlignment: pw.CrossAxisAlignment.start,
                        children: <pw.Widget>[
                          pw.Text('ABEL'),
                          pw.SizedBox(height: 8),
                          pw.Text('ABEL New'),
                          pw.SizedBox(height: 8),
                          pw.Divider(thickness: 1),
                          pw.SizedBox(height: 8),
                          pw.Divider(thickness: 1),
                          pw.SizedBox(height: 8),
                          pw.Divider(thickness: 1),
                        ],
                      ),
                    ),
                  ]
                )
              ),
              pw.SizedBox(width: 32),
              // 右侧组：标签+内容，占一半宽度
              pw.Expanded(
                child: pw.Row(
                  crossAxisAlignment: pw.CrossAxisAlignment.start,
                  children: [
                    pw.Column(
                      crossAxisAlignment: pw.CrossAxisAlignment.start,
                      children: <pw.Widget>[
                        pw.Text('ID :'),
                        pw.SizedBox(height: 8),
                        pw.Text('Time'),
                        pw.SizedBox(height: 8),
                        pw.Text('Start Time :'),
                        pw.SizedBox(height: 8),
                        pw.Text('End Time :'),
                        // 占位对齐左侧的最后一行
                        pw.SizedBox(height: 8),
                        pw.SizedBox.shrink(),
                      ],
                    ),
                    pw.SizedBox(width: 16),
                    pw.Expanded(
                      child: pw.Column(
                        crossAxisAlignment: pw.CrossAxisAlignment.start,
                        children: <pw.Widget>[
                          pw.Divider(thickness: 1),
                          pw.SizedBox(height: 8),
                          pw.Divider(thickness: 1),
                          pw.SizedBox(height: 8),
                          pw.Divider(thickness: 1),
                          pw.SizedBox(height: 8),
                          pw.Divider(thickness: 1),
                          // 占位对齐左侧的最后一行
                          pw.SizedBox(height: 8),
                          pw.SizedBox.shrink(),
                        ],
                      ),
                    ),
                  ]
                )
              ),
            ],
          ),
        ],
      ),
    ),
  ],
);

补充说明 #

如果需要调整列间距、行高，直接修改对应SizedBox的数值即可，Divider也可以自定义颜色、厚度适配设计要求。

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