如何解决横屏模式下视频播放器底部溢出问题？

你的问题核心是Column里的ListView没有获得正确的高度约束，横屏时屏幕垂直空间变窄，ListView的内容撑破了布局。要固定视频在顶部、仅列表滚动，只需要给ListView套一层Expanded组件即可：

修改后的代码 #

Container(
  color: context.theme.color.primary,
  child: SafeArea(
    bottom: false,
    left: false,
    right: false,
    child: Scaffold(
      body: OrientationBuilder(
        builder: (BuildContext context, Orientation orientation) {
          return Column(
            children: [
              MyVideoPlayer(
                orientation: orientation,
                videoDetails: viewModel.videoDetails,
                languageCode: context.currentLanguage,
              ),
              // 添加Expanded让ListView占据Column剩余垂直空间
              Expanded(
                child: ListView(
                  shrinkWrap: true,
                  children: [
                    VideoInfoExpansionTile(
                      title: viewModel.videoDetails.title,
                      author: viewModel.videoDetails.author ?? '',
                      publicationDate: viewModel.videoDetails.publicationDate,
                      description: viewModel.videoDetails.description,
                    ),
                    if (viewModel.videoSeriesPlaylist.items.isNotEmpty) ...{
                      VidePlayListHeader(
                        title: viewModel.videoSeriesPlaylist.title ?? '',
                      ),
                      VideoPlaylist(
                        videoSeriesPlaylist: viewModel.videoSeriesPlaylist,
                      ),
                    }
                  ],
                ),
              )
            ],
          );
        },
      ),
    ),
  ),
),

原理说明 #

• Column默认会让子组件按自身高度排列，横屏时垂直空间不足，无约束的ListView会因内容高度超过剩余空间导致溢出。
• Expanded会强制ListView占用Column分配完视频播放器后剩下的全部垂直空间，既能保证视频固定在顶部，又能让列表正常滚动，不会出现溢出问题。

如果你的MyVideoPlayer是动态高度（比如自适应视频比例），这个方案依然有效——Column会先计算视频播放器的实际高度，再把剩余空间全部分配给列表。

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