如何使用Flutter Bloc模式通过分页加载数据列表?

时间:2019-08-02 05:30:54

标签: flutter flutter-dependencies bloc

我在我的应用程序中使用flutter_bloc并引用了此sample。现在,当我运行我的应用程序时,它给我一个错误,说:

  

flutter:类型'MovieUninitialized'不是类型的子类型   类型为“ MovieLoaded”

我的集团包含三个文件:movie_state,movie_event和movie_bloc

movie_state.dart

import 'package:equatable/equatable.dart';
import 'package:movie_project/models/movie.dart';

abstract class MovieState extends Equatable {
  MovieState([List props = const []]) : super(props);
}

class MovieUninitialized extends MovieState {
  @override
  String toString() => 'MovieUninitialized';
}

class MovieError extends MovieState {
  @override
  String toString() => 'MovieError';
}

class MovieLoaded extends MovieState {
  final List<Movie> movies;
  final bool hasReachedMax;
  // Keeps track of the page to fetch the latest movies from the api
  final latestMoviesPage;

  MovieLoaded({
    this.movies,
    this.hasReachedMax,
    this.latestMoviesPage,
  }) : super([movies, hasReachedMax, latestMoviesPage]);

  MovieLoaded copyWith({
    List<Movie> movies,
    bool hasReachedMax,
    int latestMoviesPage,
  }) {
    return MovieLoaded(
      movies: movies ?? this.movies,
      hasReachedMax: hasReachedMax ?? this.hasReachedMax,
      latestMoviesPage: this.latestMoviesPage,
    );
  }

  @override
  String toString() =>
      'PostLoaded { posts: ${movies.length}, hasReachedMax: $hasReachedMax }';
}

movie_event.dart

import 'package:equatable/equatable.dart';

abstract class MovieEvent extends Equatable {}

class Fetch extends MovieEvent {
  @override
  String toString() => 'Fetch';
}

movie_bloc.dart

class MovieBloc extends Bloc<MovieEvent, MovieState> {
  final MovieRepository movieRepository;

  MovieBloc({@required this.movieRepository});

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

  @override
  MovieState get initialState => MovieUninitialized();

  @override
  Stream<MovieState> mapEventToState(MovieEvent event) async* {
    if (event is Fetch && !_hasReachedMax(currentState)) {
      try {
        if (currentState is MovieUninitialized) {
          final movies = await movieRepository.fetchMovies(1);
          yield MovieLoaded(
            movies: movies,
            hasReachedMax: false,
            latestMoviesPage:
                (currentState as MovieLoaded).latestMoviesPage + 1,
          );
          return;
        }
        if (currentState is MovieLoaded) {
          final movies = await movieRepository
              .fetchMovies((currentState as MovieLoaded).latestMoviesPage);
          yield movies.isEmpty
              ? (currentState as MovieLoaded).copyWith(hasReachedMax: true)
              : MovieLoaded(
                  movies: (currentState as MovieLoaded).movies + movies,
                  hasReachedMax: false,
                  latestMoviesPage:
                      (currentState as MovieLoaded).latestMoviesPage + 1,
                );
        }
      } catch (_) {
        print(_);
        yield MovieError();
      }
    }
  }

  bool _hasReachedMax(MovieState state) =>
      state is MovieLoaded && state.hasReachedMax;
}

我需要增加LatestMoviesPage直到达到最大限制。如果我从集团代码中删除了latestMoviesPage,问题会得到解决,但我真的需要它来加载更多页面。

1 个答案:

答案 0 :(得分:1)

代替

latestMoviesPage: (currentState as MovieLoaded).latestMoviesPage + 1,

我需要写:

latestMoviesPage: 2,