Flutter Row布局问题：如何让标题精准居中而非两端分布

要让标题严格处于屏幕正中央，MainAxisAlignment.spaceBetween肯定不行——它是让三个组件两端对齐，中间标题的位置完全受左右组件宽度影响。给你两个实用方案：

方案一：用Stack实现绝对居中（推荐） #

Stack布局能让标题不受左右组件干扰，直接固定在屏幕中心，左右组件单独放在两侧：

Stack(
  alignment: Alignment.center,
  children: [
    // 标题直接居中
    const Text(
      "TITLE",
      style: TextStyle(
        fontFamily: "IBM",
        fontWeight: FontWeight.bold,
        fontSize: 20,
        color: Colors.black,
      ),
    ),
    // 左侧头像固定在屏幕左边
    Positioned(
      left: 0,
      child: Container(
        width: 35,
        height: 35,
        decoration: const BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(image: NetworkImage("...")),
            color: Colors.white),
      ),
    ),
    // 右侧Timer固定在屏幕右边
    Positioned(
      right: 0,
      child: Timer(),
    ),
  ],
)

这个方案不管左右组件宽度是多少，标题始终在屏幕正中央，适配性最强。

方案二：让Row左右宽度对等 #

如果不想用Stack，可以强制让左右两侧的占位宽度一致，中间用Expanded+Center来居中标题：

Row(
  children: [
    // 左侧头像
    Container(
      width: 35,
      height: 35,
      decoration: const BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(image: NetworkImage("...")),
          color: Colors.white),
    ),
    // 中间标题占满剩余空间并居中
    const Expanded(
      child: Center(
        child: Text(
          "TITLE",
          style: TextStyle(
            fontFamily: "IBM",
            fontWeight: FontWeight.bold,
            fontSize: 20,
            color: Colors.black,
          ),
        ),
      ),
    ),
    // 右侧Timer套一个和左侧同宽的容器，保证左右宽度一致
    SizedBox(
      width: 35,
      child: Timer(),
    ),
  ],
)

注意：这个方案要求右侧Timer的宽度不能超过你设置的35，否则会被截断。如果Timer宽度不固定，优先用方案一。

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