Flutter中如何实现类似PDF表单的冒号与值对齐布局？

下面提供几种实用的解决方法，帮你实现冒号和对应值的精准对齐：

方法一：使用Table组件（推荐） #

Table的列布局天然适配这种对齐场景，通过设置列宽规则，能直接让冒号和值列统一对齐：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Table(
      columnWidths: const {
        0: FlexColumnWidth(2), // 标签列按比例分配空间
        1: FixedColumnWidth(18), // 冒号列固定宽度
        2: FlexColumnWidth(3), // 值列按比例分配空间
      },
      children: [
        TableRow(children: [
          Text('Jenis Layanan'),
          Text(':'),
          Text('Konsultasi'),
        ]),
        TableRow(children: [
          Text('Durasi'),
          Text(':'),
          Text('60 Menit'),
        ]),
        TableRow(children: [
          Text('Harga'),
          Text(':'),
          Text('Rp 500.000'),
        ]),
      ],
    ),
  ],
)

通过columnWidths定义各列的宽度规则，FlexColumnWidth会按比例分配剩余空间，FixedColumnWidth固定冒号的宽度，确保所有行的冒号位置完全一致，值列也自然对齐。

方法二：固定标签宽度+Row布局 #

给左侧标签文本设置固定宽度，让冒号的位置固定下来：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Row(
      children: [
        SizedBox(
          width: 120, // 根据实际需求调整标签宽度
          child: Text('Jenis Layanan'),
        ),
        const Text(':'),
        const SizedBox(width: 8), // 冒号与值的间距
        Text('Konsultasi'),
      ],
    ),
    const SizedBox(height: 8),
    Row(
      children: [
        SizedBox(
          width: 120,
          child: Text('Durasi'),
        ),
        const Text(':'),
        const SizedBox(width: 8),
        Text('60 Menit'),
      ],
    ),
    const SizedBox(height: 8),
    Row(
      children: [
        SizedBox(
          width: 120,
          child: Text('Harga'),
        ),
        const Text(':'),
        const SizedBox(width: 8),
        Text('Rp 500.000'),
      ],
    ),
  ],
)

如果需要适配不同设备，可以用MediaQuery动态计算宽度，比如width: MediaQuery.of(context).size.width * 0.35，确保在不同屏幕上标签宽度比例一致。

方法三：IntrinsicWidth统一行宽 #

利用IntrinsicWidth让所有行的宽度统一，再结合spaceBetween实现对齐：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    IntrinsicWidth(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('Jenis Layanan'),
              Row(
                children: const [
                  Text(':'),
                  SizedBox(width: 8),
                  Text('Konsultasi'),
                ],
              ),
            ],
          ),
          const SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('Durasi'),
              Row(
                children: const [
                  Text(':'),
                  SizedBox(width: 8),
                  Text('60 Menit'),
                ],
              ),
            ],
          ),
          const SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('Harga'),
              Row(
                children: const [
                  Text(':'),
                  SizedBox(width: 8),
                  Text('Rp 500.000'),
                ],
              ),
            ],
          ),
        ],
      ),
    ),
  ],
)

IntrinsicWidth会让子Column的宽度适配最宽的一行，再通过MainAxisAlignment.spaceBetween把标签和冒号+值的组合推到两端，间接实现冒号对齐的效果。

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