Flutter:如何限制在 flutter "ListView.builder()"中获取图像？

Question

我从网络服务器获取图像数据，但总数据为 200+ MB，如果我立即加载它，应用程序将崩溃。如何限制获取照片，大概每5张照片拍摄一次。

我正在使用 ListView.builder() - FLutter我尝试使用缓存图片库

ListView.builder(
  itemCount: dataJSON == null ? 0 : dataJSON.length,
  padding: EdgeInsets.all(16.0),
  itemBuilder: (context, i) {
    Container(
      height: 100.0,
      width: 70.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(5),
          topLeft: Radius.circular(5)
        ),
        image: DecorationImage(
          fit: BoxFit.cover,
          image: new CachedNetworkImageProvider(dataJSON[i]['photo'])
        ),
      ),
    ),
  },
)

当我滚动时，大概 20 张照片然后崩溃，应用程序退出

我该怎么办？

Answer 1

您可以使用 NotificationListener 来增加您的 ListView 的长度，当用户到达它的末尾时，这样只会从网络获取要显示的照片:

     int list_length ;


     @override
     void initState() {
       list_length = dataJSON.length == null ? 0 : 5 ;
       super.initState();
     }

     NotificationListener<ScrollNotification>(
         onNotification: (scrollNotification){
              if(scrollNotification.metrics.pixels == scrollNotification.metrics.maxScrollExtent){
                 setState(() {
                      list_length = list_length + 10 <= dataJSON.length ? list_length += 10 : dataJSON.length ;
                    });
              }
         },
      child: ListView.builder(
      itemCount: list_length,
      padding: EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        Container(
          height: 100.0,
          width: 70.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(5),
            topLeft: Radius.circular(5)
            ),
            image: DecorationImage(
              fit: BoxFit.cover,
              image: new CachedNetworkImageProvider(dataJSON[i]['photo'])
            ),
          ),
        ),
      },
    )