如何在頂部附加新的 ListView 項目

Question

我正在從StreamBuilder內的Cloud Firestore獲取ListView.builder()項目。 我希望將新項目添加到ListView的頂部。 我怎樣才能做到這一點？ 我嘗試了reverse : true ，雖然它反轉了ListView ，但是當只有 2/3 個項目時， ListView看起來很難看，因為ListView從底部開始，而屏幕的上部仍然是空的。

Answer 1

添加了shrinkWrap: true並將ListView放在一個Align小部件中，使用alignment: Alignment.topCenter並得到了我想要的結果！

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

Answer 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);

}

Answer 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.
    );
  }
}

Answer 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,
        );
      },
    )

Answer 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]);
            });
      }),