Flutter：如何让Column组件中的数字按小数点对齐？

方案一：拆分数字分段对齐（自定义Row组合） #

将每个数字拆分为整数部分、小数点、小数部分，分别放在固定宽度的容器中，整数部分右对齐、小数部分左对齐，确保小数点位置统一。配合等宽字体可进一步提升对齐精度。

示例代码：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    AlignedNumberItem(number: -123.45),
    AlignedNumberItem(number: 67.8),
    AlignedNumberItem(number: 9.012),
    AlignedNumberItem(number: -0.5),
  ],
)

class AlignedNumberItem extends StatelessWidget {
  final double number;
  const AlignedNumberItem({super.key, required this.number});

  @override
  Widget build(BuildContext context) {
    // 统一保留3位小数，确保格式一致
    final formatted = number.toStringAsFixed(3);
    final parts = formatted.split('.');
    final integerPart = parts[0];
    final decimalPart = parts[1];

    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 固定整数部分宽度，右对齐
        SizedBox(
          width: 60,
          child: Text(
            integerPart,
            textAlign: TextAlign.right,
            style: const TextStyle(fontFamily: 'Courier'), // 等宽字体
          ),
        ),
        const Text('.'),
        // 固定小数部分宽度，左对齐
        SizedBox(
          width: 40,
          child: Text(
            decimalPart,
            textAlign: TextAlign.left,
            style: const TextStyle(fontFamily: 'Courier'),
          ),
        ),
      ],
    );
  }
}

方案二：使用DataTable组件（自带对齐能力） #

DataTable的列支持numeric: true属性，开启后数字会自动右对齐，配合等宽字体即可实现小数点对齐，适合需要表格展示的场景。

示例代码：

DataTable(
  columns: const [
    DataColumn(
      label: Text('数值'),
      numeric: true, // 开启数字对齐
    ),
  ],
  rows: const [
    DataRow(cells: [DataCell(Text('-123.45', style: TextStyle(fontFamily: 'Courier')))]),
    DataRow(cells: [DataCell(Text('67.800', style: TextStyle(fontFamily: 'Courier')))]),
    DataRow(cells: [DataCell(Text('9.012', style: TextStyle(fontFamily: 'Courier')))]),
    DataRow(cells: [DataCell(Text('-0.500', style: TextStyle(fontFamily: 'Courier')))]),
  ],
)

方案三：等宽字体+右对齐（最简方案） #

如果所有数字统一小数位数，直接使用等宽字体并设置TextAlign.right，利用等宽字体的字符宽度一致性，实现小数点自然对齐。

示例代码：

Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: const [
    Text('-123.45', style: TextStyle(fontFamily: 'Courier')),
    Text('67.800', style: TextStyle(fontFamily: 'Courier')),
    Text('9.012', style: TextStyle(fontFamily: 'Courier')),
    Text('-0.500', style: TextStyle(fontFamily: 'Courier')),
  ],
)

关键注意点 #

• 等宽字体：推荐使用Courier、Roboto Mono、Consolas等，确保数字、符号的宽度一致，避免因字体导致的偏移。
• 统一小数位数：通过toStringAsFixed(n)或NumberFormat格式化数字，保证所有数字的小数部分长度相同，对齐更精准。
• 动态宽度适配：如果数字长度不确定，可先遍历所有数字计算最长整数部分的宽度，再动态设置容器宽度，适配更多场景。

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