Flutter开发：如何从Cloud Firestore的personalinfo集合中获取全部字段？

我明白你现在的困扰啦——你已经成功把用户的个人信息存入Firestore的personalinfo集合，但在读取数据的时候只能拿到单个字段（field1），想要把所有提交的信息都展示出来对吧？咱们来一步步解决这个问题。

问题根源 #

你当前的读取代码里，只指定了获取document['field1']，所以自然只能看到单个字段：

return Text(document['field1']);

Firestore的每个文档其实是一组键值对的集合，我们只需要获取整个文档的数据，就能拿到所有字段啦。

方案1：按字段名逐个取出（适合字段固定的情况） #

如果你的字段是固定的（姓名、地址、城市、邮编），可以直接按字段名取出每个值，然后用Column排版展示，界面会更规整：

修改OrderSuccessful里的StreamBuilder部分：

StreamBuilder(
  stream: FirebaseFirestore.instance.collection('personalinfo').snapshots(),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
    if (!snapshot.hasData){
      return const Center(child: Text("No data available"));
    }
    return ListView(
      children: snapshot.data!.docs.map((document){
        return Card(
          margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Full Name: ${document['field1']}'),
                const SizedBox(height: 8),
                Text('Address: ${document['field2']}'),
                const SizedBox(height: 8),
                Text('City: ${document['field3']}'),
                const SizedBox(height: 8),
                Text('Zipcode: ${document['field4']}'),
              ],
            ),
          ),
        );
      }).toList(),
    );
  },
)

方案2：动态遍历所有字段（适合字段不确定的情况） #

如果以后可能会增加或修改字段，这种方式更灵活，它会自动遍历文档里的所有键值对：

StreamBuilder(
  stream: FirebaseFirestore.instance.collection('personalinfo').snapshots(),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
    if (!snapshot.hasData){
      return const Center(child: Text("No data available"));
    }
    return ListView(
      children: snapshot.data!.docs.map((document){
        // 获取整个文档的键值对集合
        final data = document.data() as Map<String, dynamic>;
        return Card(
          margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: data.entries.map((entry) {
                return Text('${entry.key}: ${entry.value}');
              }).toList(),
            ),
          ),
        );
      }).toList(),
    );
  },
)

额外建议：给字段起有意义的名字 #

你现在存数据的时候用的是field1、field2这种通用命名，时间长了很容易搞混。建议修改保存数据的代码，用更清晰的键名：

// 原代码
Map <String,dynamic> data= {"field1": fullname.text,"field2": address.text,"field3": city.text, "field4": zipcode.text};

// 修改后
Map <String,dynamic> data= {
  "fullname": fullname.text,
  "address": address.text,
  "city": city.text,
  "zipcode": zipcode.text
};

这样在读取的时候，代码会更易懂：document['fullname']比document['field1']直观多啦！

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