0

我使用 StreamProvider 在我的应用程序中接收 Firestore 数据。我使用lazy_load_scrollview图像网格视图中的分页包。在 StreamProvider 中，我必须传递上下文来监听数据流。就像 Provider.of<List>(context) 一样。所以我必须在构建中定义它。但是在我在代码中定义的 _loadMore() 方法中，我需要图像（这是我收听 Stream 的地方）列表来更新数据列表以进行分页。分页工作正常，但当我第一次启动应用程序时，它只显示加载指示器，不加载任何内容。当我向下滑动屏幕时，它开始加载并且分页工作正常。要在我第一次启动时加载网格项，我需要在 initState() 中调用 _loadMore() 方法。我不能调用它，因为它在构建中。但是我无法在构建之外定义该方法，因为它需要定义 Stream 侦听器（即图像）。我可以' 不要从构建中获取上下文来执行此操作。有什么方法可以在构建之外获取上下文？还是有更好的分页解决方案？如果您能建议我一个解决方案，我将不胜感激。这是我的代码，

class ImageGridView extends StatefulWidget {
  @override
  _ImageGridViewState createState() => _ImageGridViewState();
}

class _ImageGridViewState extends State<ImageGridView> {

  List<GridImage> data = [];
  int currentLength = 0;

  final int increment = 10;
  bool isLoading = false;

  // I need to call _loadMore() method inside the initState
  /*@override
  void initState() {
   _loadMore();
    super.initState();
  }*/

  @override
  Widget build(BuildContext context) {

    // listening to firebase streams
    final images = Provider.of<List<GridImage>>(context) ?? [];
    

    Future _loadMore() async {
      print('_loadMore called');
      setState(() {
        isLoading = true;
      });

      // Add in an artificial delay
      await new Future.delayed(const Duration(seconds: 1));
      for (var i = currentLength; i < currentLength + increment; i++) {

      if (i >= images.length) {
        setState(() {
          isLoading = false;
        });
        print( i.toString());
      } else {
        data.add(images[i]);
      }

    }

    setState(() {
      print('future delayed called');
      isLoading = false;
      currentLength = data.length;
    });
  } 

    images.forEach((data) {
      print('data' + data.location);
      print(data.url);
      //print('images length ' + images.length.toString());
    }); 

    try {

      return LazyLoadScrollView(
        isLoading: isLoading,
        onEndOfPage: () {
          return _loadMore();
        },
          child: GridView.builder(
          itemCount: data.length + 1,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
          itemBuilder: (context, index) {

            if (index == data.length) {
              return CupertinoActivityIndicator();
            } 
            
            //passing images stream with the item index to ImageGridItem
            return ImageGridItem(gridImage: data[index],); 
          },

        ),
      );
      
    } catch (e) {

      return Container(
        child: Center(
          child: Text('Please Upload Images'),
        )
      );

    }

    
  }
}
4

0 回答 0