如何根据ListView的itemCount调整Container的高度？

问题出在你代码里的两个核心点：Expanded组件和默认的ListView行为：

• Expanded会强制子组件占满父Column的剩余可用空间
• 默认的ListView会尽可能扩展自身高度以填充所有可用空间

两者结合直接导致你的Container被撑满了AppBar和底部导航栏之外的全部屏幕空间。

按以下修改就能实现高度随内容动态变化：

1. 移除包裹ListView的Expanded组件
2. 给ListView.builder添加shrinkWrap: true属性

修改后的完整代码 #

Padding(
  padding: const EdgeInsets.all(12.0),
  child: Container(
    decoration: const BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.all(
        Radius.circular(10),
      ),
      boxShadow: [
        BoxShadow(
          color: Color(0xffDDDDDD),
          blurRadius: 6.0,
          spreadRadius: 2.0,
          offset: Offset(0.0, 0.0),
        )
      ],
    ),
    child: Padding(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        children: [
          ListView.builder(
            shrinkWrap: true,
            // 若列表项过多时不需要内部滚动（让外部父组件处理滚动），可添加以下属性
            // physics: const NeverScrollableScrollPhysics(),
            itemCount: 5,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                  leading: const Icon(Icons.list),
                  trailing: const Text(
                    "GFG",
                    style: TextStyle(color: Colors.green, fontSize: 15),
                  ),
                  title: Text("List item $index"));
            }),
        ],
      ),
    ),
  )),

关键修改说明 #

• 移除Expanded：不再强制ListView抢占Column的剩余空间，让Column根据子组件实际高度布局
• shrinkWrap: true：让ListView仅占用足够显示所有列表项的高度，而非扩展到最大可用空间

修改完成后，Container的高度会完全跟随列表内容总高度变化：列表项少时自动收缩到你想要的黑线位置；列表项增加时，Container也会同步增高，直到内容超出父容器可用空间（此时可根据需求调整滚动逻辑）。

内容的提问来源于stack exchange，提问作者jpg.hue