如何让多个ElevatedButton在溢出时自动换行至下一行？

用Wrap组件就能直接实现你要的自动换行需求，再配合按钮样式控制尺寸逻辑，完美适配空按钮和带文本按钮的两种场景：

示例代码 #

Wrap(
  spacing: 8, // 按钮间水平间距
  runSpacing: 8, // 行与行的垂直间距
  children: [
    // 空按钮示例
    ElevatedButton(
      onPressed: () {},
      style: ButtonStyle(
        // 统一最小尺寸，保证空按钮规格一致
        minimumSize: MaterialStateProperty.all(
          Size(MediaQuery.of(context).size.width / 4, 48), // 可调整数值控制一行容纳的空按钮数量
        ),
      ),
      child: const SizedBox.shrink(),
    ),
    // 带文本的按钮示例
    ElevatedButton(
      onPressed: () {},
      style: ButtonStyle(
        minimumSize: MaterialStateProperty.all(
          Size(MediaQuery.of(context).size.width / 4, 48),
        ),
        // 允许按钮宽度随文本自适应，最大不超容器宽度
        maximumSize: MaterialStateProperty.all(const Size(double.infinity, 48)),
      ),
      child: const Text("这是一段较长的按钮文本"),
    ),
    // 可重复添加更多按钮...
  ],
)

关键细节 #

• Wrap组件的核心作用：替代Row组件，当一行空间不足以容纳所有按钮时，自动将溢出的按钮换行，不管是空按钮还是带文本的宽按钮都能适配。
• 按钮尺寸控制：
  • 统一设置minimumSize，确保空按钮尺寸一致，带文本的按钮也不会小于这个基础尺寸。
  • maximumSize限制按钮宽度不会无限扩张，避免单个按钮占满整行。
  • 空按钮用SizedBox.shrink()作为子元素，消除默认的内边距占位。
• 间距调整：通过spacing和runSpacing调整按钮之间的空隙，让布局更整洁。

如果需要空按钮刚好填满一行（比如一行3个），只需要修改minimumSize里的宽度计算，比如MediaQuery.of(context).size.width / 3即可。

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