如何在顶部附加新的 ListView 项目答案

【问题标题】：How to append new ListView items at the top如何在顶部附加新的 ListView 项目
【发布时间】：2019-08-03 17:26:06
【问题描述】：

我正在从StreamBuilder 内的Cloud Firestore 中获取ListView.builder() 项目。我希望将新项目添加到 ListView 的顶部。我怎样才能做到这一点？我试过reverse : true，虽然它颠倒了ListView，但是当只有2/3个项目时，ListView看起来很难看，因为ListView从底部开始，屏幕的上部仍然是空的。

【问题讨论】：

看看this有没有帮助
@Sukhi 我的数据来自 Firestore。无法手动设置索引。
你能把 orderBy 添加到 firebase 查询吗？

标签： flutter google-cloud-firestore flutter-listview

【解决方案1】：

添加了shrinkWrap: true 并将ListView 放入带有Align 的alignment: Alignment.topCenter 小部件中，得到了我想要的结果！

              Align(
                alignment: Alignment.topCenter,
                child: ListView.builder(
                  reverse: true,
                  shrinkWrap: true,
                  ...
                  ...
               )
             )

【讨论】：

【解决方案2】：

如果您想在列表视图的顶部添加新项目并且您是使用 Firestore 使用 时间戳

火力基地。火库。时间戳

时间戳表示独立于任何时区的时间点

使用此方法

时间戳.now()

使用 StreamBuilder 按时间从 Firestore 中获取数据

  Widget item() =>
  StreamBuilder<QuerySnapshot>(
    //fetch data from friends collection order by time
    stream: Firestore.instance.collection("friends").orderBy(
        "time", descending: true).snapshots(),
    builder: (context, snapshot) {
      //if data not exist show loading indicator
      if (!snapshot.hasData)
        return CircularProgressIndicator();
      //if data exist 
      return ListView.builder(itemBuilder: (context, index) {
        return Text(snapshot.data.documents[index].data['name']);
      });
    },
  );

在 Firestore 中添加数据

 Firestore.collection("friends")
      .document(friends.otherUID)
      .setData({"name" : "xyz","time": Timestamp.now()});

如果你想更新项目并且你想在列表视图的顶部添加更新的项目

更新数据

     Future<void> updatefriends({String name,Timestamp time}) async {
Map<String, Object> updateFriend = Map();

if (name.isNotEmpty) updateFriend['name'] = name;
if (time !=null) updateFriend['time']=time;


Firestore.instance.collection("friends")
    .document(uid)
    .updateData(updateFriend);

}

【讨论】：

这是一种将数据添加到 FirestoreDb 然后显示的方法，但不只是添加到列表中（例如广告）...

【解决方案3】：

请记住，列表中的第一个（即顶部）是位于数组第一个位置的项目。如果是这种情况，您可以反转数组。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  List<int> Items = [5, 4, 3, 2, 1];

  void _incrementItems() {
    setState(() {
      Items = List.from([9, 8, 7, 6])..addAll(Items);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: ListView.builder(
      itemCount: Items.length,
      itemBuilder: (context, index) {
          return  Text(
"Item "+Items[index].toString());

      },
    ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementItems,
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

【讨论】：

问题是我的数据来自 Firestore 和 StreamBuilder 内部，不知道如何反转它。在 ListView 的 itembuilder 中以 DocumentSnapshot 的形式接收数据。

【解决方案4】：

StoreConnector<_ViewModel, List<Message>>(
      converter: (store) {
        // check mark ,reverse data list
        if (isReverse) return store.state.dialogList;
        return store.state.dialogList.reversed.toList();
      },
      builder: (context, dialogs) {
        // Add a callback when UI render after. then change it direction;
        WidgetsBinding.instance.addPostFrameCallback((t) {
          // check it's items could be scroll
          bool newMark = _listViewController.position.maxScrollExtent > 0;
          if (isReverse != newMark) { // need 
            isReverse = newMark;  // rebuild listview
            setState(() {});
          }
        });

        return ListView.builder(
          reverse: isReverse, // if it has less data, it will false now;
          controller: _listViewController,
          itemBuilder: (context, index) => _bubbleItem(context, dialogs[index], index),
          itemCount: dialogs.length,
        );
      },
    )

【讨论】：

【解决方案5】：

只需使用快照长度的反向索引创建一个变量，这是一个示例：

StreamBuilder(
      stream: Firestore.instance.collection('news').snapshots(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) return Text('Loading...');
        int reverseIndex = snapshot.data.documents.length;
        return ListView.builder(
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) {
              reverseIndex -=1;
              return _buildItems(context, snapshot.data.documents[reverseIndex]);
            });
      }),

【讨论】：