Question

我正在建立一个无限滚动列表，显示来自API的图像。我已经看到了几种方法，但是令我惊讶的是，没有简单的方法可以仅通过ListView.builder来完成。我现在使用此基本代码，这将使listview.builder在列表内创建无限数量的图像（它甚至阻止了主线程，因为不会停止检索新图像）：

Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
          automaticallyImplyLeading: true,
          leading: IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: () => Navigator.pop(context))),
      body: Container(
        child: ListView.builder(
            itemCount: _imgs.length,
            itemBuilder: (BuildContext context, int index) {
          //return Text(index.toString() + " -------------");
          return FadeInImage(
              image: NetworkImage("https://picsum.photos/200/300?random="+index.toString()),
              placeholder: AssetImage("data/jar-loading.gif"));
        }),
      ),
    );
  }

是否没有办法设置ListView.buider预先创建的项目数以及移至非“已访问”的滚动区域时应创建的项目数？

Answer 1

我认为您有连续创建列表项的垃圾邮件，因为创建的每个列表项紧随其后都是零大小

如果您将FadeInImage包装成具有高度的小部件，它将按预期工作例如使用高度为100的容器包装

  child: ListView.builder(
    itemBuilder: (context, index) {
      return Container(
        height: 100,
        child: FadeInImage(
            image: NetworkImage("https://picsum.photos/200/300?random=" + index.toString()),
            placeholder: AssetImage("data/jar-loading.gif")),
      );
    },
  ),

您还应该删除itemCount: _imgs.length,

设置项目计数ListView.builder在滚动时和滚动时创建

1 个答案: