Flutter 在Flatter中排列cloud firestore中的图标

我有一个AlertDialog，其中的图标来自CloudFireStore。我正在努力改变图标的布局，使其看起来正常。（1） 是目前正在展示的，也是我想要实现的

(一)

(二)

这是我的代码：

Widget _buildPopupDialog(BuildContext context) {
    return Scaffold(
        body: StreamBuilder(
            stream: FirebaseFirestore.instance.collection('icons').snapshots(),
            builder: (context, snapshot) {
              return new AlertDialog(
                content: SingleChildScrollView(
                  child: new Container(
                      height: 500,
                      width: 300,
                      child: new ListView(
                        children: snapshot.data.documents
                            .map<Widget>((DocumentSnapshot document) {
                          return new MoodButton(
                            iconData: (IconData(document.data()['ref'],
                                fontFamily: 'MaterialIcons')),
                            onTap: () => print("Mood"),
                          );
                        }).toList(),
                      )),
                ),
              );
            }));

Widget\u buildPopupDialog（BuildContext）{
返回脚手架(
正文：StreamBuilder(
流：FirebaseFirestore.instance.collection（'icons'）.snapshots（），
生成器：（上下文，快照）{
返回新警报对话框(
内容：SingleChildScrollView(
子容器：新容器(
身高：500，
宽度：300，
子：新列表视图(
子项：snapshot.data.documents
.map（（文档快照文档）{
返回新的MoodButton(
iconData:（iconData（document.data（）['ref']，
fontFamily:“唯物主义者”），
onTap:（）=>打印（“心情”），
);
}).toList（），
)),
),
);
}));

---

非常感谢您的帮助！

您应该使用

GridView

而不是

ListView

。将

crossAxisCount

属性设置为

3

，您应该会得到想要的结果。如果您有任何疑问，可以找到

GridView

的文档