如何从Firebase实时数据库获取数据并在GridView中展示及点击跳转

1. 定义数据实体类（可选但推荐） #

你拿到的DataSnapshot里的value通常是Map<dynamic, dynamic>类型，转成自定义实体类后续操作更方便，假设你的宠物数据包含id、名称、配图地址三个字段，可参考下面的写法：

class Pet {
  final String id;
  final String name;
  final String imageUrl;
  Pet({required this.id, required this.name, required this.imageUrl});

  // 从Firebase返回的Map转为Pet对象
  factory Pet.fromMap(String id, Map<dynamic, dynamic> map) {
    return Pet(
      id: id,
      name: map['name'] ?? '',
      imageUrl: map['imageUrl'] ?? '',
    );
  }
}

提示：如果你的Firebase存储的数据结构和示例不同，只需要调整Pet实体类的字段和fromMap的映射逻辑即可。

2. 封装获取数据的方法 #

把你原来的打印方法改成返回宠物列表的Future方法：

Future<List<Pet>> getPetsList() async {
  DataSnapshot snapshot = await dbRef.once();
  List<Pet> pets = [];
  if (snapshot.value != null) {
    Map<dynamic, dynamic> petsMap = snapshot.value as Map<dynamic, dynamic>;
    petsMap.forEach((key, value) {
      pets.add(Pet.fromMap(key, value));
    });
  }
  return pets;
}

3. 构建带点击跳转功能的GridView #

直接替换你原来的Column组件即可，跳转的目标页面可以替换为你自己的业务页面，示例中默认跳转到接收Pet参数的PetDetailPage详情页：

FutureBuilder<List<Pet>>(
  future: getPetsList(),
  builder: (context, snapshot) {
    // 加载中状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    // 加载出错状态
    if (snapshot.hasError) {
      return const Center(child: Text('数据加载失败'));
    }
    // 拿到数据渲染GridView
    List<Pet> pets = snapshot.data ?? [];
    return GridView.builder(
      padding: const EdgeInsets.all(10),
      // 网格配置：2列、子项宽高比1:1.2、列间距10、行间距10
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 1 / 1.2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
      ),
      itemCount: pets.length,
      itemBuilder: (context, index) {
        Pet pet = pets[index];
        // InkWell实现点击水波纹效果
        return InkWell(
          onTap: () {
            // 点击跳转逻辑，把当前选中的宠物数据传递到详情页
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => PetDetailPage(pet: pet),
              ),
            );
          },
          // 列表项UI，可根据需求自行调整样式
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              color: Colors.white,
              boxShadow: const [BoxShadow(color: Colors.black12, blurRadius: 2)],
            ),
            child: Column(
              children: [
                Expanded(
                  child: Image.network(
                    pet.imageUrl,
                    fit: BoxFit.cover,
                    width: double.infinity,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(pet.name),
                ),
              ],
            ),
          ),
        );
      },
    );
  },
)

可选优化：实时更新数据 #

如果你需要数据库数据变化时GridView自动同步更新，把FutureBuilder换成StreamBuilder、监听dbRef.onValue事件即可，其余渲染逻辑完全一致。

内容的提问来源于stack exchange，提问作者MD Mosfiqur Rohim Masfiq