Flutter中含三个不同长度元素的Row如何让中间元素居中、两侧靠边？

要实现左右元素靠向边缘、中间元素精确居中的效果，你需要调整Row的布局结构，避免用三个Expanded平分宽度（这会导致元素被拉伸，无法贴合边缘）。以下是可行的代码实现：

Row(
  children: [
    // 左侧元素：自身宽度，自然左对齐
    Text(
      'el',
      style: TextStyle(
        fontSize: 16,
        color: Color(0xFFD50000),
      ),
    ),
    // 中间元素：占满剩余空间并强制居中
    Expanded(
      child: Center(
        child: Text('elem',
            style: TextStyle(
              color: Colors.black,
              fontSize: 16,
            )),
      ),
    ),
    // 右侧元素：自身宽度，自然右对齐
    Text('longest elem',
        style: TextStyle(
          fontSize: 16,
          color: Color(0xFFD50000),
        )),
  ],
)

原理说明 #

• 左右两侧的元素直接作为Row的子组件，不使用Expanded，这样它们会根据自身内容宽度显示，自动贴合Row的左右边缘。
• 中间元素用Expanded包裹，占据Row中左右元素之外的所有剩余空间，再通过Center组件让文本在整个Row的水平中心位置显示，实现精确居中的效果。

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