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

Question

我的目标：当用户按下“_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(),
    );
  }
}

我已经尝试过 - 将流构建器 function 添加到 ontapped: 在列表按钮上 - 已阅读并观看了所有视频，但仍然找不到解决方案

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

Answer 1

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

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

我希望这对你有用。

Answer 2

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

Answer 3

我建议您使用 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]));
      },
    );
  }
...

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

注意：您可能必须在 Firestore 中创建“索引”。 需要新索引时会出错。