如何在ListView的嵌套Column中填充垂直空间

嘿，我懂你想要的效果——让绿色容器填满垂直空间，这样MainAxisAlignment.spaceBetween才能把内容分别推到顶部和底部对吧？问题出在你当前用的ListView上，它的高度是由子元素的尺寸决定的，不会自动撑满父容器的垂直空间，所以里面的布局规则自然没法生效。

这里给你两种解决方案，根据你是否需要滚动来选择：

方案1：不需要滚动的场景 #

直接把ListView换成Column，并确保容器占满可用的垂直空间：

import 'package:flutter/material.dart';
void main() => runApp(_app);
const title = "Layout test";
var _app = new MaterialApp(
  title: title,
  home: new Scaffold(
    appBar: new AppBar(
      title: const Text(title),
    ),
    body: new _LayoutTest(),
  ),
);
class _LayoutTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Container(
      color: Colors.green, // 绿色容器
      // 减去AppBar的高度，让容器占满屏幕剩余垂直空间
      height: size.height - kToolbarHeight,
      child: Column(
        mainAxisSize: MainAxisSize.max, // 让Column占满父容器的垂直空间
        mainAxisAlignment: MainAxisAlignment.spaceBetween, // 生效啦！
        children: [
          // 顶部内容
          Padding(
            padding: EdgeInsets.all(16),
            child: Text("我在顶部"),
          ),
          // 底部内容
          Padding(
            padding: EdgeInsets.all(16),
            child: Text("我在底部"),
          ),
        ],
      ),
    );
  }
}

方案2：需要滚动的场景 #

如果内容可能超出屏幕需要滚动，就用SingleChildScrollView包裹布局容器，同时给容器设置明确的高度：

import 'package:flutter/material.dart';
void main() => runApp(_app);
const title = "Layout test";
var _app = new MaterialApp(
  title: title,
  home: new Scaffold(
    appBar: new AppBar(
      title: const Text(title),
    ),
    body: new _LayoutTest(),
  ),
);
class _LayoutTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return SingleChildScrollView(
      child: Container(
        color: Colors.green,
        height: size.height - kToolbarHeight,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("顶部内容"),
            // 模拟长内容，让页面可以滚动
            SizedBox(
              height: 800,
              child: Center(child: Text("中间的长内容")),
            ),
            Text("底部内容"),
          ],
        ),
      ),
    );
  }
}

关键说明： #

• ListView默认是包裹内容的，不会主动扩展到父容器的高度，所以MainAxisAlignment对它无效；
• 给容器设置明确的高度（比如通过MediaQuery获取屏幕高度减去AppBar高度），或者用Expanded让它占满父容器剩余空间，是让MainAxisAlignment.spaceBetween生效的核心；
• Column的mainAxisSize: MainAxisSize.max属性确保它会占满父容器的垂直空间，这样spaceBetween才能把子元素分别推到两端。

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