Flutter：从 Firebase 实时数据库项目创建 GridView

Posted 2023-02-23

【中文标题】Flutter：从 Firebase 实时数据库项目创建 GridView

【英文标题】：Flutter: Creating GridView From Firebase Realtime DB items

【发布时间】：2020-07-03 00:49:09

【问题描述】：

目前，在我的应用程序的主屏幕中，我有一个 firebase_animated_list 小部件，它创建了一个列表视图。但是，我想在 GridView 中显示这些项目，因为它看起来会更好。

这是我的代码 sn-p.??????????

body: Column(
          children: <Widget>[
            Flexible(
              child: FirebaseAnimatedList(
                query: firebaseRef,
                itemBuilder: (BuildContext context, DataSnapshot snapshot,
                    Animation<double> animation, int index) 
                  return InkWell(
                    child: ListTile(
                      contentPadding: EdgeInsets.all(7),
                      title: Text(mynode[index].key),
                      leading: CircleAvatar(
                        radius: 30,
                        child: FittedBox(
                          child: Text(mynode[index].id),
                        ),
                      ),
                      trailing: Icon(Icons.play_arrow),
                      onTap: () => Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => DemoDb(
                            id: othernode[index].id,
                          ),
                        ),
                      ),
                    ),
                  );
                ,
              ),
            ),
          ],
        ),

这完美地创建了一个项目列表，但我应该如何将其更改为 GridView？我尝试使用GridView.count 代替ListTile 小部件。但是因为它嵌套在 firebase_animated_list 中，所以每个网格都在这个动画列表中进行了布局。

有什么插件或库可以帮助我吗？也许是一个代码 sn-p 或者如果有人可以建议我任何更好的方法来实现这一点，这对我来说意味着世界。

谢谢。

【参考方案1】：

尝试使用 StreamBuilder 加载地图中的项目，然后使用 Gridview，然后您可以使用数据填充 Gridview。

看看下面的例子：

这里我们有一个我们试图从 firebase 中提取的数据模型。

class Product 

  String key;
  String cardid;
  String cardname;
  String cardimage;
  int cardprice;
  String carddiscription;
 

  Product(this.key,this.cardid,this.cardname,this.cardimage,this.cardprice,this.carddiscription);

  

下面是如何在 StreamBuilder 中实现 GridView 并用数据填充它：

return StreamBuilder(
          stream: FirebaseDatabase.instance
              .reference()
              .child("Products")
              .onValue,
          builder: (BuildContext context, AsyncSnapshot<Event> snapshot) 
            if (snapshot.hasData) 
              Map<dynamic, dynamic> map = snapshot.data.snapshot.value;


              products.clear();

             map.forEach((dynamic, v) =>
                 products.add( new Product(v["key"],v["cardid"] , v["cardname"],v["cardimage"] ,v["cardprice"], v["carddiscription"]))
             );

              return GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                itemCount: products.length,
                padding: EdgeInsets.all(2.0),
                itemBuilder: (BuildContext context, int index) 
                  return     GestureDetector(
                    onTap: ()

                    ,
                    child: Padding(
                      padding: EdgeInsets.all(5),
                      child: Container(

                        width: (screenWidth(context)/2)-15,
                        height: 150,
                        decoration: BoxDecoration(

                          shape: BoxShape.rectangle,
                          borderRadius: BorderRadius.all(Radius.circular(15.0)),
                          image: DecorationImage(
                            image: NetworkImage(products[index].cardimage),
                            fit: BoxFit.cover,
                          ),
                        ),
                        child:  Padding(
                          padding: EdgeInsets.all(0),
                          child: Container(

                            decoration: BoxDecoration(
                              shape: BoxShape.rectangle,
                              borderRadius: BorderRadius.all(Radius.circular(15.0)),
                              gradient: new LinearGradient(
                                  colors: [
                                    Colors.black,
                                    const Color(0x19000000),
                                  ],
                                  begin: const FractionalOffset(0.0, 1.0),
                                  end: const FractionalOffset(0.0, 0.0),
                                  stops: [0.0, 1.0],
                                  tileMode: TileMode.clamp),
                            ),
                            child: Padding(
                              padding: EdgeInsets.all(10),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.end,
                                children: [
                                  Text(
                                    products[index].cardname,
                                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500,color: Colors.white),
                                  ),
                                  Text('Rs. $products[index].cardprice'
                                    ,
                                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.w200,color: Colors.white),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ), /* add child content here */
                      ),
                    ),
                  );

,
              );
             else 
              return CircularProgressIndicator();
            
          ),

【讨论】：

被新的 null 安全功能和新的 flutter fire 库卡住了......无论如何，答案很好：）它现在正在工作！