首页 文章

Flutter Firebase / Firestore文档参考Future Builder列表视图

提问于
浏览
0

刚开始使用Firestore和Flutter并尝试将我的文档项从Firestore导入ListView并遇到错误 . 这是我的数据结构:

Firestore Data Structure

这是我到目前为止的页面代码 .

import 'package:flutter/material.dart';
import 'package:async/async.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter_firestore_test/ui/restaurantDetail.dart';

class RestaurantList extends StatefulWidget {

  final String title;
  final String director;
  RestaurantList({Key key,this.title, this.director}) : super(key: key);



  @override
  _RestaurantListState createState() => _RestaurantListState();
}

class _RestaurantListState extends State<RestaurantList> {

  Future getList() async{
    var firestore = Firestore.instance;

    DocumentReference docRef = firestore.collection('Restaurant').document('Test');
    var data;
    docRef.get().then((datasnapshot){
      if(datasnapshot.exists){
        data = datasnapshot.data['Locations'];
      }
    });
    return data;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${widget.title}'),
        centerTitle: true,
        backgroundColor: Colors.blueGrey,
      ),
      body: new Container(
        child: FutureBuilder(
            future: getList(),
            builder: (_, snapshot){
              if(snapshot.connectionState == ConnectionState.waiting){
                return CircularProgressIndicator();
//                return Center(
//                  child: Text("Loading..."),
//                );
              }else{
                return ListView.builder(
                    itemCount: snapshot.data.length,
                    itemBuilder: (_, index){
                      if(snapshot.data[index].data["title"]==true){
                        return ListTile(
                          title: new Center(child: Text(snapshot.data[index].data["name"],
                            style: TextStyle(fontSize: 25.0),),),
                        );
                      }else if(snapshot.data[index].data["title"]==false) {
                        return ListTile(
                          title: Text(snapshot.data[index].data["name"],
                          style: TextStyle(
                              fontWeight: FontWeight.w500,
                              color: Colors.black),
                          ),
                          subtitle: Text('Insert Type of food?',
                          style: TextStyle(
                            color: Colors.grey),
                          ),
                          onTap: (){
                            Navigator.push(
                                context,
                                MaterialPageRoute(builder: (context)=> RestaurantDetail())
                            );
                          },
                        );
                      }
                    });
            }}),
      ),
    );
  }
}

在我的数据文档中,出于外观原因,我在 Map 中有一个订单字段和 Headers 字段 . 订单是我想要数据的订单,因为Firestore默认按字母顺序排列 . Headers bool是列表视图中心数据,它被视为列表中的 Headers 并使其不可点击 .

我确实得到了一个版本,我将每个列表项目作为一个集合中的自己的文档,但试图在单个文档中查看这个限制 .

1 回答

  • 0

    有一个内置于firestore的排序功能,方法 orderBy(field) 可用于对数据进行排序 . 有关详细信息,请参阅https://firebase.google.com/docs/firestore/query-data/order-limit-data

    你需要编辑这一行

    DocumentReference docRef = firestore.collection('Restaurant').document('Test');

    to

    DocumentReference docRef = firestore.collection('Restaurant').orderBy('order').document('Test');

相关问题