Flutter中Row内Chips右侧溢出：如何实现自动换行

嘿，这个场景我太熟悉了！Row是单行线性布局，会强制所有子组件挤在一行显示，当总宽度超过父容器时就会出现你看到的溢出提示。要实现Chips自动换行的需求，把Row替换成Wrap组件就搞定了——Wrap会自动根据可用空间调整子组件排列，放不下的内容会自动换到下一行。

修改后的代码示例 #

class ChipsTesting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(30.0),
        // 将原来的Row替换为Wrap
        child: Wrap(
          // 可选：设置Chip之间的水平间距
          spacing: 8.0,
          // 可选：设置行与行之间的垂直间距
          runSpacing: 8.0,
          children: <Widget>[
            Chip(label: Text('芯片1')),
            Chip(label: Text('芯片2')),
            Chip(label: Text('芯片3')),
            Chip(label: Text('很长很长的芯片标签')),
            Chip(label: Text('芯片5')),
            Chip(label: Text('芯片6')),
            // 可继续添加更多Chip
          ],
        ),
      ),
    );
  }
}

为什么这样管用？ #

• Wrap的核心特性是流式布局，它会遍历子组件，当前行空间不足时自动开启新行，完美适配动态数量的Chips场景。
• 通过spacing和runSpacing参数，还能轻松控制Chip间的间距，让布局看起来更舒适自然。

如果之前你用了Row的对齐属性，Wrap也支持alignment参数来调整整体对齐方式，完全能替代Row的大部分布局需求。

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