Flutter 使用 Streambuilder 对数据 Firestore 进行排序

Posted 2023-02-23

【中文标题】Flutter 使用 Streambuilder 对数据 Firestore 进行排序

【英文标题】：Flutter sort data Firestore with Streambuilder

【发布时间】：2020-01-22 10:51:27

【问题描述】：

我的目标：当用户按下“_mainListItem”内的“列表”按钮时，我希望列表视图按 orderBy 排序。以及在屏幕上更新

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


class mainlist extends StatefulWidget 
  @override
  _mainlistpage createState() => _mainlistpage();


class _mainlistpage extends State<mainlist> 


  Widget homePage() 
    return StreamBuilder(
      stream: Firestore.instance.collection("Test").snapshots(),
      builder: (context, snapshot) 
        if (!snapshot.hasData) return Text("Loading");
        return ListView.builder(
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) =>
                _mainListItem(context, snapshot.data.documents[index]));
      ,
    );
  


  Widget _mainListItem(BuildContext context, DocumentSnapshot document) 
    return Card(
      color: Colors.white,
      child: InkWell(
        onTap: () 
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => profile(context, document)));
        ,
        child: Container(
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                    border: Border(bottom: BorderSide(color: Colors.black12))),
                child: Row(
                  children: [
                    Expanded(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Column(
                            children: <Widget>[
                              Stack(
                                  alignment: Alignment.topRight,
                                  children: <Widget>[
                                    Padding(
                                      padding: const EdgeInsets.only(right: 5),
                                      child: ClipRRect(
                                        borderRadius:
                                            BorderRadius.circular(0.0),
                                        child: FittedBox(
                                            child: Image.asset(
                                          "assets/Profile Picture.png",
                                          fit: BoxFit.fill,
                                        )),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(
                                          top: 7, right: 4),
                                      child: Text(
                                        'Test',
                                        style: TextStyle(fontSize: 12),
                                      ),
                                    ),
                                  ]),
                              Row()
                            ],
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    document['name'],
                                  ),
                                  // Text("2km"),
                                ],
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 5, bottom: 5),
                    child: Row(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(left: 10, right: 7),
                          child: Container(
                            child: Material(
                              borderRadius: BorderRadius.circular(5),
                              shadowColor: Colors.black,
                              elevation: 1,
                              child: SizedBox(
                                  height: 28,
                                  width: 68,
                                  child: IconButton(
                                    padding: EdgeInsets.only(bottom: 10),
                                    **icon: Icon(Icons.list),
                                    disabledColor: Colors.blue,
                                    iconSize: 25,**
                                  )),
                            ),
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  

  @override
  Widget build(BuildContext context) 
    // TODO: implement build
    return new Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        backgroundColor: Colors.grey,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          color: Colors.red,
        ),
        title: Text("Test"),
        centerTitle: true,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            iconSize: 30,
            color: Colors.white,
          )
        ],
      ),
      body: homePage(),
    );
  

我试过了 - 将 streambuilder 函数添加到 ontapped: 在 List 按钮上 - 已阅读并观看了所有视频，但仍然找不到解决方案

注意：该应用看起来很奇怪，因为我删除了不必要的信息

【参考方案1】：

我建议您使用 state 来确定您的列表将如何排序的字段。 这就是我为实现这一目标而要做的（从相同的代码继续）：

...
class _mainlistpage extends State<mainlist> 
  String _orderBy = 'defaultSort'; //? HERE YOU PUT WHAT YOUR SORTING FIELD NAME IS
  bool _isDescending = true; //? THIS IS WHAT WILL SET THE ORDER SORTING

  Widget homePage() 
    return StreamBuilder(
      stream: Firestore.instance
        .collection("Test")
        .orderBy(_orderBy, descending: _isDescending) //? PUT THE ORDERBY QUERY HERE
        .snapshots(),
      builder: (context, snapshot) 
        if (!snapshot.hasData) return Text("Loading");
        return ListView.builder(
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) =>
                _mainListItem(context, snapshot.data.documents[index]));
      ,
    );
  
...

在类中的某处，放置按钮或下拉菜单并使用 setState(...) 设置 新变量的状态。

注意：您可能必须在 Firestore 中创建“索引”。你会得到一个新的错误 索引是必需的。

【参考方案2】：

尝试将值映射到 List<CustomObject> 并使用列表视图中的对象列表。

【参考方案3】：

您可以在快照方法之前对列表项进行排序，例如：

.orderBy('sortField', descending: true).snapshot()

我希望这对你有用。

【讨论】：

谢谢，但这不允许用户单击按钮并重新排序列表

你找到解决这个问题的方法了吗？