Flutter中如何让行内图像保持居中且不受周边文本变化影响

要让Row里的头像完全居中，且位置不受左右文本内容变化影响，别用MainAxisAlignment.spaceAround了，直接把左右两侧的Text组件用Expanded包裹就行。

修改后的完整代码片段：

body: Column(
  children: [
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 50,
        child: const Row(
          children: [
            Expanded(child: Text('2')),
            Padding(
              padding: EdgeInsets.all(2),
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/images/2.jpg'),
              ),
            ),
            Expanded(child: Text('James Doe')),
            // ... 其他后续组件
          ],
        ),
      ),
    ),
    // ... 其他Column子组件
  ],
),

原理说明 #

• Expanded会让子组件填充Row的可用空间，左右两个Expanded默认平分剩余空间，直接把中间的头像挤到Row的正中间。
• 不管左边的数字、右边的名字长度怎么变，左右的Text只会在各自分配的空间里换行或收缩，完全不会影响中间头像的位置。

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