有没有办法从扑朔迷离的火库中加载图像？

Question

我是一个新手，所以，我一直在尝试使用cachenetworkimage和firestore来快速地加载图像，但是我无法...这是我的代码

这是来自Firestore的快速浏览。

class _Home extends State<Home> {
  Future<RemoteConfig> remoteConfig() async => await RemoteConfig.instance;
   StreamSubscription<QuerySnapshot> subscription;
  List<DocumentSnapshot> wallpapersList;
  final CollectionReference collectionReference = Firestore.instance.collection("images").document('IQlIiQtlWaidilQKFw2Y') as CollectionReference;
   @override    
  void initState() {
    super.initState();
     subscription = collectionReference.snapshots().listen((datasnapshot) {
      setState(() {
    wallpapersList = datasnapshot.documents;
  });
});
}
List<Widget> ListMyWidgets() {
 List<Widget> list = new List();
 var wallpaperList;
  for(var i = 0; i< wallpaperList.length; i++){
    list.add(CachedNetworkImage(imageUrl: wallpaperList[i]['homescreen_bannersrc']));
 }
 return list;
}
  @override
  Widget build(BuildContext ctx) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: SingleChildScrollView(
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: 
                  ListMyWidgets()
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

首先，您的小部件应该是有状态的，因为您似乎没有使用任何东西来记住状态。

然后在您的小部件中声明以下内容：

 StreamSubscription<QuerySnapshot> subscription;
 List<DocumentSnapshot> wallpapersList;
 final CollectionReference collectionReference =
      Firestore.instance.collection("images");

在initState中添加以下代码：

subscription = collectionReference.snapshots().listen((datasnapshot) {
  setState(() {
    wallpapersList = datasnapshot.documents;
  });
});

立即创建小部件列表：

List<Widget> ListMyWidgets() {
 List<Widget> list = new List();
 for(var i = 0; i< wallpaperList.length; i++){
    list.add(CachedNetworkImage(imageUrl: wallpaperList[i]['homescreen_bannersrc']));
 }
 return list;
}

现在将以下代码添加到构建方法中：

Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 children: ListMyWidgets()
)