时间戳

首页 > 解决方案 > 从 Firebase 获取信息并能够将其与 Flutter 中的 Gridtile 和 GestureDetector 一起使用

firebase - 从 Firebase 获取信息并能够将其与 Flutter 中的 Gridtile 和 GestureDetector 一起使用

问题描述

所以我正在尝试设计一个小部件，它基本上可以创建一个视图，你可以在其中拥有这样的东西：

在此处输入图像描述

我面临的问题是，对于这个示例，我使用的是对 Firebase API 的调用，但是，现在我正在使用 Firebase Auth 和 Firestore Extentionts，并且不想使用提供程序包或 HTTP 请求，我有以下 Firestore 集合：

在此处输入图像描述

如您所见，集合名称是用户，但内部具有 Firebase 作为文档提供的用户 uid，并且该文档内部具有所有用户数据。

所以我需要一些帮助才能拥有以下功能：

  1. 我需要创建一个 ListView，最好是 ListView Builder，这样它就可以显示整个集合，这样它就可以显示集合中包含的所有用户。（每个用户都是一个以他自己的用户 uid 为标题的文档）。

  2. 在 Tile 中，我只想显示名称和图像，但是一旦它可以点击，它应该将我发送到一个新页面（用户个人资料页面作为参数发送 uid）

我得到了这段代码：但我没有关于如何让列表磁贴可点击并获取点击用户的 uid（在磁贴中）以将信息（uid）发送到下一页的逻辑。但是一旦我知道如何显示集合中所有文档的内容（在每个文档中显示名称（名词）作为标题以及如何捕获 uid，我敢打赌我可以进行修改和消除。

import 'package:flutter/material.dart';
import 'package:firebase_firestore/firebase_firestore.dart';

class ExpenseList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance.collection("users").snapshots,
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (!snapshot.hasData) return new Text("No existe registros de Usuario");
          return new ListView(children: getExpenseItems(snapshot));
        });
  }

  getExpenseItems(AsyncSnapshot<QuerySnapshot> snapshot) {
    return snapshot.data.documents
        .map((doc) => ListTile(title: new Text(doc["nombre"], onTap: (){
//Here function to navigate to profile page saving the uid
}))
            .toList();
      }
    }

在该列表图块中，我应该有一个网络图像，因为我可以有一个参数来自集合中文档的图像。

有什么我可以做的吗？

亲切的问候。

标签： firebasefluttergoogle-cloud-firestore

解决方案

在这里您可以找到自定义构建 ListView 的示例。

var futureBuilder=new FutureBuilder(
      future: makecall.firebaseCalls(databaseReference), // async work
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.none: return new Text('Press button to start');
          case ConnectionState.waiting: return new Text('Loading....');
          default:
            if (snapshot.hasError)
              return new Text('Error: ${snapshot.error}');
            else
                return ListView.builder(
                itemCount: snapshot.data.length,
                itemBuilder: (BuildContext context, int index){
                   return Card(
                elevation: 0.0,
                child: Padding(
                  padding: const EdgeInsets.all(0.0),
                  child:  SizedBox(
                height: MediaQuery.of(context).size.height*0.15,
                       width: MediaQuery.of(context).size.width,
                       child:  Card(
                           elevation: 0,
                           child: Row(
                             children: <Widget>[
                               new Container(
                                     child: Image.network(snapshot.data[index].iconUrl,height: MediaQuery.of(context).size.width*0.3,width: MediaQuery.of(context).size.width*0.3,),
                               ),
                               Padding(
                                 padding: const EdgeInsets.only(left: 10,right: 5,top: 5),
                                 child: Column(
                                   mainAxisAlignment: MainAxisAlignment.start,
                                   children: <Widget>[
                                     new Container(
                                       child: Column(
                                         mainAxisAlignment: MainAxisAlignment.start,
                                         children: <Widget>[
                                           Column(
                                             mainAxisAlignment: MainAxisAlignment.start,
                                             crossAxisAlignment: CrossAxisAlignment.start,
                                             children: <Widget>[
                                               Row(
                                                 children: <Widget>[
                                                   condition('${snapshot.data[index].vegOrNon}')==true? new Image.asset('images/non_veg.png',height: 15,width: 15,): new Image.asset('images/veg.jpg',height: 15,width: 15),
                                                   SizedBox(width: 5),
                                                   Text(snapshot.data[index].foodtitle, style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20,fontFamily: 'Roboto-Black'),)
                                                 ],
                                               ),

                                               SizedBox(height:10.0),
                                               Row(
                                                 children: <Widget>[
                                                   new IconTheme(
                                                     data: new IconThemeData(
                                                         color: Colors.black26),
                                                     child: new Icon(Icons.timer,size: 20.0,),
                                                   ),
                                                   Text('${snapshot.data[index].PreptimeInMins} minutes',style: TextStyle(fontWeight: FontWeight.w700,color: Colors.black26),),
                                                 ],
                                               ),
                                             ],
                                           )
                                         ],
                                       ),
                                     ),
                                   ],
                                 ),
                               ),

                             ],
                           )
                       )


                   ),
                ),
              );
                },
                );
        }
      },
    );

我在本指南中找到了这个示例，我认为它对您有用。

如果您的问题是如何使 ListView 磁贴可点击，您可以使用GestureDetector 类来包装磁贴并在 .OnTap 事件中发送 UID

推荐阅读