Flutter布局疑问：如何在Row中居中一个Widget并将另一个靠右放置

要实现文本在屏幕水平居中，图标固定在屏幕右侧的效果，你原来的Row布局方式没法满足需求——因为Row的mainAxisAlignment是控制子组件在Row范围内的对齐，而你需要让文本无视图标的存在，始终在屏幕正中间，图标则贴在右侧边缘。

直接用下面的代码就能实现：

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Row(
      children: const [
        // 用Expanded占据除图标外的所有空间，内部让文本居中
        Expanded(
          child: Center(
            child: Text(
              'Today',
              style: TextStyle(
                color: Colors.blue,
                fontSize: 26,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
        ),
        // 图标直接放在Row末尾，自动贴右侧
        Icon(
          Icons.pause_circle_outline,
          color: Colors.blue,
          size: 50,
        )
      ],
    )
  ],
)

原理说明 #

• Expanded会填充Row中除Icon外的剩余水平空间，这样内部的Center就能让Text在整个屏幕的水平中心位置显示
• Icon不需要额外对齐设置，直接放在Row的最后，就会自动靠向屏幕右侧边缘

如果你想用Stack实现也可以，不过Row+Expanded的方式更简洁，性能也更好：

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Stack(
      alignment: Alignment.center,
      children: const [
        Text(
          'Today',
          style: TextStyle(
            color: Colors.blue,
            fontSize: 26,
            fontWeight: FontWeight.w600,
          ),
        ),
        Positioned(
          right: 0, // 距离右侧边缘0距离
          child: Icon(
            Icons.pause_circle_outline,
            color: Colors.blue,
            size: 50,
          ),
        )
      ],
    )
  ],
)

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