如何在SingleChildScrollView中实现无需手动配置的随机尺寸容器布局

你需要的这种随机错落不等高的布局可以自动实现，无需手动逐个配置每个容器参数，具体操作如下：

方案1：使用第三方组件（推荐，实现成本最低） #

直接用Flutter生态成熟的交错网格组件flutter_staggered_grid_view实现，步骤如下：

• 在pubspec.yaml中添加对应版本的flutter_staggered_grid_view依赖并执行flutter pub get
• 组件嵌套逻辑为SingleChildScrollView → StaggeredGrid.count，设置crossAxisCount: 2（对应截图的2列布局）
• 给每个子项的高度设置随机值即可，组件会自动完成排列对齐，不需要手动调整每个容器的位置参数

方案2：原生无依赖实现 #

如果不想引入第三方库，可以用原生组件组合实现：

• 提前生成所有容器的随机高度，可根据需求设置高度区间，比如100~300dp之间随机
• 维护两个列表分别承载左右两列的容器组件，同时记录两列的当前总高度
• 每次新增容器时，将其加入总高度更小的一列，避免出现单侧高度差过大的问题
• 最终将两个装了容器的Column放到Row中，再塞到SingleChildScrollView的child属性即可

核心实现代码示例：

import 'dart:math';
import 'package:flutter/material.dart';

class RandomStaggeredLayout extends StatelessWidget {
  RandomStaggeredLayout({super.key});

  // 生成15个随机高度的容器，高度范围100~280dp
  final List<double> itemHeights = List.generate(15, (_) => Random().nextInt(180) + 100);
  final double itemMargin = 8;

  @override
  Widget build(BuildContext context) {
    List<Widget> leftItems = [];
    List<Widget> rightItems = [];
    double leftTotal = 0;
    double rightTotal = 0;

    for (double height in itemHeights) {
      if (leftTotal <= rightTotal) {
        leftItems.add(_buildItem(height));
        leftTotal += height + itemMargin * 2;
      } else {
        rightItems.add(_buildItem(height));
        rightTotal += height + itemMargin * 2;
      }
    }

    return SingleChildScrollView(
      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(child: Column(children: leftItems)),
          Expanded(child: Column(children: rightItems)),
        ],
      ),
    );
  }

  Widget _buildItem(double height) {
    return Container(
      height: height,
      margin: EdgeInsets.all(itemMargin),
      decoration: BoxDecoration(
        color: Colors.grey.shade300,
        borderRadius: BorderRadius.circular(12),
      ),
    );
  }
}

以上两种方案都可以实现截图中的随机错落布局，完全不需要手动逐个配置每个容器的位置和排列规则。

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