Flutter GridView 延迟加载/分页答案

【问题标题】：Flutter GridView Lazy Load/PaginationFlutter GridView 延迟加载/分页
【发布时间】：2022-11-07 06:17:17
【问题描述】：

我需要一些有关 GridView 延迟加载/分页/加载更多的帮助，这是我的代码，我的流是从实时数据库接收的，我能够获取所有数据，如何添加加载更多/延迟加载，因为它是一个大文件它冻结了，所以我想添加一个延迟加载或加载更多以避免应用程序崩溃，任何帮助将不胜感激。

               StreamBuilder(
                    stream: reference.orderByChild('available').equalTo(false).onValue,
                    builder: (context, snap) {
                      
                      if (snap.hasData &&
                          snap.data.snapshot.value != null
                      ) {
                        Map data = snap.data.snapshot.value;

                        itemList.clear();
                        
                        item = [];
                        data.forEach((index, data){
                         item.add(MyProductModel(id: data['sku'], name: data['name'], weight: data['weight'], imageUrl:data['imageUrl']));
                         
                          if (searchResult.isEmpty) {
                           
                            return  itemList = item;
                          } else {
                       
                            itemList = item.where((element) => element.name.toLowerCase().contains(searchResult.toLowerCase().trim())).toList();
                            
                           return itemList; //_searchList.map((contact) =>  Uiitem(contact)).toList();
                          }

                        });

                        double height = MediaQuery.of(context).size.height/1.2;
                       

                          return Flexible(
                            child:  NotificationListener(
                              onNotification: (notificationInfo) {
                                if (notificationInfo.metrics.pixels > 50) {
                                  _sizeController.animateBack(0, duration: Duration(milliseconds: 1000));
                                  _sizeControllerSmall.animateBack(10, duration: Duration(milliseconds: 1200));
                                  productTopPadding = 100;

                                }
                                if (notificationInfo.metrics.pixels < 100) {
                                  _sizeController.animateBack(10, duration: Duration(milliseconds: 1500));
                                  _sizeControllerSmall.animateBack(0, duration: Duration(milliseconds: 200));
                                  productTopPadding = 0;
                                }
                                return true;
                              },
                              child: Padding(
                                padding: new EdgeInsets.only(top: 0),
                                child: new GridView.builder(
                                  // key:ValueKey(_forceRedraw),
                                  physics: BouncingScrollPhysics(),
                                  controller: _controller,
                                  shrinkWrap: true,
                                  itemCount: itemList.length ,
                                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, mainAxisSpacing: 1,
                                      crossAxisSpacing: 1, childAspectRatio: childAspectRatio),
                                  itemBuilder: (context, index){

                                      return Padding(
                                        padding: EdgeInsets.only(top: 10 , right: 5, left: 5, bottom: 10),
                                        child: new ProductGridWidget(
                                          product: itemList[index], //productAvailable: productStatus,

                                        ),
                                      );
                                         },

                                ),
                              ),
                            ),
                          );

                      }
                      else return Visibility(
                        visible:false,
                        child: Center(
                            child: Text('No item name ${_searchQuery.text}, in $categoryText')),
                      );

                    }),

【问题讨论】：

标签： flutter gridview pagination lazy-loading

【解决方案1】：

你必须使用 (snap.connectionState == connectionState.Waiting) 如图所示写。谢谢 [1]：https://i.stack.imgur.com/zyXct.png

【讨论】：

您好，认识 Patel，谢谢，当我在列表中进行搜索时，当您启动搜索时，解决方案可以停止挂起应用程序
是的，您也可以添加搜索。如果您得到答案，请务必投票谢谢。

【解决方案2】：

这是一个延迟加载GridView.builder，适用于 Flutter 3.3.7。

GridView.builder(
    // ask GridView to cache and avoid redundant callings of Futures
    cacheExtent: 100,
    
    shrinkWrap: true,
  
    itemCount: c.thumbnails.length,
  
    // Define this as you like
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: max(1, cts.maxWidth ~/ 150),
      mainAxisSpacing: 0.0,
      crossAxisSpacing: 0.0,
      childAspectRatio: 1.0,
    ),
    itemBuilder: (BuildContext context, int index) {

      return FutureBuilder<Image>(builder: (ctx, snap) {
        if (!snap.hasData) {
          return const SizedBox.expand(); // show nothing
        }
        if (snap.hasError) {
          return Text('An error occured ${snap.error}');
        }
        return snap.data!;
      },
      future: <YOUR THUMBNAIL FUTURE>,
    );
  }
);

【讨论】：