Flutter中有没有替代Android FlexBoxLayout的布局实现方案？

你遇到的Row溢出报错是因为Row是单行布局组件，不会自动折行，Flutter官方自带的Wrap组件完全可以替代Android的FlexBoxLayout实现自动换行布局效果。

基础实现代码 #

Wrap(
  // 布局方向，默认水平方向和Row逻辑一致
  direction: Axis.horizontal,
  // 同一行内子组件的横向间距
  spacing: 8,
  // 行与行之间的纵向间距
  runSpacing: 8,
  // 子组件主轴对齐方式
  alignment: WrapAlignment.start,
  children: const [
    // 此处替换为你原本要放在Row中的所有子组件即可
    Chip(label: Text('标签1')),
    Chip(label: Text('长文本测试标签2')),
    Chip(label: Text('标签3')),
    Chip(label: Text('超长文本测试自动换行效果的标签4')),
    Chip(label: Text('标签5')),
    Chip(label: Text('标签6')),
  ],
)

常用配置属性 #

• direction：控制布局方向，默认Axis.horizontal为水平排列，设为Axis.vertical可实现垂直方向满了自动换列
• spacing：同一行/列内子元素之间的间距
• runSpacing：行与行（水平布局场景）、列与列（垂直布局场景）之间的间距
• alignment：主轴方向子元素对齐规则，支持WrapAlignment.start、WrapAlignment.center、WrapAlignment.spaceBetween等常用对齐逻辑
• runAlignment：纵轴方向行/列的对齐规则

如果需要更复杂的流式布局特性，可引入第三方库flutter_staggered_grid_view实现，基础自动换行需求用系统自带的Wrap组件即可，无需额外依赖。

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