Flutter如何在Wrap组件内开启新行？替代Web的<br/>标签

一、实现等效于Web <br/> 的换行组件 #

Wrap的布局逻辑是子组件总宽度超出当前行剩余空间时自动换行，我们可以利用这一点自定义强制换行组件，适配任意类型子组件的场景：

class WrapBreak extends StatelessWidget {
  const WrapBreak({super.key});

  @override
  Widget build(BuildContext context) {
    // 宽度设为无穷大，强制Wrap触发换行
    return const SizedBox(width: double.infinity);
  }
}

直接替换你代码中的break_Line_widget即可使用：

Wrap(
  children: [widget1, widget2, const WrapBreak(), widget3, ...]
)

二、实现Wrap内占满当前行全部可用空间的组件 #

因为Expanded仅支持Row/Column，我们可以通过LayoutBuilder获取Wrap当前行的剩余宽度，自定义类似功能的组件：

class WrapExpanded extends StatelessWidget {
  final Widget child;
  
  const WrapExpanded({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 将子组件宽度设为当前行剩余最大宽度
        return SizedBox(
          width: constraints.maxWidth,
          child: child,
        );
      },
    );
  }
}

使用时将需要占满行的子组件嵌套进去：

Wrap(
  children: [
    widget1,
    WrapExpanded(child: widget2), // 占满当前行剩余空间
    widget3,
    const WrapBreak(),
    widget4,
  ]
)

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