如何在Dart中将‘Home’文本居中同时保留右侧头像？

你当前的问题是Home文本无法在整个导航栏容器中精准居中，原因是Expanded会占据右侧头像之外的剩余空间，导致Home的居中范围被限制在剩余区域内，而非整个容器。以下是两种可行的解决方案：

方案1：使用Stack布局 #

Stack可以让Home文本直接基于整个容器居中，同时将头像固定在右侧：

child: Container(
  margin: const EdgeInsets.only(top: 35),
  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16), // 添加水平内边距避免头像贴边
  color: const Color(0xFFFF6947),
  child: Stack(
    alignment: Alignment.center,
    children: [
      Text(
        'Home',
        style: TextStyle(
          color: Colors.white,
          fontSize: 35,
          fontWeight: FontWeight.bold,
          shadows: [
            Shadow(
              color: Colors.black.withOpacity(0.5),
              blurRadius: 5,
              offset: const Offset(1, 5),
            ),
          ],
        ),
      ),
      const Positioned(
        right: 0,
        child: CircleAvatar(
          backgroundImage: AssetImage('assets/images/jerrymeme.jpg'),
          radius: 20,
        ),
      ),
    ],
  ),
),

方案2：添加左侧占位容器 #

在左侧放置一个和头像宽度一致的占位容器，让Row左右两侧宽度相等，中间的Home自然就处于容器中心：

child: Container(
  margin: const EdgeInsets.only(top: 35),
  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
  color: const Color(0xFFFF6947),
  child: Row(
    children: [
      // 占位容器宽度和头像直径一致（radius*2=40）
      const SizedBox(width: 40),
      const Expanded(
        child: Text(
          'Home',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
            fontSize: 35,
            fontWeight: FontWeight.bold,
            shadows: [
              Shadow(
                color: Colors.black.withOpacity(0.5),
                blurRadius: 5,
                offset: Offset(1, 5),
              ),
            ],
          ),
        ),
      ),
      const CircleAvatar(
        backgroundImage: AssetImage('assets/images/jerrymeme.jpg'),
        radius: 20,
      ),
    ],
  ),
),

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