从 Firestore 中检索图像数组 - 颤动答案

【问题标题】：Retrieve array of images from Firestore - flutter从 Firestore 中检索图像数组 - 颤动
【发布时间】：2021-12-26 16:25:41
【问题描述】：

我目前正在尝试从 Firestore 检索图像列表并将它们显示在屏幕上 like this

但我只能从列表中检索一张图片。请帮我显示 Firestore 中的所有图像。

我如何从 Firestore 流式传输数据

StreamBuilder<QuerySnapshot>(
          stream:
              FirebaseFirestore.instance.collection('properties').snapshots(),
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return const Text('Fail to load..');
            } else if (snapshot.hasData || snapshot.data != null) {
              return ListView.builder(
                  physics: const BouncingScrollPhysics(),
                  itemCount:
                      snapshot.data?.docs.length, 
                  itemBuilder: (BuildContext context, int index) {
                    QueryDocumentSnapshot<Object?>? documentSnapshot =
                        snapshot.data!.docs[index];
                    return TestPropertyCard(itemData: documentSnapshot);
                  });
            }
            return Container();
          },
        ),

房产证

class TestPropertyCard extends StatelessWidget {
  final dynamic itemData;
  const TestPropertyCard({Key? key, required this.itemData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => PropertyDetailPage(
                  itemData: itemData,
                )));
      },
      child: Container(
        height: 200,
        margin: const EdgeInsets.only(bottom: 8, left: 5, right: 5),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(7),
            color: NayyaaColorTheme.nayyaaBlue),
        child: Column(
          children: [
            ClipRRect(
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(10), topRight: Radius.circular(10)),
              child: Image.network(
                itemData["CoverPhoto"],
                height: 130,
                width: MediaQuery.of(context).size.width,
                fit: BoxFit.fitWidth,
              ),
            ),

当用户点击属性卡时，应用程序将用户带到详细信息页面。在此详细信息页面上，我想将存储在 Firestore 中的图像列表显示为数组。请参阅我的 Firestore 数据结构 here。

但是，我的问题是我只能检索一张图片。这是我的详细页面代码

class PropertyDetailPage extends StatelessWidget {
  final dynamic itemData;
  const PropertyDetailPage({Key? key, required this.itemData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: [
            Image.network(
              itemData['Gallery'][0],
              fit: BoxFit.fill,
            ),
          ],
        ),
      ),
    );
  }
}

我已尝试使用 ListView.builder()。但我无法让它工作。提前致谢。

【问题讨论】：

标签： flutter

【解决方案1】：

查看您正在使用的代码，它似乎很好。它只是缺少从图像 url 到图像小部件的映射。

替换ListView中的children如下：

children: (itemData['Gallery'] as  List).map((imageUrl){
            return Image.network(
              imageUrl as String,
              fit: BoxFit.fill,
            );
          }).toList(),

假设itemData['Gallery'] 是存储在firestore 中的List<String>，它应该可以工作

【讨论】：