簡體   English   中英

如何在 flutter 的列表視圖中實現無限滾動

[英]how to implement infinite scrolling in list view in flutter

我正在嘗試制作列表,以便最初加載 10 個數據,並從 api 加載附加數據以響應列表滾動。 我使用 getx 作為 state 管理。 需要幫忙。 新聞頭條屏幕

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,
          ),
        );
        }),
    );
  }
}

新聞頭條控制器

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 篇文章,但在滾動列表時我需要加載更多。 我嘗試訪問谷歌中的一些文檔。 但事情沒有幫助。 滾動時如何加載其他數據..***

您可以使用這個庫: 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
      ),

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM