Question

我从Web服务器获取图像数据，但是总数据为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'])
            ),
          ),
        ),
      },
    )

Flutter：如何限制在“ ListView.builder（）”中获取图像？

1 个答案: