Flutter Row布局如何固定左侧Icon并实现文本水平居中

你要实现的效果参考如下：

现有代码问题说明 #

你当前使用左右两个Spacer的写法，仅在文本较短时能实现近似居中效果，存在两个问题：

• 文本过长时会挤压两侧Spacer空间，出现文本贴靠左侧按钮的情况
• 标题的居中是相对于左右Spacer的剩余空间，而非整个导航栏容器，居中精度不足

推荐实现方案 #

方案1：对称占位适配（最小改动） #

保持Row的布局结构，将右侧Spacer替换为和左侧按钮区域等宽的占位框，保证中间文本区域严格对称居中：

child: Column(
  children: [
    Container(
      color: mPrimaryColor,
      height: MediaQuery.of(context).size.height / 23,
      width: MediaQuery.of(context).size.width,
      child: Row(
        children: [
          const SizedBox(width: 15),
          InkWell(
            onTap: () => Navigator.pop(context),
            child: Container(
              height: MediaQuery.of(context).size.height / 23,
              width: 30,
              child: Icon(
                Icons.arrow_back_ios_rounded,
                size: 20,
                color: whitetext,
              ),
            ),
          ),
          const Expanded(
            child: Text(
              "ADMINISTRATIVE CONTACT",
              style: headingWhite(),
              textAlign: TextAlign.center,
            ),
          ),
          // 右侧占位宽度和左侧总宽度（15+30）一致，保证对称
          const SizedBox(width: 45),
        ],
      ),
    ),
  ],
)

方案2：Stack布局（精准居中） #

如果要求标题完全相对于整个导航栏容器居中，不受左右元素尺寸影响，用Stack布局是行业通用的导航栏实现方案：

child: Column(
  children: [
    Container(
      color: mPrimaryColor,
      height: MediaQuery.of(context).size.height / 23,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 标题优先居中布局
          Text(
            "ADMINISTRATIVE CONTACT",
            style: headingWhite(),
            textAlign: TextAlign.center,
          ),
          // 左侧按钮固定在左边缘，不影响标题位置
          Positioned(
            left: 15,
            child: InkWell(
              onTap: () => Navigator.pop(context),
              child: Icon(
                Icons.arrow_back_ios_rounded,
                size: 20,
                color: whitetext,
              ),
            ),
          )
        ],
      ),
    ),
  ],
)

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