Flutter如何将Firestore数据从ListView改为两列GridView展示

直接将原代码中的ListView替换为GridView.count构造即可，指定crossAxisCount: 2就可以实现两列布局，数据映射逻辑无需调整，可额外配置间距、子项宽高比等属性优化显示效果。

修改后的完整代码如下：

@override
Widget build(BuildContext context) {
  return StreamBuilder<QuerySnapshot>(
    stream: _usersStream,
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (snapshot.hasError) {
        return const Text('Something went wrong');
      }

      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Text("Loading");
      }

      return GridView.count(
        crossAxisCount: 2, // 固定两列布局
        mainAxisSpacing: 8, // 纵向子项间距
        crossAxisSpacing: 8, // 横向子项间距
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
        // 如果需要自适应内容高度再保留shrinkWrap属性
        // shrinkWrap: true,
        children: snapshot.data!.docs.map((DocumentSnapshot document) {
          Map<String, dynamic> data =
              document.data()! as Map<String, dynamic>;
          // 用Card包裹子项提升网格区分度，也可以直接返回ListTile
          return Card(
            elevation: 2,
            child: ListTile(
              title: Text(data['num']),
              subtitle: Text(data['num']),
            ),
          );
        }).toList(),
      );
    },
  );
}

可选优化说明：

• 若子项内容较多出现布局溢出，可添加childAspectRatio属性调整子项宽高比，默认值为1（正方形），比如设置为0.7即可让子项高度大于宽度。
• 若GridView嵌套在其他可滚动组件内，再添加shrinkWrap: true和physics: const NeverScrollableScrollPhysics()属性即可。

内容的提问来源于stack exchange，提问作者Sunshine