從Firestore中檢索影像陣列-flutter

我目前正在嘗試從 Firestore 檢索影像串列并像這樣在螢屏上顯示它們

但我只能從串列中檢索一張影像。請幫我顯示 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 資料結構。

但是，我的問題是我只能檢索一張影像。這是我的詳細資訊頁面代碼

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()。但我無法讓它發揮作用。提前致謝。

uj5u.com熱心網友回復：

查看您正在使用的代碼，看起來不錯。它只是缺少從影像 url 到影像小部件的映射。

替換children在ListView如下圖所示：

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

它應該作業假設itemData['Gallery']是一個List<String>存盤在firestore

標籤：扑

上一篇：顫振塊的未定義名稱狀態

下一篇：如何解決顫振堆疊小部件問題