Flutter：含Expanded的Row如何在空间不足时自动换行？

你遇到的错误是因为Expanded仅能在Row/Column这类Flex组件中使用，它依赖Flex的布局逻辑分配剩余空间；而Wrap的布局机制和Flex完全不同，无法识别Expanded的ParentData，所以直接替换会报错。

要实现「空间不足时自动换行，且每行元素填满当前行」的效果，有以下两种可行方案：

方案一：原生实现动态分组布局 #

通过LayoutBuilder获取可用宽度，计算每行能容纳的元素数量，将元素分组后放入Row+Expanded中，自动适配换行。

自定义组件代码 #

class ResponsiveFillWrap extends StatelessWidget {
  final List<Widget> children;
  final double minChildWidth; // 子元素的最小宽度，低于这个值就换行

  const ResponsiveFillWrap({
    super.key,
    required this.children,
    this.minChildWidth = 140,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final availableWidth = constraints.maxWidth;
        // 计算每行最多能放几个元素
        final itemsPerRow = max(1, (availableWidth / minChildWidth).floor());

        // 把元素分成若干行
        final rows = <List<Widget>>[];
        for (int i = 0; i < children.length; i += itemsPerRow) {
          rows.add(
            children.sublist(i, min(i + itemsPerRow, children.length)),
          );
        }

        // 每行用Row+Expanded实现填满效果
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: rows.map((rowItems) {
            return Row(
              children: rowItems.map((item) => Expanded(child: item)).toList(),
            );
          }).toList(),
        );
      },
    );
  }
}

使用示例 #

return Scaffold(
  appBar: AppBar(title: Text(widget.title)),
  body: Center(
    child: ResponsiveFillWrap(
      minChildWidth: 150, // 根据你的需求调整最小宽度
      children: [
        element("Sun Glasses"),
        element("Hat"),
        element("Shoes"),
        element("Bag"),
        element("Watch"),
      ],
    ),
  ),
);

方案二：使用第三方包flex_wrap #

这个包封装了Flex和Wrap的特性，支持在类Wrap布局中使用Expanded/Flexible，无需自己写逻辑。

步骤1：添加依赖 #

在pubspec.yaml中加入：

dependencies:
  flex_wrap: ^1.0.0 # 替换为最新版本

步骤2：使用组件 #

import 'package:flex_wrap/flex_wrap.dart';

// ...

return Scaffold(
  appBar: AppBar(title: Text(widget.title)),
  body: Center(
    child: FlexWrap(
      direction: Axis.horizontal,
      children: [
        Expanded(child: element("Sun Glasses")),
        Expanded(child: element("Hat")),
        Expanded(child: element("Shoes")),
        Expanded(child: element("Bag")),
      ],
    ),
  ),
);

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