在 Flutter 中排列来自 Cloud Firestore 的图标

Question

我有一个 AlertDialog，其中包含来自云 Firestore 的图标。我正在努力更改图标的布局，使其看起来正常。 (1) 是目前正在展示的，(2) 是我想要实现的。

(1)

(2)

这是我的代码：

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(),
                      )),
                ),
              );
            }));

任何帮助将不胜感激！

Answer 1

您应该使用GridView 而不是ListView。将crossAxisCount 属性设置为3，你应该会得到你想要的结果。有疑问可以找GridView的文档here