如何在Flutter中实现多行内第二个元素的统一对齐？

我有一个包含多个Row的Column组件，希望所有Row中的第二个元素都保持相同的起始对齐位置。

• 目标效果：每行右侧的内容（第二个元素）从同一垂直位置开始，排版整齐统一
• 当前问题：因每行使用了不同的间距设置（固定宽度的SizedBox、不同比例的FractionallySizedBox），导致右侧内容起始位置不一致，无法对齐

以下是现有代码：

Padding(
  padding: EdgeInsets.only(left: 22.0, right: 22.0, top: 22.0),
  child: Column(
    children: [
      Row(
        children: [
          Text(
            'Title',
            style: GoogleFonts.poppins(
              fontSize: 10,
              fontWeight: FontWeight.w400,
              fontStyle: FontStyle.italic,
              color: Color(0xff34495E),
            ),
          ),
          SizedBox(width: 55),
          Text(
            'Asoebi Gown',
            style: GoogleFonts.poppins(
              fontSize: 12,
              fontWeight: FontWeight.w400,
              color: Color(0xff596780),
            ),
          ),
        ],
      ),
      SizedBox(height: 15),
      Divider(color: Color(0xff34495E).withOpacity(0.2)),
      SizedBox(height: 15),
      Row(
        children: [
          Text(
            'Quantity',
            style: GoogleFonts.poppins(
              fontSize: 10,
              fontWeight: FontWeight.w400,
              fontStyle: FontStyle.italic,
              color: Color(0xff34495E),
            ),
          ),
          Expanded(
            child: FractionallySizedBox(
              widthFactor: 0.8,
              child: Text(
                '12',
                style: GoogleFonts.poppins(
                  fontSize: 12,
                  fontWeight: FontWeight.w400,
                  color: Color(0xff596780),
                ),
              ),
            ),
          ),
        ],
      ),
      SizedBox(height: 15),
      Divider(color: Color(0xff34495E).withOpacity(0.2)),
      SizedBox(height: 15),
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Description',
            style: GoogleFonts.poppins(
              fontSize: 10,
              fontWeight: FontWeight.w400,
              fontStyle: FontStyle.italic,
              color: Color(0xff34495E),
            ),
          ),
          Expanded(
            child: FractionallySizedBox(
              widthFactor: 0.9,
              child: Text(
                'Praesent vitae neque porta, hendrerit enim sed, temps ante. Suspendisse vitae massa neque. Praesent vitae neque porta, hendrerit enim sed, tempus ante.',
                style: GoogleFonts.poppins(
                  fontSize: 12,
                  fontWeight: FontWeight.w400,
                  color: Color(0xff596780),
                ),
              ),
            ),
          ),
        ],
      ),
      SizedBox(height: 15),
      Divider(color: Color(0xff34495E).withOpacity(0.2)),
    ],
  ),
)

解决方案 #

方法1：固定第一列宽度 #

给每个Row的第一个文本元素包裹固定宽度的SizedBox，确保所有行的第一列占据相同水平空间，这样第二个元素自然对齐：

Padding(
  padding: EdgeInsets.only(left: 22.0, right: 22.0, top: 22.0),
  child: Column(
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 80, // 统一设置第一列宽度，可根据文本长度调整
            child: Text(
              'Title',
              style: GoogleFonts.poppins(
                fontSize: 10,
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.italic,
                color: Color(0xff34495E),
              ),
            ),
          ),
          Expanded(
            child: Text(
              'Asoebi Gown',
              style: GoogleFonts.poppins(
                fontSize: 12,
                fontWeight: FontWeight.w400,
                color: Color(0xff596780),
              ),
            ),
          ),
        ],
      ),
      SizedBox(height: 15),
      Divider(color: Color(0xff34495E).withOpacity(0.2)),
      SizedBox(height: 15),
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 80,
            child: Text(
              'Quantity',
              style: GoogleFonts.poppins(
                fontSize: 10,
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.italic,
                color: Color(0xff34495E),
              ),
            ),
          ),
          Expanded(
            child: Text(
              '12',
              style: GoogleFonts.poppins(
                fontSize: 12,
                fontWeight: FontWeight.w400,
                color: Color(0xff596780),
              ),
            ),
          ),
        ],
      ),
      SizedBox(height: 15),
      Divider(color: Color(0xff34495E).withOpacity(0.2)),
      SizedBox(height: 15),
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 80,
            child: Text(
              'Description',
              style: GoogleFonts.poppins(
                fontSize: 10,
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.italic,
                color: Color(0xff34495E),
              ),
            ),
          ),
          Expanded(
            child: Text(
              'Praesent vitae neque porta, hendrerit enim sed, temps ante. Suspendisse vitae massa neque. Praesent vitae neque porta, hendrerit enim sed, tempus ante.',
              style: GoogleFonts.poppins(
                fontSize: 12,
                fontWeight: FontWeight.w400,
                color: Color(0xff596780),
              ),
            ),
          ),
        ],
      ),
      SizedBox(height: 15),
      Divider(color: Color(0xff34495E).withOpacity(0.2)),
    ],
  ),
)

方法2：使用Table组件 #

Table组件天生支持列对齐，适合这种多行多列的排版场景：

Padding(
  padding: EdgeInsets.only(left: 22.0, right: 22.0, top: 22.0),
  child: Column(
    children: [
      Table(
        columnWidths: {
          0: FixedColumnWidth(80), // 第一列固定宽度
          1: FlexColumnWidth(), // 第二列占剩余空间
        },
        children: [
          TableRow(
            children: [
              Text(
                'Title',
                style: GoogleFonts.poppins(
                  fontSize: 10,
                  fontWeight: FontWeight.w400,
                  fontStyle: FontStyle.italic,
                  color: Color(0xff34495E),
                ),
              ),
              Text(
                'Asoebi Gown',
                style: GoogleFonts.poppins(
                  fontSize: 12,
                  fontWeight: FontWeight.w400,
                  color: Color(0xff596780),
                ),
              ),
            ],
          ),
        ],
      ),
      SizedBox(height: 15),
      Divider(color: Color(0xff34495E).withOpacity(0.2)),
      SizedBox(height: 15),
      Table(
        columnWidths: {
          0: FixedColumnWidth(80),
          1: FlexColumnWidth(),
        },
        children: [
          TableRow(
            children: [
              Text(
                'Quantity',
                style: GoogleFonts.poppins(
                  fontSize: 10,
                  fontWeight: FontWeight.w400,
                  fontStyle: FontStyle.italic,
                  color: Color(0xff34495E),
                ),
              ),
              Text(
                '12',
                style: GoogleFonts.poppins(
                  fontSize: 12,
                  fontWeight: FontWeight.w400,
                  color: Color(0xff596780),
                ),
              ),
            ],
          ),
        ],
      ),
      SizedBox(height: 15),
      Divider(color: Color(0xff34495E).withOpacity(0.2)),
      SizedBox(height: 15),
      Table(
        columnWidths: {
          0: FixedColumnWidth(80),
          1: FlexColumnWidth(),
        },
        children: [
          TableRow(
            children: [
              Text(
                'Description',
                style: GoogleFonts.poppins(
                  fontSize: 10,
                  fontWeight: FontWeight.w400,
                  fontStyle: FontStyle.italic,
                  color: Color(0xff34495E),
                ),
              ),
              Text(
                'Praesent vitae neque porta, hendrerit enim sed, temps ante. Suspendisse vitae massa neque. Praesent vitae neque porta, hendrerit enim sed, tempus ante.',
                style: GoogleFonts.poppins(
                  fontSize: 12,
                  fontWeight: FontWeight.w400,
                  color: Color(0xff596780),
                ),
              ),
            ],
          ),
        ],
      ),
      SizedBox(height: 15),
      Divider(color: Color(0xff34495E).withOpacity(0.2)),
    ],
  ),
)

说明 #

两种方法核心都是统一控制第一列的水平空间，避免用随机的间距值或比例导致对齐混乱。FixedColumnWidth的数值可以根据实际文本长度调整，确保最长的第一列文本能完全显示即可。

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