Flutter Streambuilder 不斷重建

Question

我有一個流構建器在聽 Firestore，它有點工作。 主要問題是流構建器不斷重建（如果它不花費我額外的讀取，那么不用擔心，但如果它這樣做了，那么我假設它是一個問題）。 當主頁第一次構建時，當我轉到另一個頁面時，它會再次構建，當我彈回主頁時，它會第三次重建。

代碼：

class _RequestsListState extends State<RequestsList> with AutomaticKeepAliveClientMixin {
  final Map<String, List<Post>> posts = {};
  final List<String> postsUserIDs = [];

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);

    print('RequestsList');
    User cUser = InheritedUser.of(context).user;

    return StreamBuilder<List<Post>>(
        initialData: cUser.posts,
        stream: APIs().posts.auPostsStream(cUserID: cUser.userID),
        builder: (context, snap) {
          if (snap.hasError) {
            print('AUPostsList.dart StreamBuilder Error: ${snap.error}');
            return null;
          } else {

            print('POSTS LENGTH');
            print(snap.connectionState);
            print(cUser.posts.length);

            this.posts.clear();
            this.postsUserIDs.clear();

            snap.data.forEach((post) {
              if (this.posts[post.user.documentID] == null) {
                this.posts[post.user.documentID] = [post];
              } else {
                this.posts[post.user.documentID].add(post);
              }

              if (!this.postsUserIDs.contains(post.user.documentID)) {
                this.postsUserIDs.add(post.user.documentID);
              }
            });

            return ListView.separated(
                controller: widget.scrollController,
                physics: BouncingScrollPhysics(),
                shrinkWrap: true,
                padding: EdgeInsets.only(top: 0.0),
                itemBuilder: (context, index) => RequestItem(posts: this.posts[this.postsUserIDs[index]]),
                separatorBuilder: (context, index) => Container(),
                itemCount: this.postsUserIDs.length);
          }
        });
  }
}

其次，當我轉到第二頁時，數組被清空。 我沒有在任何地方清除它，所以我不確定為什么它在點擊一個項目后清空數組......

日志：

Reloaded 0 of 773 
libraries in 169ms.
flutter: ChatsList
flutter: RequestsList
flutter: POSTS LENGTH
flutter: ConnectionState.waiting
flutter: 1
flutter: RequestsList
flutter: POSTS LENGTH
flutter: ConnectionState.waiting
flutter: 0
flutter: ChatsList
flutter: RequestsList
flutter: POSTS LENGTH
flutter: ConnectionState.waiting
flutter: 0
flutter: ChatsList

Answer 1

每當流中發生任何更改或調用build方法時，都會觸發StreamBuilder。 因此，要解決此問題，請按如下所示更改代碼。

class _RequestsListState extends State<RequestsList> with AutomaticKeepAliveClientMixin {
  final Map<String, List<Post>> posts = {};
  final List<String> postsUserIDs = [];
  StreamController<QuerySnapshot> _postStreamController = StreamController<QuerySnapshot>();

  @override
  void initState() {
  super.initState();

  _buildPostStreams();
  }

  _buildPostStreams() async{
     _postStreamController.add(APIs().posts.auPostsStream(cUserID: cUser.userID));
  }

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);

    print('RequestsList');
    User cUser = InheritedUser.of(context).user;

    return StreamBuilder<List<Post>>(
        initialData: cUser.posts,
        stream: _postStreamController.stream,
        builder: (context, snap) {
          if (snap.hasError) {
            print('AUPostsList.dart StreamBuilder Error: ${snap.error}');
            return null;
          } else {

            print('POSTS LENGTH');
            print(snap.connectionState);
            print(cUser.posts.length);

            this.posts.clear();
            this.postsUserIDs.clear();

            snap.data.forEach((post) {
              if (this.posts[post.user.documentID] == null) {
                this.posts[post.user.documentID] = [post];
              } else {
                this.posts[post.user.documentID].add(post);
              }

              if (!this.postsUserIDs.contains(post.user.documentID)) {
                this.postsUserIDs.add(post.user.documentID);
              }
            });

            return ListView.separated(
                controller: widget.scrollController,
                physics: BouncingScrollPhysics(),
                shrinkWrap: true,
                padding: EdgeInsets.only(top: 0.0),
                itemBuilder: (context, index) => RequestItem(posts: this.posts[this.postsUserIDs[index]]),
                separatorBuilder: (context, index) => Container(),
                itemCount: this.postsUserIDs.length);
          }
        });
  }
}

我希望這能幫到您。

Answer 2

我知道這已經很晚了，但是使用您的 init 方法或使用提供程序在服務文件中進行調用將流移到構建上下文之外是我進行設置的方式。 如果你來對了，請告訴我。

Answer 3

您的假設是正確的...因為 StreamBuilder 在您的 Build 方法中，每次實例化小部件時它都會從 Firestore 讀取。

所以在這種情況下，使用AutomaticKeepAliveClientMixin來保持 Widget 狀態並沒有幫助。

Wesley 是對的——你應該使用 init 方法來創建你的流——這樣流只被調用一次。 查看此答案以獲取更多信息