Flutter PageView.builder如何实现每5个内容页后插入自定义页面？

我们只需要调整PageView.builder的总条目计数规则，再在条目构建时区分普通新闻位和自定义图片位即可，具体修改如下： #

核心逻辑说明 #

• 首先计算总条目数：每5条新闻插入1条自定义图片，总条目数为 新闻列表长度 + 新闻列表长度除以5向下取整
• 构建条目时判断当前位置是否为自定义图片位：每6个条目为一组，每组的第6位（索引从0开始对应值为5）为自定义图片位
• 普通新闻位的真实新闻索引计算方式：当前索引 - 当前索引除以6向下取整

完整修改后代码 #

PageView.builder(
  itemCount: _newsList.isEmpty ? 1 : _newsList.length + (_newsList.length / 5).floor(),
  itemBuilder: (context, index) {
    // 处理无数据情况
    if (_newsList.isEmpty) {
      return const Text("No Data");
    }
    // 判断当前是否为自定义图片位（每5条新闻后插入1条）
    if (index % 6 == 5) {
      // 替换为你自己的自定义图片组件即可
      return Image.asset("assets/your_custom_image.png");
    }
    // 计算真实的新闻索引
    final newsIndex = index - (index ~/ 6);
    return Image.network(_newsList[newsIndex].image);
  }
)

补充说明 #

• 原代码中_newsList.Length的大写L是语法错误，Dart中获取列表长度统一用小写length
• 该逻辑支持新闻列表长度不满5、刚好为5的整数倍等各种边界场景，无需额外判断
• 如果你需要最后一条内容结束后也插入自定义图片，只需要在计算itemCount时额外加1即可

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