在 flutter 中對來自 api 的響應進行分頁

Question

我正在構建一個應用程序 flutter （電影數據庫 api ），我從中獲得了許多電影頁面，在啟動應用程序時，我正在獲取包含近 20 部電影的第一頁，現在我想有人增加頁面這樣我就可以獲取更多視頻（我想要類似於 android 中的分頁庫 3 的內容），這是否可以在 flutter 中執行，不勝感激。

• 這是我在 flutter 中的代碼

 Expanded(
              child: Consumer(
                builder: (context,ref,_){
                  var popularMovies = ref.watch(MovieController.popularMoviesProvider(counter)).value;
                  if(popularMovies != null){
                    return ListView.builder(
                      controller: _scrollController,
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      itemCount: popularMovies.results?.length,
                      itemBuilder: (context,index){
                        var finalResult = popularMovies.results!;
                        return GestureDetector(
                          onTap: (){
                            Get.to(() => const DetailsScreen(),
                                arguments: [
                                  {"movieId" : finalResult[index].id}
                                ]);
                          },
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Row(
                              children: [
                                Material(
                                  elevation: 4,
                                  shape:  RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
                                  clipBehavior: Clip.antiAlias,
                                  child: ClipRRect(
                                    borderRadius : BorderRadius.circular(8),
                                    child: Material(
                                      child: Image.network("http://image.tmdb.org/t/p/w500/${finalResult[index].backdropPath}",
                                        height: 170,width : 120 ,fit: BoxFit.cover,),
                                    ),
                                  ),
                                ),
                                Expanded(
                                  child: Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                      children: [
                                        SizedBox(
                                          width : 250,
                                          child: Text(finalResult[index].title!,style: const TextStyle(
                                              fontSize: 18,
                                              fontWeight: FontWeight.bold,
                                              fontFamily: 'mulish_bold'
                                          ),maxLines: 2,),
                                        ),
                                        const SizedBox(height: 10,),
                                        SizedBox(
                                          width: 150,
                                          child: Row(
                                            children: [
                                              Image.asset("assets/icons/rating.png",height: 20,width: 20,),
                                              Expanded(child: Text("${finalResult[index].voteAverage}/10 Imdb",style: const TextStyle(fontFamily: 'mulish_regular',
                                                  color: Color(0xFF9C9C9C)),))
                                            ],
                                          ),

                                        ),
                                        const SizedBox(height: 10,),
                                        Consumer(
                                          builder: (context,ref,_){
                                            var genres = ref.watch(MovieController.moviesGenreProvider).value;
                                            if(genres != null){
                                              return showGenres(index,genres.genres,popularMovies);
                                            } else {
                                              return const Center(
                                                child: SizedBox(
                                                  height: 2,
                                                  width: 100,
                                                  child: LinearProgressIndicator(
                                                    color: Colors.green,
                                                  ),
                                                ),
                                              );
                                            }
                                          },
                                        ),
                                        const SizedBox(height: 10,),
                                        Card(
                                          shape: RoundedRectangleBorder(
                                              borderRadius: BorderRadius.circular(8)
                                          ),
                                          color: Colors.green.shade400,
                                          child :  Padding(
                                            padding: const EdgeInsets.all(4.0),
                                            child: Text(finalResult[index].releaseDate!,style: const TextStyle(fontFamily: 'mulish_regular',
                                                color: Colors.white,fontSize: 13),),
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        );
                      },
                    );
                  }
                  else {
                    return const Center(
                      child: CircularProgressIndicator(color: Colors.orange,),
                    );
                  }
                },
              ),
            )

PS：我正在使用 flutter riverpod 進行 state 管理。

Answer 1

假設您的 api 支持分頁，使用 ListView.builder 時分頁的一種常見方式是不提供 itemCount，當您的索引大於當前獲取的項目長度時，然后從 API 再次獲取。 從 Flutter 參考這個 codelab。 https://docs.flutter.dev/get-started/codelab

ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: /*1*/ (context, index) {
        if (index >= currentFetchedItems.length) {
          // fetch from API and update your data
          currentFetchedItems.addAll(generateWordPairs().take(10)); /*4*/
        }
        return currentFetchedItems[index];
      },
    );