空间不足时让ListView上移，空间充足时均匀布局元素

要实现这种自适应布局，核心思路是根据可用空间动态切换布局组件：当空间足够时用Column让元素均匀分布，空间不足时用ListView并设置初始滚动位置，确保2-5号元素初始可见，第一个元素仅显示部分。

步骤1：固定子元素高度场景（简单易用） #

如果你的子元素高度是已知固定值，直接通过LayoutBuilder获取可用空间，计算总高度后判断布局方式：

@override
Widget build(BuildContext context) {
  // 假设固定高度：第一个元素120，其余每个80
  final double firstItemHeight = 120;
  final double otherItemHeight = 80;
  final double totalItemHeight = firstItemHeight + otherItemHeight * 4;

  return Scaffold(
    body: LayoutBuilder(
      builder: (context, constraints) {
        final double availableHeight = constraints.maxHeight;
        
        if (totalItemHeight <= availableHeight) {
          // 空间充足：用Column让元素均匀分布，1号触顶，5号触底
          return Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              SizedBox(height: firstItemHeight, child: Container(color: Colors.red, child: const Center(child: Text('1号元素')))),
              SizedBox(height: otherItemHeight, child: Container(color: Colors.blue, child: const Center(child: Text('2号元素')))),
              SizedBox(height: otherItemHeight, child: Container(color: Colors.green, child: const Center(child: Text('3号元素')))),
              SizedBox(height: otherItemHeight, child: Container(color: Colors.yellow, child: const Center(child: Text('4号元素')))),
              SizedBox(height: otherItemHeight, child: Container(color: Colors.purple, child: const Center(child: Text('5号元素')))),
            ],
          );
        } else {
          // 空间不足：用ListView，设置初始滚动偏移，让2-5号元素完全可见，1号仅显示部分
          final double initialOffset = firstItemHeight - (availableHeight - otherItemHeight * 4);
          return ListView(
            padding: EdgeInsets.zero,
            controller: ScrollController(initialScrollOffset: initialOffset),
            children: [
              SizedBox(height: firstItemHeight, child: Container(color: Colors.red, child: const Center(child: Text('1号元素')))),
              SizedBox(height: otherItemHeight, child: Container(color: Colors.blue, child: const Center(child: Text('2号元素')))),
              SizedBox(height: otherItemHeight, child: Container(color: Colors.green, child: const Center(child: Text('3号元素')))),
              SizedBox(height: otherItemHeight, child: Container(color: Colors.yellow, child: const Center(child: Text('4号元素')))),
              SizedBox(height: otherItemHeight, child: Container(color: Colors.purple, child: const Center(child: Text('5号元素')))),
            ],
          );
        }
      },
    ),
  );
}

步骤2：动态子元素高度场景（适配不确定高度） #

如果子元素高度不固定，需要先获取实际高度再判断布局，可通过GlobalKey结合WidgetsBinding实现：

class AdaptiveLayoutPage extends StatefulWidget {
  const AdaptiveLayoutPage({super.key});

  @override
  State<AdaptiveLayoutPage> createState() => _AdaptiveLayoutPageState();
}

class _AdaptiveLayoutPageState extends State<AdaptiveLayoutPage> {
  final List<GlobalKey> itemKeys = List.generate(5, (_) => GlobalKey());
  double totalItemHeight = 0;
  bool isLayoutCalculated = false;

  @override
  void initState() {
    super.initState();
    // 布局完成后计算总高度
    WidgetsBinding.instance.addPostFrameCallback((_) {
      calculateTotalHeight();
    });
  }

  void calculateTotalHeight() {
    double total = 0;
    for (var key in itemKeys) {
      final renderBox = key.currentContext?.findRenderObject() as RenderBox?;
      if (renderBox != null) {
        total += renderBox.size.height;
      }
    }
    setState(() {
      totalItemHeight = total;
      isLayoutCalculated = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: isLayoutCalculated
          ? LayoutBuilder(
              builder: (context, constraints) {
                final double availableHeight = constraints.maxHeight;
                if (totalItemHeight <= availableHeight) {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(key: itemKeys[0], color: Colors.red, child: const Text('1号动态高度元素')),
                      Container(key: itemKeys[1], color: Colors.blue, child: const Text('2号动态高度元素')),
                      Container(key: itemKeys[2], color: Colors.green, child: const Text('3号动态高度元素')),
                      Container(key: itemKeys[3], color: Colors.yellow, child: const Text('4号动态高度元素')),
                      Container(key: itemKeys[4], color: Colors.purple, child: const Text('5号动态高度元素')),
                    ],
                  );
                } else {
                  // 获取2-5号元素总高度
                  double otherItemsHeight = 0;
                  for (int i = 1; i < itemKeys.length; i++) {
                    final renderBox = itemKeys[i].currentContext?.findRenderObject() as RenderBox?;
                    if (renderBox != null) {
                      otherItemsHeight += renderBox.size.height;
                    }
                  }
                  final firstItemRenderBox = itemKeys[0].currentContext?.findRenderObject() as RenderBox?;
                  final firstItemHeight = firstItemRenderBox?.size.height ?? 0;
                  final double initialOffset = firstItemHeight - (availableHeight - otherItemsHeight);
                  return ListView(
                    padding: EdgeInsets.zero,
                    controller: ScrollController(initialScrollOffset: initialOffset),
                    children: [
                      Container(key: itemKeys[0], color: Colors.red, child: const Text('1号动态高度元素')),
                      Container(key: itemKeys[1], color: Colors.blue, child: const Text('2号动态高度元素')),
                      Container(key: itemKeys[2], color: Colors.green, child: const Text('3号动态高度元素')),
                      Container(key: itemKeys[3], color: Colors.yellow, child: const Text('4号动态高度元素')),
                      Container(key: itemKeys[4], color: Colors.purple, child: const Text('5号动态高度元素')),
                    ],
                  );
                }
              },
            )
          : // 初始加载时显示占位布局
            const Center(child: CircularProgressIndicator()),
    );
  }
}

关键说明 #

• 空间充足时：用Column并设置mainAxisAlignment: MainAxisAlignment.spaceBetween，确保第一个元素顶对齐、最后一个元素底对齐，中间元素自动均匀分布。
• 空间不足时：用ListView并通过ScrollController设置初始滚动偏移，让2-5号元素刚好填满屏幕，第一个元素仅露出剩余空间的高度，同时支持滚动查看完整内容。

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