Flutter中如何让Row内组件垂直居中并以圆点分隔？

关键优化点 #

• 明确设置Row的crossAxisAlignment: CrossAxisAlignment.center，确保所有子组件整体垂直居中
• 给每个Text添加textAlignVertical: TextAlignVertical.center，保证文本自身在容器内垂直对齐
• 优化圆点分隔符：通过height:1消除默认行高带来的偏移，overflow: TextOverflow.clip确保填满剩余空间
• 抽离分隔符为独立组件，减少重复代码

优化后的完整代码 #

Widget _text2Value({
  required String title,
  required String value1,
  required String uom,
  required String value2,
}) {
  // 抽离可复用的圆点分隔符
  Widget _dotSeparator() {
    return Expanded(
      child: Text(
        '.' * 100,
        maxLines: 1,
        overflow: TextOverflow.clip,
        style: const TextStyle(
          fontSize: 8,
          height: 1, // 消除Text默认行高，让圆点与文本基线对齐
        ),
      ),
    );
  }

  return Row(
    crossAxisAlignment: CrossAxisAlignment.center, // 强制所有子组件垂直居中
    children: [
      Text(
        title,
        style: const TextStyle(fontSize: 8),
        textAlignVertical: TextAlignVertical.center,
      ),
      _dotSeparator(),
      Text(
        "$value1 $uom",
        style: const TextStyle(fontSize: 8),
        textAlignVertical: TextAlignVertical.center,
      ),
      _dotSeparator(),
      Text(
        value2,
        style: const TextStyle(fontSize: 8),
        textAlignVertical: TextAlignVertical.center,
      ),
    ],
  );
}

补充说明 #

如果需要圆点之间有均匀间距（而非连续点），可以替换_dotSeparator为以下自定义组件：

Widget _spacedDotSeparator() {
  return Expanded(
    child: LayoutBuilder(
      builder: (context, constraints) {
        final int dotCount = (constraints.maxWidth / 6).floor(); // 6为圆点间距，可自行调整
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: List.generate(dotCount, (_) => const Text('.', style: TextStyle(fontSize:8))),
        );
      },
    ),
  );
}

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