在flutter中如何用列表视图在旧数据表的末尾显示和加载新数据表?

iklwldmw  于 2023-03-19  发布在  Flutter
关注(0)|答案(2)|浏览(154)

在我的项目。有一个列表视图显示数据,来自API与分页。
我使用SmartRefresher进行API分页,并在其中使用ListView.builder()显示数据列表视图。这是我的问题。当我使用SmartRefresher(例如:skipCount是10)。那么ListView.builder()只显示新的新鲜数据和旧的数据Map消失。什么是想要和期望的是当加载新数据,新的新鲜数据将显示在旁边的旧数据列表。(像在社交媒体)。我该怎么做?

这是SmartRefresher()的代码实现。

return SmartRefresher(
      enablePullDown: true,
      enablePullUp: true,
      controller: _refreshController,
      header: const WaterDropHeader(),
      footer: CustomFooter(
        builder: (context, LoadStatus? mode) {
          Widget body;
          if (mode == LoadStatus.idle) {
            body = Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(
                  Icons.arrow_downward_rounded,
                  size: 15,
                ),
              ],
            );
          } else if (mode == LoadStatus.loading) {
            body = const CircularProgressIndicator();
          } else if (mode == LoadStatus.failed) {
            body = const Text("Load Failed!Click retry!");
          } else if (mode == LoadStatus.canLoading) {
            body = Row(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Icon(
                  Icons.arrow_downward,
                  color: Colors.grey,
                ),
                SizedBox(
                  width: 8.0,
                ),
                Text("Load more..."),
              ],
            );
          } else {
            body = const Text("No more Data");
          }
          return SizedBox(
            height: 55.0,
            child: Center(child: body),
          );
        },
      ),
      onRefresh: () {
        widget.notificationBloc.skipCount = 0;
        _refreshController.resetNoData();
        widget.notificationBloc
            .getNotificationList()
            .then((value) => _refreshController.refreshCompleted());
      },
      onLoading: () {
        widget.notificationBloc.skipCount += widget.notificationBloc.limitCount;
        if (widget.notificationBloc.notificationListModel!.total <=
            widget.notificationBloc.skipCount) {
          _refreshController.loadNoData();
        } else {
          widget.notificationBloc
              .getNotificationList(
                  skip: widget.notificationBloc.skipCount,
                  fetchLimitCount: widget.notificationBloc.limitCount)
              .then((value) => _refreshController.loadComplete());
        }
      },
      child: ListView.builder(...),
);

这是我使用分页获取数据列表的代码实现。

final _notificationListController = PublishSubject<MessageState>();

Stream<MessageState> get notificationListStream => _notificationListController.stream;

int skipCount = 0;
int limitCount = 20;

getNotificationList({int skip = 0, int fetchLimitCount = 20}) async {
    try {
      await _notificationRepository
          .getNotificationList(
              notificationListEndPoint: END_POINT_NOTIFICATION_LIST,
              startingNumber: skip,
              fetchCount: fetchLimitCount)
          .then(
        (responseValue) {
          _notificationListController.sink.add(MessageState.loading);
          if (responseValue?.messageState == MessageState.data) {
            notificationListModel = responseValue!.data;
            notificationListData = notificationListModel?.data ?? [];
            _notificationListController.sink.add(MessageState.data);
          } else if (responseValue?.messageState == MessageState.requestError) {
            errorHandlingModel = responseValue?.data;
            _notificationListController.sink.add(MessageState.requestError);
          } else if (responseValue?.messageState == MessageState.serverError) {
            _notificationListController.sink.add(MessageState.serverError);
          }
        },
      );
    } catch (e) {
      errorMessage = e.toString();
      _notificationListController.sink.add(MessageState.exception);
    }
  }
yr9zkbsy

yr9zkbsy1#

我已经实现了相同的依赖关系,但它的工作很好,可能是一些方法或步骤,你错过了。我会分享我的Git代码,请检查分页和刷卡刷新都实现了使用Getx。
相关性:拉入到刷新:^2.0.0或最新版本
分页和SwipeRefresh示例:https://github.com/SharmaJatin1997/SwipeRefreshAndPagination
希望对你有帮助。

kpbwa7wx

kpbwa7wx2#

我发现我需要做的是在BLOC逻辑运算中我需要从notificationListData = notificationListModel?.data ?? [];更改为notificationListData.addAll(notificationListModel?.data ?? []);。因为我意识到我想显示新取数据将添加到同一列表中的旧数据中。

相关问题