首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >具有cubit和Firebase API的无限滚动

具有cubit和Firebase API的无限滚动
EN

Stack Overflow用户
提问于 2022-07-07 13:51:41
回答 1查看 215关注 0票数 0

在我的应用程序中,用户可以创建新的任务并在主页中看到它们,但是现在我正在从Firebase一次获取所有的任务,我希望我可以使用无限滚动来完成这些任务。我在谷歌上搜索了如何做到这一点,但我真的搞不懂。

在我的API项目中,我有以下内容:

代码语言:javascript
复制
async getTasksByFilter(filters: Array<IFilter>): Promise<Array<ITask>> {
    let tasksUser: Array<ITask> = [];
    let collectionQuerry: Query<DocumentData> = this.db.collection(
        this.taskCollection,
    );
    let query = collectionQuerry;
    return new Promise((resolve, reject) => {
        filters.forEach(entry => {
            switch (entry.searchType) {
                case 'where':
                    query = query.where(
                        entry.field,
                        entry.condition as WhereFilterOp,
                        entry.value,
                    );
                    break;
                default:
                    break;
            }
        });
        query
            .orderBy('createdAt', 'asc')
            .get()
            .then(query => {
                if (query.docs.length > 0) {
                    query.docs.forEach(doc => {
                        let task: ITask = this.transformDate(doc.data());
                        tasksUser.push(task);
                    });
                }
                return resolve(tasksUser);
            })
            .catch(error => {
                return reject(error);
            });
    });
} 

在我的应用程序中,我使用这个函数来获取任务。

代码语言:javascript
复制
Future<List<Task>> getUserTasks(String _extension, Filter filters) async {
    final Response response =
    await client.post(Uri.parse("$BASE_URL$_extension"),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(filters.toJson()),
    );

    Iterable l = jsonDecode(response.body);
    List<Task> tasks = List<Task>.from(l.map((model) => Task.fromJson(model)));

    return tasks;
  }

因此,当任务页打开时,cubit将其状态更改为InitTaskListState,开始获取所有任务数据,并为用户显示加载旋转器。完成后,状态将更改为LoadedTaskListState,并显示任务列表。

这是我的密码:

代码语言:javascript
复制
BlocConsumer<TaskListCubit, TaskListState>(
              listenWhen: (previous, current) =>
              current is FatalErrorTaskListState,
              listener: (context, state) {
                if (state is FatalErrorTaskListState) {
                  showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        title: Text(state.title ?? 'Error'),
                        content: Text(state.message ?? 'Error'),
                        actions: <Widget>[
                          TextButton(
                            child: const Text('Ok'),
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                          ),
                        ],
                      );
                    },
                  );
                }
              },
              builder: (context, state) {
                if (state is InitTaskListState ||
                    state is LoadingTaskListState) {
                  return const ProgressView(message: 'Loading tasks');
                }
                if (state is LoadedTaskListState) {
                  final tasks = state.tasks;
                  return taskList(context, cubit, state, tasks);
                }
                return const Text('Unknown error');
              },
            )

  TabBarView taskList(BuildContext context, TaskListCubit cubit,
      LoadedTaskListState state, List<Task> tasks) {
    return TabBarView(
      physics: const NeverScrollableScrollPhysics(),
      children: List<Widget>.generate(
        cubit.tabNames.length,
        (int index) {
          if (index == state.tabIndex) {
            return Center(
              child: tasks.isEmpty
                  ? setEmptyListText(state.tabName)
                  : Column(
                      children: [
                        Expanded(
                          child: ListView.builder(
                            itemBuilder: (context, index) {
                              final task = tasks[index];
                              return TaskCard(
                                task,
                                state.tabName,
                                state.tabType,
                                cubit,
                                onClick: () {
                                  push(
                                    context,
                                    TaskDetailsContainer(task, state.tabType),
                                  );
                                },
                              );
                            },
                            itemCount: tasks.length,
                          ),
                        ),
                      ],
                    ),
            );
          } else {
            return const Text('');
          }
        },
      ),
    );
  }

有人能解释我如何在我的项目中实现无限滚动吗?

EN

回答 1

Stack Overflow用户

发布于 2022-07-13 07:53:32

我认为这将给你一个很好的想法,如何去做:https://medium.com/flutter-community/flutter-infinite-list-tutorial-with-flutter-bloc-2fc7a272ec67

您需要做的是,每次到达列表底部时,都会增加当前查询的限制,这可以通过firebase轻松完成。

在api调用中,您可以这样做:

代码语言:javascript
复制
firestore.collection("products").limit(_myLimit).get();

确保在您到达屏幕底部并相应地更改状态时更新您的限制。你的集团可以跟踪当前的限制,然后你只是增加它,当你向下滚动。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72899054

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档