如何在颤动的列表视图中实现无限滚动答案

【问题标题】：how to implement infinite scrolling in list view in flutter如何在颤动的列表视图中实现无限滚动
【发布时间】：2021-07-22 14:42:41
【问题描述】：

我正在尝试制作列表，以便最初加载 10 个数据，并从 api 加载其他数据以响应列表的滚动。我正在使用 getx 作为状态管理。需要帮忙。新闻头条画面

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:get/get.dart';
import 'package:janadharana/core/widget/drawer.dart';
import 'package:janadharana/feature/news_headline/controller/news_headline_controller.dart';

class NewsHeadlineScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final controller = Get.find<NewsHeadlineController>();

    return Scaffold(
      appBar: AppBar(
        title: Text("News Headline"),
      ),
      drawer: getAppDrawer(),
      body: Obx((){
        return controller.isLoading.isTrue
        ? Center(child: CircularProgressIndicator())
        : Container(
          margin: const EdgeInsets.all(10),
          child: ListView.builder(

            itemBuilder: (context, index){

              return GestureDetector(
                onTap: () => Get.toNamed("/details", arguments: [controller.articleList[index]]),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    controller.articleList[index].imageUrl == null ?
                    Container():
                    Image.network(controller.articleList[index].imageUrl??""),
                    SizedBox(height: 8,),
                    Text(controller.articleList[index].title??"", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),),
                    SizedBox(height: 4,),
                    Html(data: controller.articleList[index].description??"",),
                  ],),

              );
            },
            
            itemCount: controller.articleList?.length ?? 0,
          ),
        );
        }),
    );
  }
}

NewsHeadlineController

import 'package:get/get.dart';
import 'package:janadharana/core/model/article.dart';
import 'package:janadharana/services/api_service.dart';

class NewsHeadlineController extends GetxController {

  RxBool isLoading = true.obs;
  List<Article> articleList = [];

  @override
  void onInit() {
    // TODO: implement onInit
    fetchArticles();
    super.onInit();
  }

  void fetchArticles() async {
    try{
      isLoading(true);
      var articles = await ApiServices.getArticles();
      print(articles[0].cover);
      if(articles != null) {
        articleList= articles;
      }
      else{
        print("article list is null");
      }
    }catch(e){
      print(e);
    }
    finally{
      isLoading(false);
    }
  }

}

*** 我可以加载前 10 篇文章，但在滚动列表时我需要加载更多。我尝试访问谷歌中的一些文档。但事情没有帮助。滚动时如何加载其他数据..***

【问题讨论】：

标签： flutter listview dart flutter-layout flutter-dependencies

【解决方案1】：

您可以使用这个库：https://pub.dev/packages/pull_to_refresh，尤其是属性onLoading: _onLoading,，它可以让您加载更多数据：

void _onLoading() {
 // load more data from API and add them to your list
}
...
SmartRefresher(
        enablePullUp: true, // This set to true to pull more data
        header: WaterDropHeader(),
        footer: ClassicFooter(),
        onLoading: _onLoading,
        child: // Your list of data
      ),

【讨论】：