Flutter：如何获取子Stack组件的剩余高度？

问题根源 #

MediaQuery.of(context)获取的是全局屏幕尺寸，因为MaterialApp会提供根级的MediaQuery上下文，所以无论你在MaterialApp内部哪里调用，得到的都是整个屏幕的高度，而非Stack在Column中被Expanded分配到的可用空间。

解决方案：使用LayoutBuilder获取父组件约束 #

要获取Stack的剩余高度，需要用LayoutBuilder包裹Stack，它会在布局阶段传递父组件（这里是Expanded）给它的约束信息，通过constraints.maxHeight就能拿到Stack的可用高度。

代码示例 #

调整你的组件结构，将Stack用LayoutBuilder包裹：

Container(
  child: Column(
    children: [
      // 上方的Container组件
      Container(height: 120, color: Colors.grey[300]),
      Expanded(
        child: LayoutBuilder(
          builder: (context, constraints) {
            // constraints.maxHeight 即为Stack的可用剩余高度
            final stackAvailableHeight = constraints.maxHeight;
            return Stack(
              children: [
                MaterialApp(
                  home: Scaffold(
                    body: Center(
                      child: Text('Stack可用高度: ${stackAvailableHeight.toStringAsFixed(1)}'),
                    ),
                  ),
                ),
                // Stack的其他子组件
                Positioned(
                  bottom: 10,
                  right: 10,
                  child: Container(
                    width: 50,
                    height: 50,
                    color: Colors.red,
                  ),
                ),
              ],
            );
          },
        ),
      ),
      // 下方的Container组件
      Container(height: 80, color: Colors.grey[300]),
    ],
  ),
)

关键说明 #

• LayoutBuilder的builder函数会接收当前组件的布局约束，constraints.maxHeight就是Expanded分配给Stack的高度，等于屏幕总高度减去上下两个Container的高度。
• 必须在MaterialApp外部（LayoutBuilder的上下文）获取约束，因为MaterialApp内部的上下文关联的是全局屏幕的MediaQuery。

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