如何修复Row组件中出现的“右侧溢出39像素”错误？

问题原因 #

你当前的布局中，两个Expanded组件平分了父Row的宽度，但内部Text组件未做溢出处理，若文本内容过长，就会超出分配的可用空间，触发右侧溢出警告。

修复方案 #

方案1：给文本添加溢出处理 #

在两个Text组件中增加溢出配置，限制文本仅显示一行，超出部分用省略号代替：

Text(
  profileName,
  style: categoryNF,
  overflow: TextOverflow.ellipsis,
  maxLines: 1,
)

Text(
  "$likes Likes",
  style: categoryNF,
  overflow: TextOverflow.ellipsis,
  maxLines: 1,
)

方案2：优化内部Row的布局约束 #

给内部两个子Row添加垂直居中配置，同时设置mainAxisSize: MainAxisSize.min让子Row仅占用自身内容宽度，避免不必要的空间占用：

// Profile区域内部Row
Expanded(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [
      // 原有按钮和Text组件
    ],
  ),
)

// Likes区域内部Row
Expanded(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.end,
    mainAxisSize: MainAxisSize.min,
    children: [
      // 原有IconButton和Text组件
    ],
  ),
)

方案3：改用Spacer分隔左右区域 #

如果不需要严格平分宽度，可以移除两个Expanded，用Spacer填充中间空白，让左右区域仅占用自身内容宽度：

SizedBox(
  height: MediaQuery.of(context).size.height * 0.1,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      // Profile区域
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // 原有OutlinedButton组件
          const SizedBox(width: 8),
          Text(profileName, style: categoryNF, overflow: TextOverflow.ellipsis, maxLines: 1),
        ],
      ),
      const Spacer(),
      // Likes区域
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconButton(/* 原有配置 */),
          const SizedBox(width: 4),
          Text("$likes Likes", style: categoryNF, overflow: TextOverflow.ellipsis, maxLines: 1),
        ],
      ),
    ],
  ),
)

完整修复代码示例 #

SizedBox(
  height: MediaQuery.of(context).size.height * 0.1,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      // Profile
      Expanded(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            OutlinedButton(
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => const Profile()),
              ),
              style: OutlinedButton.styleFrom(
                shape: const CircleBorder(),
                padding: const EdgeInsets.all(2),
              ),
              child: CircleAvatar(
                backgroundColor: primary,
                backgroundImage: NetworkImage(profilePath),
                radius: 24,
              ),
            ),
            const SizedBox(width: 8),
            Text(
              profileName,
              style: categoryNF,
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
            ),
          ],
        ),
      ),

      // Likes
      Expanded(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            IconButton(
              onPressed: () => {},
              icon: const Icon(
                Icons.favorite_border,
                size: 32,
                color: Colors.redAccent,
              ),
            ),
            const SizedBox(width: 4),
            Text(
              "$likes Likes",
              style: categoryNF,
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
            ),
          ],
        ),
      ),
    ],
  ),
)

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