Flutter：如何在页面渲染前计算组件尺寸与剩余可用空间？

核心思路 #

Flutter的布局流程是先构建再布局，首次渲染前无法直接获取控件的实际尺寸。以下是几种实用的实现方案，覆盖不同场景需求：

方案1：自动分配剩余空间（推荐） #

利用Flutter布局系统的Expanded组件，无需手动计算高度，让视频播放器自动占据控件之外的所有剩余空间：

class VideoPlayerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 视频播放器自动填充剩余空间
          Expanded(
            child: YourVideoPlayerWidget(),
          ),
          // 动态高度的控件（由自身内容决定高度）
          YourControlsWidget(),
        ],
      ),
    );
  }
}

这种方式完全依赖Flutter的布局逻辑，无需额外状态管理，简洁高效，适合绝大多数场景。

方案2：手动获取控件尺寸后计算 #

如果必须手动计算高度，可通过GlobalKey配合SchedulerBinding在首次布局完成后获取控件尺寸，再更新视频播放器高度：

class VideoPlayerPage extends StatefulWidget {
  @override
  _VideoPlayerPageState createState() => _VideoPlayerPageState();
}

class _VideoPlayerPageState extends State<VideoPlayerPage> {
  final GlobalKey _controlsKey = GlobalKey();
  double _videoPlayerHeight = 0;

  @override
  void initState() {
    super.initState();
    // 等待首次布局完成后获取尺寸
    SchedulerBinding.instance.addPostFrameCallback((_) {
      _calcVideoHeight();
    });
  }

  void _calcVideoHeight() {
    final RenderBox renderBox = _controlsKey.currentContext!.findRenderObject() as RenderBox;
    final controlsHeight = renderBox.size.height;
    final screenHeight = MediaQuery.of(context).size.height;
    
    setState(() {
      // 若存在状态栏/导航栏，需额外减去对应高度
      _videoPlayerHeight = screenHeight - controlsHeight;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          if (_videoPlayerHeight > 0)
            SizedBox(
              height: _videoPlayerHeight,
              child: YourVideoPlayerWidget(),
            ),
          // 绑定Key用于获取尺寸
          Container(
            key: _controlsKey,
            child: YourControlsWidget(),
          ),
        ],
      ),
    );
  }
}

方案3：预估控件高度（已知约束规则） #

如果控件高度可通过固定规则预估（比如基于屏幕宽度的比例、固定最小高度），可直接通过LayoutBuilder拿到父级约束计算：

class VideoPlayerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return LayoutBuilder(
      builder: (context, constraints) {
        // 示例：控件高度为屏幕宽度的20%
        final controlsHeight = constraints.maxWidth * 0.2;
        final videoPlayerHeight = screenHeight - controlsHeight;
        
        return Scaffold(
          body: Column(
            children: [
              SizedBox(
                height: videoPlayerHeight,
                child: YourVideoPlayerWidget(),
              ),
              YourControlsWidget(),
            ],
          ),
        );
      },
    );
  }
}

关于Offstage失效的原因 #

Offstage组件会被完全隐藏，不参与布局流程，因此无法获取其RenderBox尺寸。如果一定要用隐藏方式预计算，可替换为Visibility并开启maintainSize: true：

Visibility(
  visible: false,
  maintainSize: true,
  child: Container(
    key: _controlsKey,
    child: YourControlsWidget(),
  ),
)

内容的提问来源于stack exchange，提问作者Michael Bardoň