Flutter开发中ListView无法滚动问题排查求助

我正在开发一款可播放YouTube播放列表的Flutter应用，播放器固定占据屏幕顶部区域，播放列表以可滚动列表形式填充屏幕底部，界面如下：

问题在于，无论尝试何种方法，都无法让ListView实现滚动。我之前确实实现过可滚动的ListView，这个问题让我非常困扰。以下是我的代码：

body: SafeArea(
  minimum: const EdgeInsets.all(12),
  child: Column(
    children: [
      SizedBox(
        height: 8 * hRatio,
      ),
      // Video player begins here
      BlocBuilder<ChannelPlayerBloc, ChannelPlayerState>(
        builder: (context, state) {
          if (state is ChannelPlayerInitialState) {
            return Center(
              child: Container(
                width: size.width - 40,
                height: (size.width - 40) / 1.78,
                color: Colors.black38,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: const [
                      Text('Click a video'),
                      Text('to play...'),
                    ],
                  ),
                ),
              ),
            );
          }
          if (state is ChannelPlayerLoadingState) {
            return Center(
              child: Container(
                width: size.width - 40,
                height: (size.width - 40) / 1.78,
                color: Colors.black38,
                child: const Center(
                  child: Padding(
                    padding: EdgeInsets.all(40.0),
                    child: LoadingIndicator(
                      indicatorType: Indicator.ballTrianglePathColoredFilled,
                      colors: [
                        Colors.redAccent,
                        Colors.greenAccent,
                        Colors.blue,
                      ],
                    ),
                  ),
                ),
              ),
            );
          }
          if (state is ChannelPlayerLoadedState) {
            return PodVideoPlayer(controller: state.controller);
          }
          return Container();
        },
      ),
      SizedBox(
        height: 10 * hRatio,
      ),
      // Scrollable playlist begins here
      BlocBuilder<YtChannelBloc, YtChannelState>(
        builder: (context, state) {
          if (state is YtInitialState) {
            return const SizedBox(
              height: double.infinity,
              child: Center(
                child: SizedBox(height: 35, width: 35, child: CircularProgressIndicator()),
              ),
            );
          }
          if (state is YtLoadedState) {
            return Expanded(
              flex: 1,
              child: ListView(
                children: [
                  for (YtVideoModel video in state.channel)
                    Card(
                      color: Colors.blue,
                      child: InkWell(
                        onTap: () {
                          context.read<ChannelPlayerBloc>().add(ChannelPlayerLoad(video.videoId));
                        },
                        child: Row(
                          children: [
                            SizedBox(width: 8 * wRatio),
                            Image.network(
                              video.thumbnail,
                              width: size.width * .25,
                              height: size.width * .25 / 1.78,
                              fit: BoxFit.cover,
                              loadingBuilder: (context, child, loadingProgress) {
                                if (loadingProgress == null) return child;
                                return const CircularProgressIndicator();
                              },
                            ),
                            Container(
                              padding: EdgeInsets.all(12.0 * hRatio),
                              width: size.width * .60,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    'Title: ${video.title}',
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                  Text('Published: ${DateFormat('yyyy-MM-dd').format(video.publishedAt)}'),
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    )
                ],
              ),
            );
          }
          return Container();
        },
      )
    ],
  ),
),

问题根源与修复方法 #

1. 加载状态组件占用无限高度 #

在YtInitialState分支中，你使用了SizedBox(height: double.infinity)，这个组件会抢占Column的所有剩余空间，导致后续Expanded包裹的ListView没有可用布局空间，因此无法滚动。

修改方案：将该SizedBox替换为Expanded包裹的Center：

if (state is YtInitialState) {
  return Expanded(
    child: Center(
      child: SizedBox(height: 35, width: 35, child: CircularProgressIndicator()),
    ),
  );
}

2. 强化ListView的滚动行为 #

即使使用了Expanded，也可以通过以下方式确保滚动正常：

• 给ListView添加physics: AlwaysScrollableScrollPhysics()，强制启用滚动（即使内容长度不足屏幕）
• 确认PodVideoPlayer的高度被正确约束（当前代码中初始和加载状态下的播放器容器有明确高度，加载后需确保PodVideoPlayer也遵循相同高度约束，避免布局溢出）

修改后的ListView代码示例：

ListView(
  physics: AlwaysScrollableScrollPhysics(),
  children: [...],
)

3. 检查尺寸比例计算 #

确认hRatio和wRatio是基于MediaQuery.of(context).size正确计算的，避免因比例错误导致的布局异常或空间不足。

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