Flutter报错：BoxConstraints forces an infinite height 问题求助

问题根源 #

滚动组件（像ListView、SingleChildScrollView这类）的子节点本身没有固定高度约束，你用StackFit.expand会强制子组件无限拉伸高度，直接触发约束错误。而且之前的写法里背景没和树形节点的尺寸绑定，自然显示不出来。

直接可行的解决方案 #

别用StackFit.expand，让背景组件跟着树形节点的尺寸走，再用MouseRegion监听鼠标悬停来控制背景的显隐/透明度，代码示例如下：

class TreeItem extends StatefulWidget {
  final String title;
  final IconData icon;

  const TreeItem({super.key, required this.title, required this.icon});

  @override
  State<TreeItem> createState() => _TreeItemState();
}

class _TreeItemState extends State<TreeItem> {
  bool _hovered = false;

  @override
  Widget build(BuildContext context) {
    // 先写树形节点的核心内容，它的尺寸会决定整个Stack的大小
    final treeContent = Row(
      children: [
        Icon(widget.icon),
        const SizedBox(width: 8),
        Text(widget.title),
      ],
      crossAxisAlignment: CrossAxisAlignment.center,
    );

    return MouseRegion(
      onEnter: (_) => setState(() => _hovered = true),
      onExit: (_) => setState(() => _hovered = false),
      child: Stack(
        alignment: Alignment.centerLeft, // 让内容靠左对齐，符合树形结构
        children: [
          // 背景组件：用AnimatedOpacity做渐显动画，尺寸跟着Stack走
          AnimatedOpacity(
            opacity: _hovered ? 1 : 0,
            duration: const Duration(milliseconds: 200),
            child: Container(
              width: double.infinity, // 横向占满滚动组件的宽度
              height: double.infinity, // 纵向自动匹配树形节点的高度
              decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: BorderRadius.circular(4),
              ),
            ),
          ),
          // 前景的树形节点，加padding避免内容贴在背景边缘
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            child: treeContent,
          ),
        ],
      ),
    );
  }
}

关键调整点 #

1. 删掉StackFit.expand，让Stack的尺寸由前景的树形节点内容决定，彻底解决无限高度的问题。
2. 用AnimatedOpacity实现悬停渐变效果，比直接切换显隐更自然。
3. 给前景内容加Padding，保证背景不会被内容完全挡住，视觉上更舒服。
4. 背景的width: double.infinity可以让它横向铺满滚动组件，高度则自动匹配Stack的尺寸（也就是树形节点的高度）。

嵌套到滚动组件的用法 #

ListView.builder(
  itemCount: 20,
  itemBuilder: (ctx, idx) {
    return TreeItem(
      title: "节点 $idx",
      icon: Icons.folder,
    );
  },
)

额外提示 #

如果是多级树形结构需要缩进，直接在treeContent的Row开头加SizedBox(width: 20 * level)就行，完全不影响Stack的尺寸计算。绝对不要给Stack或背景组件设无约束的高度（比如height: double.infinity），必须让尺寸由内容或父组件的约束来定。

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