Flutter：如何在ListView组件中展示API返回列表的最后5项？

要实现展示列表最后5项的功能，你不需要用reverse: true（这个属性仅反转列表展示顺序，并非提取最后几项），可以通过以下两种方式修改代码：

方式1：预处理数据源，提取最后5项 #

在获取API数据后直接生成仅包含最后5项的子列表，后续ListView直接使用该子列表，逻辑更清晰：

修改_HomePageState，新增存储最后5项的变量：

List<Post>? posts;
List<Post>? lastFivePosts; // 新增变量
var isLoaded = false;
var reverse=false;

更新getData方法处理数据：

Future getData() async {
  posts = await RemoteService().getPosts();
  if (posts != null) {
    // 提取最后5项，总数不足5则取全部
    final count = posts!.length;
    lastFivePosts = posts!.sublist(count > 5 ? count -5 : 0);
    setState(() {
      isLoaded = true;
    });
  }
}

修改ListView.builder部分：

ListView.builder(
  itemCount: lastFivePosts?.length ?? 0,
  itemBuilder: (context, index) {
    final post = lastFivePosts![index];
    return Container(
      padding: const EdgeInsets.all(16),
      child: Row(
        children: [
          Container(
            height: 50,
            width: 50,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              color: Colors.grey[300],
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  post.title,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  post.body ?? '',
                  maxLines: 3,
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  },
)

方式2：直接在ListView.builder中计算索引 #

如果不想修改原数据源，可在itemBuilder中直接计算对应最后5项的索引，无需额外变量：

修改ListView.builder部分：

ListView.builder(
  itemCount: posts!.length >5 ?5 : posts!.length,
  itemBuilder: (context, index) {
    // 计算最后5项的起始索引，通过index偏移获取对应元素
    final targetIndex = posts!.length - (posts!.length >5 ?5 : posts!.length) + index;
    final post = posts![targetIndex];
    return Container(
      padding: const EdgeInsets.all(16),
      child: Row(
        children: [
          Container(
            height: 50,
            width: 50,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              color: Colors.grey[300],
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  post.title,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  post.body ?? '',
                  maxLines: 3,
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  },
)

两种方式均可解决问题，方式1逻辑更直观，方式2适合不想额外维护子列表的场景。

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