Flutter：如何让ListView Builder中的7个容器充满垂直空间？

要让这7个容器铺满整个垂直空间，我们可以通过调整布局结构和尺寸设置来实现，具体步骤如下：

1. 替换ListView为Column布局 #

ListView本身是为滚动列表设计的，而我们需要固定的7个元素平分垂直空间，用Column配合Expanded会更适配这个需求（如果你的元素数量固定且不需要滚动的话）。

2. 用Expanded包裹每个CustomButtonWidget #

Expanded会让子组件占据父布局中剩余的可用空间，7个Expanded放在Column里会自动平分整个垂直高度。

3. 移除Container的固定高度约束 #

原来的Container设置了固定的height:80，这会限制它的高度扩展，我们需要去掉这个属性，让Container充满Expanded提供的空间。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/painting.dart';

void main() => runApp(XylophoneApp());

class XylophoneApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          // 用Column替代ListView，配合Expanded实现空间平分
          child: Column(
            children: List.generate(7, (index) {
              return Expanded(
                child: CustomButtonWidget(index: index),
              );
            }),
          ),
        ),
      ),
    );
  }
}

class CustomButtonWidget extends StatelessWidget {
  final int index;
  CustomButtonWidget({this.index});

  void playSound(int soundNumber) {
    final player = AudioCache();
    player.play('note$soundNumber.wav');
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
      style: ButtonStyle(
        padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.zero),
        // 让按钮完全充满父容器
        minimumSize: MaterialStateProperty.all(Size(double.infinity, double.infinity)),
      ),
      onPressed: () {
        playSound(index + 1);
      },
      child: Container(
        // 移除固定height，让Container铺满按钮空间
        width: double.infinity,
        color: index.isOdd ? Color(0xffF8BBD0) : Color(0xffC2185B),
      ),
    );
  }
}

额外说明 #

如果因为后续扩展需求必须使用ListView，可以通过计算屏幕高度来设置每个item的高度：

// 在build方法中获取屏幕可用高度
final screenHeight = MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top;

// 在ListView的itemBuilder里设置Container高度
height: screenHeight / 7,

不过这种方式需要手动处理SafeArea的内边距，所以优先推荐Column+Expanded的方案。

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