Flutter中Wrap组件如何实现元素先纵向排满列再换列排列？

当前使用Wrap组件实现两列复选框列表，实现代码如下：

Wrap(
  direction: Axis.horizontal,
  children: _propertyTypes.map((propertyType) {
    var halfWidth = (getWidth(context) - AppPadding.standard) / 2;

    return SizedBox(
      width: halfWidth,
      child: CustomCheckbox(
        key: UniqueKey(),
        label: propertyType.toDescription(),
        labelFontSize: Theme.of(context).textTheme.bodyMedium!.fontSize!,
        isChecked: criteria.propertyTypeIds!.contains(propertyTypeEnumMap[propertyType]),
        borderColor: AppColor.colorBlue500,
      ),
    );
  }).toList(),
)

默认横向配置下Wrap为横向优先排列：第1个元素位于第1行第1列，第2个元素位于第1行第2列，第3个元素位于第2行第1列，逐行填充。
期望排列逻辑为纵向优先：元素先沿第一列从上到下排布，排满后再填充第二列，例如10个元素时前5个在第一列、后5个在第二列。原生Wrap组件无直接配置可实现该逻辑，以下是可落地的实现方案。

方案1：固定两列场景-手动拆分数组+Row嵌套Column #

如果业务上固定为两列布局，这是最轻量、可控性最高的方案，不需要引入额外依赖，核心逻辑是把原数组拆分为两组，外层用横向Row放两个等宽的纵向Column，每个Column承载一组复选框。
实现代码：

// 计算单列承载的元素数量，总个数除以2向上取整，兼容奇数个元素的场景
final int singleColumnCount = (_propertyTypes.length / 2).ceil();
// 拆分为两列对应的数据
final column1Items = _propertyTypes.sublist(0, singleColumnCount);
final column2Items = _propertyTypes.sublist(singleColumnCount);

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Expanded(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: column1Items.map((propertyType) {
          return SizedBox(
            width: double.infinity,
            child: CustomCheckbox(
              key: UniqueKey(),
              label: propertyType.toDescription(),
              labelFontSize: Theme.of(context).textTheme.bodyMedium!.fontSize!,
              isChecked: criteria.propertyTypeIds!.contains(propertyTypeEnumMap[propertyType]),
              borderColor: AppColor.colorBlue500,
            ),
          );
        }).toList(),
      ),
    ),
    // 两列之间保留原逻辑的间距
    const SizedBox(width: AppPadding.standard),
    Expanded(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: column2Items.map((propertyType) {
          return SizedBox(
            width: double.infinity,
            child: CustomCheckbox(
              key: UniqueKey(),
              label: propertyType.toDescription(),
              labelFontSize: Theme.of(context).textTheme.bodyMedium!.fontSize!,
              isChecked: criteria.propertyTypeIds!.contains(propertyTypeEnumMap[propertyType]),
              borderColor: AppColor.colorBlue500,
            ),
          );
        }).toList(),
      ),
    ),
  ],
)

该方案没有Wrap的换行布局测算开销，性能更好，也不会出现宽度计算误差导致的布局溢出问题，复选框高度统一时优先选这个方案。

方案2：动态列数场景-使用瀑布流组件实现纵向优先排布 #

如果后续需要支持动态切换列数、或者子元素高度不统一，可以使用flutter_staggered_grid_view组件实现纵向优先的流布局，不需要手动拆分数组。
引入依赖后实现代码如下：

StaggeredGrid.count(
  crossAxisCount: 2, // 列数，后续改3/4列直接改这个值即可
  mainAxisSpacing: 8, // 元素纵向间距
  crossAxisSpacing: AppPadding.standard, // 列间距
  children: _propertyTypes.map((propertyType) {
    return CustomCheckbox(
      key: UniqueKey(),
      label: propertyType.toDescription(),
      labelFontSize: Theme.of(context).textTheme.bodyMedium!.fontSize!,
      isChecked: criteria.propertyTypeIds!.contains(propertyTypeEnumMap[propertyType]),
      borderColor: AppColor.colorBlue500,
    );
  }).toList(),
)

该组件默认就是纵向优先排布逻辑，会自动按列填充元素，适配性更强。

补充说明 #

原生Wrap如果设置direction: Axis.vertical虽然可以纵向排列，但必须给组件指定明确的高度，否则会触发布局溢出错误，在滚动列表、自适应高度场景下适配成本很高，不推荐使用。

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