Flutter中如何让组件占满Column的剩余可用空间？

问题根源在于你为ListView设置了shrinkWrap: true，同时外层使用Flexible包裹。Flexible默认的fit属性是FlexFit.loose，它不会强制子组件占据可用空间，加上shrinkWrap: true让ListView仅适配内容高度，导致Column的布局计算出现偏差，后续的Expanded无法正确获取剩余空间。

以下是两种可行的解决方案：

方案一：替换Flexible为Expanded #

将包裹ListView的Flexible改成Expanded，保留shrinkWrap: true，这样ListView会先占据自身内容所需的最小空间，剩余空间全部交给绿色Container：

class Demo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
                child: ListView(
                  shrinkWrap: true,
                  children: const [
              ListTile(
                leading: Icon(Icons.image),
                title: Text('with shrinkwrap is true'),
                trailing: Icon(Icons.delete_forever),
              ),
            ])),
            Expanded(
                child: Container(
              color: Colors.green,
            )),
          ],
        ),
      ),
    );
  }
}

方案二：移除ListView（内容无需滚动时） #

如果ListView内的内容较少，不需要滚动功能，可以直接去掉ListView，仅保留ListTile，这样布局会更简洁，也不会出现空间分配问题：

class Demo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            ListTile(
              leading: Icon(Icons.image),
              title: Text('with shrinkwrap is true'),
              trailing: Icon(Icons.delete_forever),
            ),
            Expanded(
                child: Container(
              color: Colors.green,
            )),
          ],
        ),
      ),
    );
  }
}

核心原理：Expanded会强制子组件填充Column中的剩余可用空间，而Flexible仅允许子组件扩展但不强制。调整后Column能正确分配各子组件的空间，绿色Container就能填满剩余区域。

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