在 ListView 中使用无限分页显示图像时出现问题

Question

在 ListView 中显示图像时出现问题，错误是“CachedNetworkImage”不是“String”类型的子类型

基本上想从这个 firebase 集合中获取图像并使用分页将它们显示在“ListView”中

initSliderImages() async {
    var result = await FirebaseFirestore.instance.collection('galerytab1');
    result.snapshots().listen((data) {
      List imgs = [];
      data.docChanges.forEach((change) {
        var imageData = change.doc.data();
        String image = imageData?['url'];
        imgs.add(CachedNetworkImage(imageUrl: image));
      });

      setState(() {
        images = imgs;
      });
    });
  }

class CategoryTab1 extends StatefulWidget {
  final String category;
  CategoryTab1({Key? key, required this.category}) : super(key: key);

  @override
  _CategoryTab1State createState() => _CategoryTab1State();
}

class _CategoryTab1State extends State<CategoryTab1> {
  List images = [];

  late ScrollController controller;

  final scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    // addUrls();
    controller = ScrollController()..addListener(_scrollListener);
    initSliderImages();
    if (this.mounted) {
      context.read<CategoryTab1Bloc>().data.isNotEmpty
          ? print('data already loaded')
          : context.read<CategoryTab1Bloc>().getData(mounted, widget.category);
    }
  }

  @override
  void dispose() {
    controller.removeListener(_scrollListener);
    super.dispose();
  }

  void _scrollListener() {
    print(controller.position.extentAfter);
    if (controller.position.extentAfter < 13) {
      setState(() {
        images.addAll(List.generate(2, (index) => 'Inserted $index'));
      });
    }
  }

  // //
  // void addUrls() {
  //   final List<String> imgs = List.generate(
  //     16,
  //         (_) {
  //       int random = Random().nextInt(16) + 16; // 250-500
  //       return
  //         // initSliderImages();
  //         // 'https://picsum.photos/$random/$random';
  //           'https://firebasestorage.googleapis.com/v0/b/klosterkatz-c914e.appspot.com/o/galerytab1%2F1.png?alt=media&token=5b0e9c74-ec5a-42ca-aa59-309f41938a28';
  //
  //
  //
  //
  //     },
  //   );

  //   setState(() {
  //     images.addAll(imgs);
  //   });
  // }
  //

  // Fetch images from databse for list

  initSliderImages() async {
    var result = await FirebaseFirestore.instance.collection('galerytab1');
    result.snapshots().listen((data) {
      List imgs = [];
      data.docChanges.forEach((change) {
        var imageData = change.doc.data();
        String image = imageData?['url'];
        imgs.add(CachedNetworkImage(imageUrl: image));
      });

      setState(() {
        images = imgs;
      });
    });
  }

  Widget galerytab1() {
    print('Count images');
    print(images.length);
    return Stack(children: [
      Container(
          color: Colors.grey,
          // height: 185,
          width: MediaQuery.of(context).size.width),
      Container(
        child: SizedBox(
          // height: 200.0,
          width: MediaQuery.of(context).size.width,
          child: (images != null && images.length > 0)
              ? Column(children: [
                  // Image(image: images[0]),
                  // Image(image: images[1]),
                  // Image(image: images[2]),
                  // Image(image: images[3]),
                  // Image(image: images[4]),
                  // Image(image: images[5]),
                  // Image(image: images[6]),
                  // Image(image: images[7]),
                  // Image(image: images[8]),
                  // Image(image: images[9]),
                  // Image(image: images[10]),
                  // Image(image: images[11]),
                  // Image(image: images[12]),
                ])
              : CircularProgressIndicator(
                  color: Colors.red,
                ),
        ),
      ),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    print('imagesimageimagesimagesimageismageimage');
    print('$images');
    print(images.length);

    return NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification notification) {
        if (notification.metrics.pixels ==
            notification.metrics.maxScrollExtent) {
          // addUrls();
        }

        return true;
      },
      child: ListView.builder(
        key: widget.key,
        itemCount: images.length,
        itemExtent: 250,
        itemBuilder: (context, index) {
          return Image.network(
            images[index],
            fit: BoxFit.cover,
            key: ValueKey(images[index]),
          );
        },
      ),
    );
  }


} 

Answer 1

您不能在 String 列表中添加 CachedNetworkImage ！

您必须将 images 列表的每个网址映射到 CachedNetworkImage 中，如下所示：

Container(
  child: SizedBox(
    // height: 200.0,
    width: MediaQuery.of(context).size.width,
    child: (images != null && images.length > 0)
        ? Column(children: images.map((url) => CachedNetworkImage(imageUrl: url)).toList()
        : CircularProgressIndicator(
            color: Colors.red,
          ),
  ),
),