如何限制ListView.builder的item数量，超出5条时显示and more提示

实现方案 #

• 第一步动态计算条目总数：当features长度大于5时，itemCount设置为6（5条数据+1条提示），否则直接取features.length，避免数据不足5条时数组越界报错
• 第二步在条目构造逻辑中做分支判断：索引小于5时渲染原有功能条目，索引等于5时固定渲染"and more"提示文本

完整修改后代码 #

ListView.builder(
  shrinkWrap: true,
  itemCount: features.length > 5 ? 6 : features.length,
  itemBuilder: (context, index) {
    if (index < 5) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              "•  ${features[index]}",
              style: const TextStyle(fontWeight: FontWeight.bold),
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      );
    } else {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          "•  and more",
          style: const TextStyle(fontWeight: FontWeight.bold),
        ),
      );
    }
  }
)

原理说明 #

当features长度小于等于5时，itemCount和原逻辑一致为features.length，不会触发index=5的分支，不存在数组越界风险；当长度大于5时，前5条渲染正常数据，第6条固定显示提示文本，完全匹配需求。

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