在我的应用程序中,用户可以创建新的任务并在主页中看到它们,但是现在我正在从Firebase一次获取所有的任务,我希望我可以使用无限滚动来完成这些任务。我在谷歌上搜索了如何做到这一点,但我真的搞不懂。
在我的API项目中,我有以下内容:
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);
});
});
} 在我的应用程序中,我使用这个函数来获取任务。
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,并显示任务列表。
这是我的密码:
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('');
}
},
),
);
}有人能解释我如何在我的项目中实现无限滚动吗?
发布于 2022-07-13 07:53:32
我认为这将给你一个很好的想法,如何去做:https://medium.com/flutter-community/flutter-infinite-list-tutorial-with-flutter-bloc-2fc7a272ec67
您需要做的是,每次到达列表底部时,都会增加当前查询的限制,这可以通过firebase轻松完成。
在api调用中,您可以这样做:
firestore.collection("products").limit(_myLimit).get();确保在您到达屏幕底部并相应地更改状态时更新您的限制。你的集团可以跟踪当前的限制,然后你只是增加它,当你向下滚动。
https://stackoverflow.com/questions/72899054
复制相似问题