如何通过最近在 Flutter 中添加的方式显示 Firestore 中的项目？答案

【问题标题】：How to display items from Firestore by recently added in Flutter?如何通过最近在 Flutter 中添加的方式显示 Firestore 中的项目？
【发布时间】：2021-06-08 10:35:09
【问题描述】：

我正在尝试解决一个问题，它正在通过 Flutter 显示最近添加到 Firestore 的数据。在我的情况下可以做什么？

在 React 中我会使用 useState 钩子来实现这一点，如何在 Flutter 中实现呢？我读到了 .sort();方法，这是正确的方法吗？

代码：

Form.dart

class FormText extends StatelessWidget {
  final String _labelText = 'Enter your weight..';
  final String _buttonText = 'Save';

  final _controller = TextEditingController();

  final dateFormat = new DateFormat.yMMMMd().add_jm();

  final _collection =
      FirebaseFirestore.instance.collection('weightMeasurement');

  void saveItemToList() {
    final weight = _controller.text;

    if (weight.isNotEmpty) {
      _collection.add({
        'weight': weight,
        'time': dateFormat.format(DateTime.now()),
      });
    } else {
      return null;
    }

    _controller.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: TextField(
            keyboardType: TextInputType.number,
            controller: _controller,
            decoration: InputDecoration(
              labelText: _labelText,
            ),
          ),
        ),
        FlatButton(
          color: Colors.blue,
          onPressed: saveItemToList,
          child: Text(
            _buttonText,
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }
}

Measurements.dart

class RecentMeasurement {
  Widget buildList(QuerySnapshot snapshot) {
    return ListView.builder(
      reverse: false,
      itemCount: snapshot.docs.length,
      itemBuilder: (context, index) {
        final doc = snapshot.docs[index];
        return Dismissible(
          background: Container(color: Colors.red),
          key: Key(doc.id),
          onDismissed: (direction) {
            FirebaseFirestore.instance
                .collection('weightMeasurement')
                .doc(doc.id)
                .delete();
          },
          child: ListTile(
            title: Expanded(
              child: Card(
                margin: EdgeInsets.all(30.0),
                child: Column(
                  children: <Widget>[
                    Text('Current Weight: ' + doc['weight'] + 'kg'),
                    Text('Time added: ' + doc['time'].toString()),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

布局.dart

class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(30.0),
      child: Column(
        children: <Widget>[
          FormText(),
          StreamBuilder<QuerySnapshot>(
              stream: FirebaseFirestore.instance
                  .collection('weightMeasurement')
                  .snapshots(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) return LinearProgressIndicator();
                return Expanded(
                  child: RecentMeasurement().buildList(snapshot.data),
                );
              }),
        ],
      ),
    );
  }
}

【问题讨论】：

您共享的代码中哪一行没有达到您的预期？

标签： firebase flutter dart google-cloud-firestore

【解决方案1】：

你必须在你的收藏上使用“orderBy”，但以前你必须存储一个叫做时间戳的东西。确保当您将您的项目上传到 Firebase 时也将 DateTime.now() 与您的项目一起上传，以便您可以按时间订购它们。不要忘记使用升序方向，因为它会显示您正确订购的物品。

【讨论】：

【解决方案2】：

您可以尝试 order by 。这是example

firestoreDb.collection("weightMeasurement")
            .orderBy("date", Query.Direction.ASCENDING)

【讨论】：