达到结果波动的底部时如何将更多项目加载到列表中 [英] How to load more items to a list when reach the bottom of results flutter

问题描述

我有下面的代码，该代码提供了来自Firebase的10个结果的列表.在这种情况下，它仅显示10个项目，现在我想，当用户获得结果的底部时，它将加载更多10个项目并将其添加到列表中.我已经有了scrollController并且可以正常工作.当我得到结果的最底端时.

I have the code below which feed a list with 10 results from firebase. In this case it shows only the 10 items, now I wanna, when user gets the bottom of results, it loads more 10 items and add it to the list. I already have the scrollController and it works.. I receive the log "LOAD HERE" when I get the bottom of the results.

我的疑问是如何在列表中添加新的10个项目?

My doubt is how to add the new 10 items in the list?

scrollListener() async {
    if (scrollController.position.maxScrollExtent == scrollController.offset) {
      print('LOAD HERE');
    
    }
  }

  @override
  void initState() {
    scrollController.addListener(scrollListener);
    super.initState();
  }

  @override
  void dispose() {
    scrollController.removeListener(scrollListener);
    super.dispose();
  }

  loadList(submenu ,callback, context, deviceSize){
    return FutureBuilder(
      future: ctrlLab.loadList(submenu, 10),
      builder: (ctx, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.error != null) {
          print(snapshot.error);
          return Center(child: Text('ERROR!'));
        }else {
          return GridView.builder(
            padding: EdgeInsets.all(10.0),
            controller: scrollController,
            itemCount: snapshot.data.length,
            itemBuilder: (ctx, i) {
              Item item = snapshot.data[i];
              if (i < snapshot.data.length) {
                return Dismissible(
                  key: UniqueKey(),
                  direction: DismissDirection.endToStart,
                  background: Container(
                    padding: EdgeInsets.all(10.0),
                    color: Colors.grey[800],
                    child: Align(
                      alignment: AlignmentDirectional.centerEnd,
                      child: Icon(
                        Icons.delete,
                        color: Colors.white,
                        size: 40,
                      ),
                    ),
                  ),
                  onDismissed: (DismissDirection direction) {
                    ctrl.onDismissed(callback, item);
                  },
                  child: GestureDetector(
                    child: Card(
                      elevation: 5.0,
                      child: Padding(
                        padding: EdgeInsets.all(10.0),
                        child: GridTile(
                          child: Hero(
                            tag: "${item}",
                            child: item.imageUrl == null
                                ? setIconLab(item)
                                : CachedNetworkImage(
                              fit: BoxFit.cover,
                              imageUrl: setIconLab(item),
                              placeholder: (ctx, url) =>
                                  Center(child: CircularProgressIndicator()),
                              errorWidget: (context, url, error) =>
                                  Image.asset('assets/images/noPhoto.jpg',
                                      fit: BoxFit.cover),
                            ),
                          ),
                          footer: Container(
                            padding: EdgeInsets.all(8.0),
                            color: Colors.white70,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  item.name
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                );

              }
            },
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCountAndLoading(
              itemCount: snapshot.data.length + 1,
              crossAxisCount: deviceSize.width < 600 ? 2 : 3,
              childAspectRatio: 0.7,
              crossAxisSpacing: 10.0,
              mainAxisSpacing: 10.0,
            ),
          );
        }
      },
    );
  }

推荐答案

您必须向 crtLap.loadList(subMenu，20)添加另外10个数据，并在scrollListener中调用setState来重建有关更改的小部件.

You have to add another 10 data to the crtLap.loadList(subMenu, 20) and call setState inside the scrollListener to rebuild the widget about the changes.

var data = crtLap.loadList(subMenu, 10);

scrollListener() async {
  if (scrollController.position.maxScrollExtent == scrollController.offset) {
    setState((){
       data = crtLap.loadList(subMenu, 20);
     });
  }
}

并将此数据字段直接用于FutureBuilder，

and use this data field to the FutureBuilder directly,

loadList(submenu ,callback, context, deviceSize){
 return FutureBuilder(
   future: data,
    builder: (ctx, snapshot) {
    .....
  ...
..
}

这篇关于达到结果波动的底部时如何将更多项目加载到列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！