时间戳

首页 > 解决方案 > FLUTTER：如何删除 gridview 单元格背景？

firebase - FLUTTER：如何删除 gridview 单元格背景？

问题描述

我试图将 boxshadow 放在 gridview 内的容器中，但阴影位于单元格之外，并且单元格的背景颜色与页面背景颜色不同。我想让我的容器在 gridview 中具有相同的背景颜色和干净的 boxshadow 到我的容器。如果我在 gridview 之外使用它，它会完美运行。这是我的代码：

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Theme.of(context).backgroundColor,
  body: Center(
    child: FutureBuilder(
      future:
          Firestore.instance.collection('rooms').document(pincode).get(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
          nomines = snapshot.data['Nominés'];
          thequestion = snapshot.data['Question'].toString();
          return Column(children: <Widget>[
            Text(thequestion),
            Expanded(
              child: StreamBuilder<QuerySnapshot>(
                stream: Firestore.instance
                    .collection('rooms')
                    .document(pincode)
                    .collection('users')
                    .snapshots(),
                builder: (BuildContext context,
                    AsyncSnapshot<QuerySnapshot> snapshot) {
                  if (!snapshot.hasData)
                    return Text("Chargement....");
                  else {
                    return new GridView.count(
                        crossAxisCount: 2,
                        children: snapshot.data.documents
                            .map((DocumentSnapshot document) {
                          if (document['id'] == nomines[0] ||
                              document['id'] == nomines[1])
                            return Container(
                              child: InkWell(
                                onTap: () {
                                  vote(document['id']).then((a) {
                                    Navigator.push(
                                        context,
                                        MaterialPageRoute(
                                          builder: (context) =>
                                              Waitresults(),
                                        ));
                                  });
                                },
                                child: Container(
                                  decoration: BoxDecoration(
                                      border: Border.all(
                                          width: 2.0, color: Color(document['couleur'])),
                                      boxShadow: <BoxShadow>[
                                        BoxShadow(
                                            color: Color(document['couleur']),
                                            blurRadius: 0,
                                            offset: Offset(7, 3))
                                      ],
                                      shape: BoxShape.circle),
                                  child: OvalPic(document['photo'],
                                      document['couleur']),
                                ),
                              ),
                            );
                          else
                            return null;
                        }).toList()
                              ..removeWhere((el) => el == null));
                  }
                },
              ),
            )
          ]);
        } else
          return CircularProgressIndicator();
      },
    ),
  ),
);

}

标签： firebaseflutterdartgridviewgoogle-cloud-firestore

解决方案

gridView您可以用 a包裹container，然后使用 中的属性color来container更改背景颜色。

 Container(
    color : Colors.black,
    child : GridView.count(
         ..... 
    ),
  )
),

推荐阅读