Flutter ListView内容底部溢出时，如何将超出内容移至下一列表项？

使用ListView.builder横向展示内容时，当chapterInfo.bodyChunk中的内容高度超过设备屏幕高度，部分内容会丢失。需要实现：检测内容是否超出设备高度，并将超出部分移至下一个列表项。

现有代码 #

ListView.builder(
                              scrollDirection: Axis.horizontal,
                              physics: const PageScrollPhysics(),
                              controller: _scrollController,
                              itemCount: chapterInfo.bodyChunk.length,
                              itemBuilder: (context, index) {
                                return Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Expanded(
                                      child: Container(
                                        width:
                                            MediaQuery.of(context).size.width,
                                        child: Html(
                                          data: chapterInfo.bodyChunk[index]
                                              .replaceAll("\n", "")
                                              .trim(),
                                          style: {
                                            '#': Style(
                                              textAlign: tempIsLeftAlign!
                                                  ? TextAlign.justify
                                                  : TextAlign.left,
                                              fontFamily: tempFontFamily,
                                              fontSize: FontSize(tempFontSize!),
                                              color: tempFontColor,
                                              backgroundColor: tempBackground,
                                            ),
                                          },
                                        ),
                                      ),
                                    ),
                                  ],
                                );
                              })

效果图 #

• 字体大小12时内容完整展示：
  
• 字体大小16时内容丢失（红圈标注）：
  

核心思路是预计算内容渲染后的高度，判断是否超出屏幕可用高度，再将内容拆分适配每个列表项，具体步骤如下：

1. 计算屏幕可用高度 #

先获取扣除状态栏、导航栏后的实际可展示高度：

final double availableHeight = MediaQuery.of(context).size.height - 
    MediaQuery.of(context).padding.top - 
    MediaQuery.of(context).padding.bottom;

2. 获取HTML内容的实际渲染高度 #

由于使用flutter_html包，可以通过全局Key获取渲染后的高度：

// 定义计算高度的方法
Future<double> getHtmlContentHeight(String html, BuildContext context) async {
  final contentKey = GlobalKey();
  await Future.delayed(Duration.zero); // 等待UI渲染帧
  final renderBox = contentKey.currentContext?.findRenderObject() as RenderBox?;
  return renderBox?.size.height ?? 0;
}

// 用于预渲染的Widget（可放在初始化逻辑中）
Widget _preRenderHtml(String html) {
  return Visibility(
    visible: false,
    child: Container(
      key: contentKey,
      width: MediaQuery.of(context).size.width,
      child: Html(
        data: html,
        style: {
          '#': Style(
            textAlign: tempIsLeftAlign! ? TextAlign.justify : TextAlign.left,
            fontFamily: tempFontFamily,
            fontSize: FontSize(tempFontSize!),
            color: tempFontColor,
            backgroundColor: tempBackground,
          ),
        },
      ),
    ),
  );
}

3. 内容拆分逻辑 #

拿到内容高度后，判断是否超过可用高度：

• 若未超过，直接放入当前列表项；
• 若超过，按段落/换行符拆分内容，逐步累加子内容的高度，直到接近可用高度，剩余部分作为下一个列表项的内容。注意拆分时要保证HTML标签闭合，避免渲染错误。

优化方向 #

• 提前在数据层完成内容拆分，避免UI层实时计算导致卡顿；
• 利用flutter_html的onRendered回调直接获取渲染高度，无需预渲染；
• 改用PageView替代横向ListView，更贴合分页阅读的交互场景。

4. 调整UI结构 #

移除Expanded避免内容被强制裁剪，让内容自适应高度，再通过拆分逻辑确保每个列表项不超出屏幕：

// 修改后的itemBuilder
itemBuilder: (context, index) {
  return SizedBox(
    width: MediaQuery.of(context).size.width,
    child: Html(
      data: chapterInfo.bodyChunk[index].replaceAll("\n", "").trim(),
      style: {
        '#': Style(
          textAlign: tempIsLeftAlign! ? TextAlign.justify : TextAlign.left,
          fontFamily: tempFontFamily,
          fontSize: FontSize(tempFontSize!),
          color: tempFontColor,
          backgroundColor: tempBackground,
        ),
      },
    ),
  );
}

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