Flutter中如何为GridView添加无限滚动及加载时的CircularProgressIndicator

要实现你要的效果，只需要调整GridView的itemCount和itemBuilder逻辑就行，具体改法如下：

修改后的完整代码 #

Widget imagePostsWidget = imagePosts != null
    ? GridView.builder(
        physics: BouncingScrollPhysics(),
        controller: ProfileScreen.scrollController,
        padding: EdgeInsets.only(top: 3),
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        // 加载时多留一个位置给指示器
        itemCount: imagePosts.length + (isLoadingPosts ? 1 : 0),
        itemBuilder: (BuildContext context, int index) {
          // 判断是否是最后一个位置且处于加载状态
          if (index == imagePosts.length) {
            return Center(child: CircularProgressIndicator());
          }
          // 正常渲染帖子卡片
          return PostCard(
            imagePost: imagePosts[index],
            imageUrl: imagePosts[index].imageUrl,
          );
        },
      )
    : SizedBox();

关键修改说明 #

• 调整itemCount：当isLoadingPosts为true时，把列表总项数加1，为加载指示器预留位置
• 修改itemBuilder逻辑：当遍历到最后一个位置（index == imagePosts.length）时，返回居中的加载指示器，其余位置正常渲染帖子卡片
• 修正了你代码里的拼写错误：CirularProgressIndicator → CircularProgressIndicator

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