Бесконечная прокрутка Flutter всегда сбрасывает вид - PullRequest
Новая
       12

Бесконечная прокрутка Flutter всегда сбрасывает вид

1 голос
/ 03 августа 2020

У меня есть простая бесконечная прокрутка, которая загружает элементы из API. Мое ожидание после загрузки дополнительных элементов, список, если он будет обновлен новыми элементами и мой порт просмотра, не будет сброшен.

Вот моя страница 

class ArticleListPage extends StatelessWidget {
  final _scrollController = ScrollController();
  final Color color = Colors.black;
  ArticleListBloc _articleListBloc;

  @override
  Widget build(BuildContext context) {
    _articleListBloc = BlocProvider.of<ArticleListBloc>(context);
    return Scaffold(
      backgroundColor: color,
      body: BlocBuilder<ArticleListBloc, ArticleListState>(
        builder: (context, ArticleListState state) {
          if (state.searching) {
            return Center(
              child: CircularProgressIndicator(
                backgroundColor: Colors.white,
              ),
            );
          } else {
            return NotificationListener<ScrollNotification>(
              onNotification: _handleScrollNotification,
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: calculateListItemCount(state),
                controller: _scrollController,
                physics: AlwaysScrollableScrollPhysics(),
                itemBuilder: (context, index) {
                  return index >= state.listItems.length
                      ? Center(
                          child: CircularProgressIndicator(),
                        )
                      : ArticleListViewItem(article: state.listItems[index]);
                },
              ),
            );
          }
        },
      ),
    );
  }

  bool _handleScrollNotification(ScrollNotification notification) {
    if (notification is ScrollEndNotification &&
        _scrollController.position.extentAfter == 0) {
      _articleListBloc.add(GetArticles());
    }
    return false;
  }

  int calculateListItemCount(ArticleListState state) {
    if (state.hasReachedEndOfResults) {
      return state.listItems.length;
    } else {
      return state.listItems.length + 1;
    }
  }
}

И мой blo c

class ArticleListBloc extends Bloc<ArticleListEvent, ArticleListState> {
  final ArticleDataSource dataSource;

  ArticleListBloc(this.dataSource) : super(ArticleListState.initial());

  @override
  Stream<ArticleListState> mapEventToState(ArticleListEvent event) async* {
    String searchKeyword = state.searchKeyword;
    int pageNumber = state.pageNumber;
    bool hasReachEndResult = state.hasReachedEndOfResults;
    BuiltList<Article> currentArticles = state.listItems;
    if (event is SetKeyword) {
      searchKeyword = event.keyword;
      pageNumber = 0;
      currentArticles = new BuiltList<Article>();
      hasReachEndResult = false;
    }
    if (!hasReachEndResult) {
      yield state.rebuild((b) => b..searching = true);
      final articles = await dataSource.getArticles(pageNumber, searchKeyword);
      if (articles.isEmpty) {
        hasReachEndResult = true;
      } else {
        hasReachEndResult = false;
      }
      yield ArticleListState.success(currentArticles + articles, pageNumber + 1,
          searchKeyword, hasReachEndResult);
    }
  }
}

Каким-то образом после поиска (загрузить больше) я вижу, что первый элемент снова перерисовывается, и мне приходится снова прокручивать вниз, несмотря на то, что элементы правильно добавлены в список.

Могу ли я нужна какая-то переменная skip для go первого добавленного элемента? Что еще мне здесь не хватает?

1 Ответ

0 голосов
/ 04 августа 2020

Проблема была с первым условием if в функции виджета сборки. Это должно быть 

         if (state.listItems.isEmpty) {
            return Center(
              child: CircularProgressIndicator(
                backgroundColor: Colors.white,
              ),
            );
          }

Таким образом, CircularProgressIndicator будет отображаться только во время первого поиска, в то время как последующие поиски и их ход уже обрабатываются индикатором в 

                itemBuilder: (context, index) {
                  return index >= state.listItems.length
                      ? Center(
                          child: CircularProgressIndicator(),
                        )
                      : ArticleListViewItem(article: state.listItems[index]);
                },
...