Flutter：如何实现Row内标题居中、图标按钮居右且不重叠？

问题描述 #

我遇到的问题和某Stack Overflow帖子完全一致，但未找到有效解决方案。需求是让标题Widget完全居中（标题位于屏幕正中间，右侧固定显示两个图标按钮），同时避免标题过长时覆盖按钮。现有方案会导致标题略微偏左，希望不用Stack组件实现。

当前代码：

SizedBox(
  height: 40,
  width: MediaQuery.of(context).size.width,
  child: Row(
      children: [
        const SizedBox(width: 17),
        Text(
          'TITLE',
          style: const TextStyle(
              color: Colors.white, fontSize: 30, fontWeight: FontWeight.w500),
        ),
        Spacer(),
        Row(
            children: [
              GestureDetector(
                onTap: (){null;},
                child: SizedBox(
                  child: Icon(Icons.wallet_membership, color: Colors.white),
                ),
              ),
              const SizedBox(width: 17),
              GestureDetector(
                onTap: (){Get.toNamed('/wallet_setting');},
                child: const SizedBox(
                  child: Icon(Icons.settings, color: Colors.white),
                ),
              ),
            ]
        )

      ]
  ),
)

实现方案 #

核心思路是通过左侧占位容器匹配右侧按钮的宽度，抵消右侧按钮对标题居中的影响，同时用Expanded+Align确保标题在剩余空间内居中，且标题过长时自动截断避免覆盖按钮。

基础实现代码 #

SizedBox(
  height: 40,
  width: MediaQuery.of(context).size.width,
  child: Row(
    children: [
      // 左侧占位：宽度与右侧按钮容器完全一致
      IntrinsicWidth(
        child: Row(
          children: const [
            SizedBox(width: 17),
            SizedBox(width: 24), // 图标默认宽度
            SizedBox(width: 17),
            SizedBox(width: 24),
            SizedBox(width: 17),
          ],
        ),
      ),
      Expanded(
        child: Align(
          alignment: Alignment.center,
          child: Text(
            'TITLE',
            style: const TextStyle(
              color: Colors.white,
              fontSize: 30,
              fontWeight: FontWeight.w500,
            ),
            overflow: TextOverflow.ellipsis, // 标题过长时截断
            maxLines: 1,
          ),
        ),
      ),
      // 右侧按钮容器
      Row(
        children: [
          GestureDetector(
            onTap: () {},
            child: const SizedBox(
              width: 24,
              child: Icon(Icons.wallet_membership, color: Colors.white),
            ),
          ),
          const SizedBox(width: 17),
          GestureDetector(
            onTap: () {Get.toNamed('/wallet_setting');},
            child: const SizedBox(
              width: 24,
              child: Icon(Icons.settings, color: Colors.white),
            ),
          ),
          const SizedBox(width: 17),
        ],
      ),
    ],
  ),
)

优雅优化写法（避免重复代码） #

final rightButtons = Row(
  children: [
    GestureDetector(
      onTap: () {},
      child: const SizedBox(
        width: 24,
        child: Icon(Icons.wallet_membership, color: Colors.white),
      ),
    ),
    const SizedBox(width: 17),
    GestureDetector(
      onTap: () {Get.toNamed('/wallet_setting');},
      child: const SizedBox(
        width: 24,
        child: Icon(Icons.settings, color: Colors.white),
      ),
    ),
    const SizedBox(width: 17),
  ],
);

SizedBox(
  height: 40,
  width: MediaQuery.of(context).size.width,
  child: Row(
    children: [
      IntrinsicWidth(child: rightButtons), // 左侧自动匹配右侧按钮宽度
      Expanded(
        child: Align(
          alignment: Alignment.center,
          child: Text(
            'TITLE',
            style: const TextStyle(
              color: Colors.white,
              fontSize: 30,
              fontWeight: FontWeight.w500,
            ),
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
          ),
        ),
      ),
      rightButtons,
    ],
  ),
)

方案说明 #

• 左侧占位容器通过IntrinsicWidth自动匹配右侧按钮的实际宽度，确保标题的居中参考系是整个屏幕宽度，解决了原方案标题偏左的问题
• Expanded让标题区域占据左右占位/按钮之外的全部空间，Align确保标题在该区域内严格居中
• 设置overflow: TextOverflow.ellipsis和maxLines:1，解决标题过长时的显示问题，避免覆盖右侧按钮

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