Flutter中Row内ElevatedButton自适应宽度溢出问题求助

问题出在你用fixedSize固定按钮尺寸，再加上Row的spaceEvenly会在按钮间添加额外间距，导致总宽度超出屏幕；另外当屏幕缩窄时，按钮的文本或内部布局有最小尺寸限制，fixedSize无法突破这个限制，最终引发溢出。

直接用Expanded包裹每个按钮，让它们强制平分Row的宽度，再配合内部布局保证宽高相等，就能实现始终占屏幕1/6宽度的效果：

修改后的代码 #

ElevatedButton simpleButton(String text) {
  return ElevatedButton(
    onPressed: null,
    style: ElevatedButton.styleFrom(
      // 让按钮占满父级分配的所有空间
      minimumSize: Size.infinite,
    ),
    child: AspectRatio(
      aspectRatio: 1, // 强制宽高1:1
      child: Center(
        child: Text(
          text,
          overflow: TextOverflow.ellipsis, // 文本过长时显示省略号，避免溢出
        ),
      ),
    ),
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Row(
        children: [
          Expanded(child: simpleButton("B1")),
          Expanded(child: simpleButton("B2")),
          Expanded(child: simpleButton("B3")),
          Expanded(child: simpleButton("B4")),
          Expanded(child: simpleButton("B5")),
          Expanded(child: simpleButton("B6")),
        ],
      ),
    ),
  );
}

关键修改点 #

• Expanded：每个按钮被Expanded包裹后，会自动平分Row的可用宽度，不管屏幕怎么缩放，每个按钮始终占1/6的宽度。
• minimumSize: Size.infinite：让按钮尽可能填充Expanded分配的空间，避免按钮因内容过小而缩窄。
• AspectRatio：保证按钮的宽高始终相等，替代原来的fixedSize，适配动态变化的宽度。
• TextOverflow.ellipsis：防止屏幕过窄时，按钮内的文本超出边界。

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