Question

我正在尝试构建一个应用，该应用从ListView中的博客加载无尽的提要。在顶部，用户可以选择通过“类别”菜单根据特定类别过滤供稿。当用户点击“类别”菜单时，将出现另一个具有所有可用类别的ListView。当用户点击所需的类别时，该应用应返回到Feed ListView，仅显示该类别下的帖子。

预期结果：

应用调用API并检索10条最新帖子
随着用户滚动，接下来的10条帖子将通过连续的API调用进行检索
用户点击“类别”菜单，带类别的ListView打开。
用户点击所需的类别，应用返回到Feed Listview，创建一个API 调用以检索该类别的前10个帖子。
随着用户滚动，通过连续的API检索该类别的下10个帖子电话。

观察结果：

应用调用API并检索10条最新帖子
随着用户滚动，接下来的10条帖子将通过连续的API调用进行检索
用户点击“类别”菜单，带类别的ListView打开。
用户点击所需的类别，应用返回到Feed Listview，创建一个API 调用以检索该类别的前10个帖子。
所需类别的帖子将附加到ListView并仅在帖子之后显示之前已加载的。

我的问题：

我该如何修改状态或Bloc，以便获得所需的结果？

相关屏幕截图

我的结构：

PostBloc -我的bloc组件，其中包含Articles和ArticleCategory StreamBuilders的流定义。还包含用于进行API调用的方法获取文章和文章类别。

  class PostBloc extends Bloc<PostEvent, PostState> {
  final http.Client httpClient;
  int _currentPage = 1;
  int _limit = 10;
  int _totalResults = 0;
  int _numberOfPages = 0;

  int _categoryId;

  bool hasReachedMax = false;

  var cachedData = new Map<int, Article>();

  PostBloc({@required this.httpClient}) {

    //Listen to when user taps a category in the ArticleCategory ListView
    _articleCategoryController.stream.listen((articleCategory) {
      if (articleCategory.id != null) {
        _categoryId = articleCategory.id;

        _articlesSubject.add(UnmodifiableListView(null));

        _currentPage = 1;

        _fetchPosts(_currentPage, _limit, _categoryId)
            .then((articles) {
          _articlesSubject.add(UnmodifiableListView(articles));
        });
        _currentPage++;
        dispatch(Fetch());
      }
    });

    _currentPage++;
  }

  List<Article> _articles = <Article>[];

  // Category Sink for listening to the tapped category
  final _articleCategoryController = StreamController<ArticleCategory>();
  Sink<ArticleCategory> get getArticleCategory =>
      _articleCategoryController.sink;

  //Article subject for populating articles ListView
  Stream<UnmodifiableListView<Article>> get articles => _articlesSubject.stream;
  final _articlesSubject = BehaviorSubject<UnmodifiableListView<Article>>();

  //Categories subjet for the article categories
  Stream<UnmodifiableListView<ArticleCategory>> get categories => _categoriesSubject.stream;
  final _categoriesSubject = BehaviorSubject<UnmodifiableListView<ArticleCategory>>();


  void dispose() {
    _articleCategoryController.close();
  }

  @override
  Stream<PostState> transform(
    Stream<PostEvent> events,
    Stream<PostState> Function(PostEvent event) next,
  ) {
    return super.transform(
      (events as Observable<PostEvent>).debounceTime(
        Duration(milliseconds: 500),
      ),
      next,
    );
  }

  @override
  get initialState => PostUninitialized();

  @override
  Stream<PostState> mapEventToState(PostEvent event) async* {

    //This event is triggered when user taps on categories menu
    if (event is ShowCategory) {
      _currentPage = 1;
      await _fetchCategories(_currentPage, _limit).then((categories) {
        _categoriesSubject.add(UnmodifiableListView(categories));
      });
      yield PostCategories();
    }

    // This event is triggered when user taps on a category
    if(event is FilterCategory){
      yield PostLoaded(hasReachedMax: false);
    }

    // This event is triggered when app loads and when user scrolls to the bottom of articles
    if (event is Fetch && !_hasReachedMax(currentState)) {
      try {
        //First time the articles feed opens
        if (currentState is PostUninitialized) {
          _currentPage = 1;
          await _fetchPosts(_currentPage, _limit).then((articles) {
            _articlesSubject.add(UnmodifiableListView(articles)); //Send to stream
          });
          this.hasReachedMax = false;
          yield PostLoaded(hasReachedMax: false);
          _currentPage++;
          return;
        }

        //User scrolls to bottom of ListView
        if (currentState is PostLoaded) {
          await _fetchPosts(_currentPage, _limit, _categoryId)
              .then((articles) {
            _articlesSubject.add(UnmodifiableListView(articles));//Append to stream
          });
          _currentPage++;

          // Check if last page has been reached or not
          if(_currentPage > _numberOfPages){
            this.hasReachedMax = true;
          }
          else{
            this.hasReachedMax = false;
          }
          yield (_currentPage > _numberOfPages)
              ? (currentState as PostLoaded).copyWith(hasReachedMax: true)
              : PostLoaded(
                  hasReachedMax: false,
                );
        }
      } catch (e) {
        print(e.toString());
        yield PostError();
      }
    }
  }

  bool _hasReachedMax(PostState state) =>
      state is PostLoaded && this.hasReachedMax;

  Article _getArticle(int index) {
    if (cachedData.containsKey(index)) {
      Article data = cachedData[index];
      return data;
    }
    throw Exception("Article could not be fetched");
  }

  /**
   * Fetch all articles
   */
  Future<List<Article>> _fetchPosts(int startIndex, int limit,
      [int categoryId]) async {
    String query =
        'https://www.batatolandia.de/api/batatolandia/articles?page=$startIndex&limit=$limit';
    if (categoryId != null) {
      query += '&category_id=$categoryId';
    }

    final response = await httpClient.get(query);
    if (response.statusCode == 200) {
      final data = json.decode(response.body);

      ArticlePagination res = ArticlePagination.fromJson(data);

      _totalResults = res.totalResults;
      _numberOfPages = res.numberOfPages;

      for (int i = 0; i < res.data.length; i++) {
        _articles.add(res.data[i]);
      }

      return _articles;
    } else {
      throw Exception('error fetching posts');
    }
  }

/**
 * Fetch article categories
 */
  Future<List<ArticleCategory>> _fetchCategories(int startIndex, int limit,
      [int categoryId]) async {
    String query =
        'https://www.batatolandia.de/api/batatolandia/articles/categories?page=$startIndex&limit=$limit';

    final response = await httpClient.get(query);
    if (response.statusCode == 200) {
      final data = json.decode(response.body);

      ArticleCategoryPagination res = ArticleCategoryPagination.fromJson(data);

      _totalResults = res.totalResults;
      _numberOfPages = res.numberOfPages;

      List<ArticleCategory> categories = <ArticleCategory>[];
      categories.add(ArticleCategory(id: 0 , title: 'Todos', color: '#000000'));

      for (int i = 0; i < res.data.length; i++) {
        categories.add(res.data[i]);
      }

      return categories;
    } else {
      throw Exception('error fetching categories');
    }
  }
}

文章-包含一个BlocProvider来读取PostBloc中设置的当前状态并显示相应的视图。

class Articles extends StatelessWidget{

  PostBloc _postBloc;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
        builder: (context) =>
        PostBloc(httpClient: http.Client())..dispatch(Fetch()),
        child:  BlocBuilder<PostBloc, PostState>(
            builder: (context, state){

              _postBloc = BlocProvider.of<PostBloc>(context);

              // Displays circular progress indicator while posts are being retrieved
              if (state is PostUninitialized) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
              // Shows the feed Listview when API responds with the posts data
              if (state is PostLoaded) {
                return ArticlesList(postBloc:_postBloc );
              }
              // Shows the Article categories Listview when user clicks on menu
              if(state is PostCategories){
                return ArticlesCategoriesList(postBloc: _postBloc);
              }
              //Shows error if there are any problems while fetching posts
              if (state is PostError) {
                return Center(
                  child: Text('Failed to fetch posts'),
                );
              }
              return null;
            }
        )
    );
  }
}

ArticlesList -包含一个StreamBuilder，它从PostBloc读取文章数据并将其加载到提要ListView中。

class ArticlesList extends StatelessWidget {

  ScrollController _scrollController = new ScrollController();

  int currentPage = 1;
  int _limit = 10;
  int totalResults = 0;
  int numberOfPages = 0;

  final _scrollThreshold = 200.0;

  Completer<void> _refreshCompleter;

  PostBloc postBloc;
  ArticlesList({Key key, this.postBloc}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    _scrollController.addListener(_onScroll);
    _refreshCompleter = Completer<void>();

    return Scaffold(
      appBar: AppBar(
        title: Text("Posts"),
      ),
      body:  StreamBuilder<UnmodifiableListView<Article>>(
    stream: postBloc.articles,
        initialData: UnmodifiableListView<Article>([]),
        builder: (context, snapshot) {
          if(snapshot.hasData && snapshot != null) {
            if(snapshot.data.length > 0){
              return Column(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  ArticlesFilterBar(),
                  Expanded(
                    child: RefreshIndicator(
                      child: ListView.builder(
                        itemBuilder: (BuildContext context,
                            int index) {
                          return index >= snapshot.data.length
                              ? BottomLoader()
                              : ArticlesListItem(
                              article: snapshot.data.elementAt(
                                  index));
                        },
                        itemCount: postBloc.hasReachedMax
                            ? snapshot.data.length
                            : snapshot.data.length + 1,
                        controller: _scrollController,
                      ),
                      onRefresh: _refreshList,
                    ),
                  )
                ],
              );
            }
            else if (snapshot.data.length==0){
              return Center(
                child: CircularProgressIndicator(),
              );
            }

          }
          else{
            Text("Error!");
          }
          return CircularProgressIndicator();
        }
        )
    );
  }

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

  void _onScroll() {
    final maxScroll = _scrollController.position.maxScrollExtent;
    final currentScroll = _scrollController.position.pixels;
    if (maxScroll - currentScroll <= _scrollThreshold) {
      postBloc.dispatch(Fetch());
    }
  }

  Future<void> _refreshList() async {
    postBloc.dispatch(Fetch());
    return null;
  }
}

ArticlesCategoriesList -一个StreamBuilder，它从PostBloc中读取类别并加载到ListView中。

class ArticlesCategoriesList extends StatelessWidget {

  PostBloc postBloc;
  ArticlesCategoriesList({Key key, this.postBloc}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Categorias"),
        ),
        body:
        SafeArea(
            child: StreamBuilder<UnmodifiableListView<ArticleCategory>>(
          stream: postBloc.categories,
          initialData: UnmodifiableListView<ArticleCategory>([]),
      builder: (context, snapshot) {
        return ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              return new Container(
                  decoration: new BoxDecoration(
                    color: Colors.white,
                  ),
                  child: ListTile(
                    dense: true,
                    leading: Icon(Icons.fiber_manual_record,color: HexColor(snapshot.data[index].color)),
                    trailing: Icon(Icons.keyboard_arrow_right),
                    title: Text(snapshot.data[index].title),
                    onTap: () {
                      postBloc.getArticleCategory.add(snapshot.data[index]);
                    },
                  ));
            },
            separatorBuilder: (context, index) => Divider(
                  color: Color(0xff666666),
                  height: 1,
                ),
            itemCount: snapshot.data.length);
      },
    )));
  }
}

Answer 1

在这里，我在回答我自己的问题... 最后，只要检测到类别点击事件，就清除_articles列表，就可以使一切顺利运行。

这是新的PostBloc

class PostBloc extends Bloc<PostEvent, PostState> {
  final http.Client httpClient;
  int _currentPage = 1;
  int _limit = 10;
  int _totalResults = 0;
  int _numberOfPages = 0;

  int _categoryId;

  bool hasReachedMax = false;

  var cachedData = new Map<int, Article>();

  List<Article> _articles = <Article>[];


  PostBloc({@required this.httpClient}) {

    //Listen to when user taps a category in the ArticleCategory ListView
    _articleCategoryController.stream.listen((articleCategory) {
      if (articleCategory.id != null) {
        _categoryId = articleCategory.id;

        _currentPage = 1;
        _articles.clear();

        _fetchPosts(_currentPage, _limit, _categoryId)
            .then((articles) {
          _articlesSubject.add(UnmodifiableListView(articles));
        });
        _currentPage++;
        dispatch(FilterCategory());
      }
    });

  }



  // Category Sink for listening to the tapped category
  final _articleCategoryController = StreamController<ArticleCategory>();
  Sink<ArticleCategory> get getArticleCategory =>
      _articleCategoryController.sink;

  //Article subject for populating articles ListView
  Stream<UnmodifiableListView<Article>> get articles => _articlesSubject.stream;
  final _articlesSubject = BehaviorSubject<UnmodifiableListView<Article>>();

  //Categories subjet for the article categories
  Stream<UnmodifiableListView<ArticleCategory>> get categories => _categoriesSubject.stream;
  final _categoriesSubject = BehaviorSubject<UnmodifiableListView<ArticleCategory>>();


  void dispose() {
    _articleCategoryController.close();
  }

  @override
  Stream<PostState> transform(
    Stream<PostEvent> events,
    Stream<PostState> Function(PostEvent event) next,
  ) {
    return super.transform(
      (events as Observable<PostEvent>).debounceTime(
        Duration(milliseconds: 500),
      ),
      next,
    );
  }

  @override
  get initialState => PostUninitialized();

  @override
  Stream<PostState> mapEventToState(PostEvent event) async* {

    //This event is triggered when user taps on categories menu
    if (event is ShowCategory) {
      _currentPage = 1;
      await _fetchCategories(_currentPage, _limit).then((categories) {
        _categoriesSubject.add(UnmodifiableListView(categories));
      });
      yield PostCategories();
    }

    // This event is triggered when user taps on a category
    if(event is FilterCategory){
      yield PostLoaded(hasReachedMax: false);
    }

    // This event is triggered when app loads and when user scrolls to the bottom of articles
    if (event is Fetch && !_hasReachedMax(currentState)) {
      try {
        //First time the articles feed opens
        if (currentState is PostUninitialized) {
          _currentPage = 1;
          await _fetchPosts(_currentPage, _limit).then((articles) {
            _articlesSubject.add(UnmodifiableListView(articles)); //Send to stream
          });
          this.hasReachedMax = false;
          yield PostLoaded(hasReachedMax: false);
          _currentPage++;
          return;
        }

        //User scrolls to bottom of ListView
        if (currentState is PostLoaded) {
          await _fetchPosts(_currentPage, _limit, _categoryId)
              .then((articles) {
            _articlesSubject.add(UnmodifiableListView(_articles));//Append to stream
          });
          _currentPage++;

          // Check if last page has been reached or not
          if(_currentPage > _numberOfPages){
            this.hasReachedMax = true;
          }
          else{
            this.hasReachedMax = false;
          }
          yield (_currentPage > _numberOfPages)
              ? (currentState as PostLoaded).copyWith(hasReachedMax: true)
              : PostLoaded(
                  hasReachedMax: false,
                );
        }
      } catch (e) {
        print(e.toString());
        yield PostError();
      }
    }
  }

  bool _hasReachedMax(PostState state) =>
      state is PostLoaded && this.hasReachedMax;

  Article _getArticle(int index) {
    if (cachedData.containsKey(index)) {
      Article data = cachedData[index];
      return data;
    }
    throw Exception("Article could not be fetched");
  }

  /**
   * Fetch all articles
   */
  Future<List<Article>> _fetchPosts(int startIndex, int limit,
      [int categoryId]) async {
    String query =
        'https://www.batatolandia.de/api/batatolandia/articles?page=$startIndex&limit=$limit';
    if (categoryId != null) {
      query += '&category_id=$categoryId';
    }

    final response = await httpClient.get(query);
    if (response.statusCode == 200) {
      final data = json.decode(response.body);

      ArticlePagination res = ArticlePagination.fromJson(data);

      _totalResults = res.totalResults;
      _numberOfPages = res.numberOfPages;

      List<Article> posts = <Article>[];

      for (int i = 0; i < res.data.length; i++) {
        _articles.add(res.data[i]);
        posts.add(res.data[i]);
      }

      return posts;
    } else {
      throw Exception('error fetching posts');
    }
  }

/**
 * Fetch article categories
 */
  Future<List<ArticleCategory>> _fetchCategories(int startIndex, int limit,
      [int categoryId]) async {
    String query =
        'https://www.batatolandia.de/api/batatolandia/articles/categories?page=$startIndex&limit=$limit';

    final response = await httpClient.get(query);
    if (response.statusCode == 200) {
      final data = json.decode(response.body);

      ArticleCategoryPagination res = ArticleCategoryPagination.fromJson(data);

      _totalResults = res.totalResults;
      _numberOfPages = res.numberOfPages;

      List<ArticleCategory> categories = <ArticleCategory>[];
      categories.add(ArticleCategory(id: 0 , title: 'Todos', color: '#000000'));

      for (int i = 0; i < res.data.length; i++) {
        categories.add(res.data[i]);
      }

      return categories;
    } else {
      throw Exception('error fetching categories');
    }
  }
}

流数据更改时，Flutter StreamBuilder ListView无法重新加载

1 个答案: