Flutter 从 Api 延迟加载

Question

我有延迟加载的问题。 我尝试了可能的方法和包，例如 LazyLoadingScollview（此处的示例）、Pagewise 等。问题是什么（可能很容易解决）。

我有 50 个事件的列表，我想一次只显示 10 个，而不是在到达列表底部时添加更多（例如另外 10 个）。 （我无法将限制从 50 更改为 10 并稍后更改，因为它正在刷新整个屏幕 - 需要一次获取所有内容）。

更清楚一点 - 需要动态更新计数值。

class DiscountTab extends DiscountsBaseTab {
  @override
  _DiscountTabState createState() => _DiscountTabState();
}

class _DiscountTabState extends DiscountsBaseTabState
    with SnackBarMixin, TitleDescriptionTextMixin {
  DiscountsBloc bloc;
  PermissionStatus permissionStatus;
  bool isError = false;

  @override
  void initState() {
    super.initState();
    bloc = DiscountsBloc(
        DiscountsState.notProcessing(activeTab: DiscountsTabs.discount));
    _onRefresh();
    bloc.errors.listen((error) {
      showSnackBarTextWithContext(context: context, text: error.message);
      if (error.message ==
          "Connection error, try again later")
        isError = true;
    });
  }

  void _onRefresh() => bloc.emitEvent(DiscountsListEventFetch(limit: 50)); //Here I'm fetching events



  @override
  Widget buildBody(BuildContext context) {
    return StreamBuilder<List<DiscountsModel>>(
        stream: bloc.dataField.stream,
        builder: (BuildContext context,
            AsyncSnapshot<List<DiscountsModel>> snapshot) {
          if (!snapshot.hasData) {
            return Container();
          }
          return RefreshIndicator(
              onRefresh: () {
                _onRefresh();
                isError = false;
                return Future.sync(() {
                  return;
                });
              },
              color: LegionColors.primaryRedHigh,
              child: buildView(context, snapshot.data));
        });
  }

  buildView(BuildContext context, List<DiscountsModel> list) {
    int count = 10;

    return LazyLoadScrollView(
      onEndOfPage: () => print('End of page'),
      child: ListView.builder(
          shrinkWrap: true,
          itemCount: count + 1,
          itemBuilder: (BuildContext context, int index) {
            if (index == list.length) {
              return Padding(
                padding: const EdgeInsets.all(10.0),
                child: Center(
                    child: SizedBox(
                        width: 20.0,
                        height: 20.0,
                        child: CircularProgressIndicator())),
              );
            }
            return DiscountsWidget(model: list[index]);
          }),
    );
  }
}

Answer 1

当我使用常规 ScrollController 时，从此刻开始一切正常。 我的意思是当我到达底部时我的打印语句有效，但是我不能在 loadMore 中使用循环。

class DiscountTab extends DiscountsBaseTab {
  @override
  _DiscountTabState createState() => _DiscountTabState();
}

class _DiscountTabState extends DiscountsBaseTabState
    with SnackBarMixin, TitleDescriptionTextMixin {
  DiscountsBloc bloc;
  PermissionStatus permissionStatus;
  bool isError = false;

  int count = 10;
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    bloc = DiscountsBloc(
        DiscountsState.notProcessing(activeTab: DiscountsTabs.discount));
    _onRefresh();
    bloc.errors.listen((error) {
      showSnackBarTextWithContext(context: context, text: error.message);
      if (error.message ==
          "Connection error")
        isError = true;
    });
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        _loadMore();
      }
    });
  }

 _loadMore() {
    print('End of page');
    for (int i = count; i < count + 10; i++) {
      //here i should add items but:
      // 1. i have it fetched already (all 50)
      // 2. cannot use list.add here because it's undefined
    }
  }

  void _onRefresh() => bloc.emitEvent(DiscountsListEventFetch(limit: 50));

  @override
  Widget buildBody(BuildContext context) {
    return StreamBuilder<List<DiscountsModel>>(
        stream: bloc.dataField.stream,
        builder: (BuildContext context,
            AsyncSnapshot<List<DiscountsModel>> snapshot) {
          if (!snapshot.hasData) {
            return Container();
          }
          return RefreshIndicator(
              onRefresh: () {
                _onRefresh();
                isError = false;
                return Future.sync(() {
                  return;
                });
              },
              color: LegionColors.primaryRedHigh,
              child: buildView(context, snapshot.data));
        });
  }

  buildView(BuildContext context, List<DiscountsModel> list) {
    return ListView.builder(
        shrinkWrap: true,
        controller: _scrollController,
        itemCount: count,
        itemBuilder: (BuildContext context, int index) {
          // if (index == list.length) {
          //   return Padding(
          //     padding: const EdgeInsets.all(10.0),
          //     child: Center(
          //         child: SizedBox(
          //             width: 20.0,
          //             height: 20.0,
          //             child: CircularProgressIndicator())),
          //   );
          // }
          return DiscountsWidget(model: list[index]);
        });
  }

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