使用 Firebase 实时数据库在 Flutter 中进行分页

Question

我正在尝试使用 firebase 实时数据库在 Flutter 中进行分页。我已经在 Firestore 中尝试过了，它在那里工作得很好，但我希望它与实时数据库一起使用。

我第一次像这样获取数据。

 Widget buildListMessage() {
    return Flexible(
      child: StreamBuilder(
        stream: _firebase.firebaseDB
            .reference()
            .child("chats")
            .child("nsbcalculator")
            .orderByChild('timestamp')
            .limitToFirst(15)
            .onValue,
        builder: (context, AsyncSnapshot<Event> snapshot) {
          if (!snapshot.hasData) {
            return Center(
                child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(themeColor)));
          } else {

            if (snapshot.data.snapshot.value != null) {

                listMessage = Map.from(snapshot.data.snapshot.value)
                    .values
                    .toList()
                      ..sort(
                          (a, b) => a['timestamp'].compareTo(b['timestamp']));

              if (lastVisible == null) {
                lastVisible = listMessage.last;
                listMessage.removeLast();
              }
            }

            return ListView.builder(
              ...
            );
          }
        },
      ),
    );
  }

之后，为了分页，我使用带有 ScrollController 的侦听器

  void _scrollListener() async {
    if (listScrollController.position.pixels ==
        listScrollController.position.maxScrollExtent) {
      _fetchMore();
    }
  }

最后

  _fetchMore() {
    _firebase.firebaseDB
        .reference()
        .child("chats")
        .child("nsbcalculator")
        .orderByChild('timestamp')
        .startAt(lastVisible['timestamp'])
        .limitToFirst(5)
        .once()
        .then((snapshot) {

      List snapList = Map.from(snapshot.value).values.toList()
        ..sort((a, b) => a['timestamp'].compareTo(b['timestamp']));


      if (snapList.isNotEmpty) {
        print(snapList.length.toString());

        if (!noMore) {

          listMessage.removeLast();

          //Problem is here.....??
          setState(() {
            listMessage..addAll(snapList);
          });

          lastVisible = snapList.last;

          print(lastVisible['content']);
        }

        if (snapList.length < 5) {
          noMore = true;
        }
      }
    });
  }

它作为实时通信工作正常，但是当我尝试在 _fetchMore() 中分页时，会调用 setState，但它会刷新整个小部件的状态并再次重新启动 StreamBuilder，并且所有数据仅被新查询替换。我怎样才能防止这个？

Answer 1

尝试这一
实时列表分页

class FireStoreRepository {
  final CollectionReference _chatCollectionReference =
      Firestore.instance.collection('Chat');

  final StreamController<List<ChatModel>> _chatController =
      StreamController<List<ChatModel>>.broadcast();

  List<List<ChatModel>> _allPagedResults = List<List<ChatModel>>();

  static const int chatLimit = 10;
  DocumentSnapshot _lastDocument;
  bool _hasMoreData = true;

  Stream listenToChatsRealTime() {
    _requestChats();
    return _chatController.stream;
  }

  void _requestChats() {
    var pagechatQuery = _chatCollectionReference
        .orderBy('timestamp', descending: true)
        .limit(chatLimit);

    if (_lastDocument != null) {
      pagechatQuery =
          pagechatQuery.startAfterDocument(_lastDocument);
    }

    if (!_hasMoreData) return;

    var currentRequestIndex = _allPagedResults.length;

    pagechatQuery.snapshots().listen(
      (snapshot) {
        if (snapshot.documents.isNotEmpty) {
          var generalChats = snapshot.documents
              .map((snapshot) => ChatModel.fromMap(snapshot.data))
              .toList();

          var pageExists = currentRequestIndex < _allPagedResults.length;

          if (pageExists) {
            _allPagedResults[currentRequestIndex] = generalChats;
          } else {
            _allPagedResults.add(generalChats);
          }

          var allChats = _allPagedResults.fold<List<ChatModel>>(
              List<ChatModel>(),
              (initialValue, pageItems) => initialValue..addAll(pageItems));

          _chatController.add(allChats);

          if (currentRequestIndex == _allPagedResults.length - 1) {
            _lastDocument = snapshot.documents.last;
          }

          _hasMoreData = generalChats.length == chatLimit;
        }
      },
    );
  }

  void requestMoreData() => _requestChats();
}

聊天列表视图

class ChatView extends StatefulWidget {
  ChatView({Key key}) : super(key: key);

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

class _ChatViewState extends State<ChatView> {

FireStoreRepository _fireStoreRepository;
final ScrollController _listScrollController = new ScrollController();

@override
  void initState() {
    super.initState();
    _fireStoreRepository = FireStoreRepository();
    _listScrollController.addListener(_scrollListener);
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Flexible(
        child: StreamBuilder<List<ChatModel>>(
          stream: _fireStoreRepository.listenToChatsRealTime(),
          builder: (context, snapshot) {
             return ListView.builder(
              itemCount: snapshot.data.length,
              controller: _listScrollController,
              shrinkWrap: true,
              reverse: true,
              itemBuilder: (context, index) {
                ...
              }
            );
          }
        )
      ),
    );
  }

  void _scrollListener() {
    if (_listScrollController.offset >=
            _listScrollController.position.maxScrollExtent &&
        !_listScrollController.position.outOfRange) {
      _fireStoreRepository.requestMoreData();
    }
  }

}

聊天模型类

class ChatModel {
  final String userID;
  final String message;
  final DateTime timeStamp;

  ChatModel({this.userID, this.message, this.timeStamp});

  //send 
  Map<String, dynamic> toMap() {
    return {
      'userid': userID,
      'message': message,
      'timestamp': timeStamp,
    };
  }

  //fetch
  static ChatModel fromMap(Map<String, dynamic> map) {
    if (map == null) return null;

    return ChatModel(
      userID: map['userid'],
      message: map['message'],
      timeStamp: DateTime.fromMicrosecondsSinceEpoch(map['timestamp'] * 1000),
    );
  }
}

Answer 2

调用setState将重绘您的整个小部件和列表视图。现在，由于您提供了提供第一页的 steam，因此在重绘后它只会加载它。为了避免这种情况，您可以使用自己的流并向其提供新内容。然后您StreamBuilder将自动处理更新。

您需要将项目的完整列表存储为单独的变量，更新它，然后沉入您的流。

final _list = List<Event>();
final _listController = StreamController<List<Event>>.broadcast();
Stream<List<Event>> get listStream => _listController.stream;

@override
void initState() {
  super.initState();
  // Here you need to load your first page and then add to your stream
  ...
  _list.addAll(firstPageItems);
  _listController.sink.add(_list);
}

@override
void dispose() {
  super.dispose();
}

Widget buildListMessage() {
    return Flexible(
      child: StreamBuilder(
        stream: listStream
        ...
}

_fetchMore() {
  ...
  // Do your fetch and then just add items to the stream
  _list.addAll(snapList);
  _listController.sink.add(_list);
  ...
}