如何使用 Flutter 从 Firestore 中使用 ListView 获得无限滚动

2024-01-08

我正在 Flutter 中使用 Firestore 和 ListView。 对于列表中的某些项目,每个项目都可以正常工作,但是当我向下滚动超出所见限制时,我收到许多消息:“该方法在 null 上被调用”。 似乎 ListView.builder 没有正确处理来自 Firebase 或类似内容的所有日期请求。

这是代码:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:father_home_flutter/screen_audio_selected.dart';
import 'package:father_home_flutter/model/utils.dart';

class AudioScreenList extends StatelessWidget {
  static const String _collectionRussian = 'speech-ru';
  static const String _loadingTextRussian = 'Loading...';
  static const String _speechTitle = 'speechTitle';
  static const String _speechSubtitle = 'speechSubtitle';
  static const String _audioLink = 'audioLink';
  static const String _pastorCode = 'pastorCode';
  static const String _pastorName = 'pastorName';
  static const String _id = "id";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: StreamBuilder(
            stream: Firestore.instance
                .collection(_collectionRussian)
                .limit(100)
                .orderBy(_id, descending: true)
                .snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData)
                return const Center(
                    child: Text(
                  _loadingTextRussian,
                  style: TextStyle(fontSize: 25.0, color: Colors.grey),
                ));
              return ListView.builder(
                itemCount: snapshot.data.documents.length,
                itemBuilder: (BuildContext context, int i) =>
                    _buildRow(context, snapshot.data.documents[i]),
              );
            }));
  }

  Widget _buildRow(BuildContext context, DocumentSnapshot document) {
    return Container(
        margin: const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 0.0),
        height: 90.0,
        child: ListTile(
            leading: Padding(
                padding: EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 0.0),
                child: Hero(
                    tag: document[_audioLink],
                    child: new ClipOval(
                        child: Container(
                      width: 70.0,
                      height: 70.0,
                      child: Image.asset(
                        Utils.getImagePastor(document[_pastorCode]),
                        fit: BoxFit.cover,
                      ),
                    )))),
            title: Text(document[_speechTitle]),
            subtitle:
                Text(document[_speechSubtitle] + " - " + document[_pastorName]),
            onTap: () => onPressed(context, document[_speechTitle],
                document[_pastorCode], document[_audioLink])));
  }

  onPressed(BuildContext context, String speechTitle, String pastorCode,
      String audioLink) {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) =>
                ScreenAudioSelected(speechTitle, pastorCode, audioLink)));
  }
}

这是模拟器上的问题:

我在网上寻找如何处理它的方法,但我只是找到了模拟服务器请求的示例,如下例所示https://flutter-academy.com/flutter-listview-infinite-scrolling/ https://flutter-academy.com/flutter-listview-infinite-scrolling/

有人遇到过同样的问题或知道如何解决它吗?


好的,在网上查看后,我找到了解决此问题的方法,感谢这个link https://stackoverflow.com/questions/46611369/get-all-from-a-firestore-collection-in-flutter

如果有人需要,我在这里写完整的代码:

    class AudioScreenList extends StatefulWidget {
  @override
  _AudioScreenListState createState() => _AudioScreenListState();
}

class _AudioScreenListState extends State<AudioScreenList> {
  bool isPerformingRequest = false;

  static const String _collectionRussian = 'speech-ru';
  static const String _loadingTextRussian = 'Loading...';
  static const String _speechTitle = 'speechTitle';
  static const String _speechSubtitle = 'speechSubtitle';
  static const String _audioLink = 'audioLink';
  static const String _pastorCode = 'pastorCode';
  static const String _pastorName = 'pastorName';
  static const String _id = "id";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: StreamBuilder(
            stream: Firestore.instance
                .collection(_collectionRussian)
                .orderBy(_id, descending: true)
                .snapshots(),
            builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
              if (!snapshot.hasData)
                return const Center(
                    child: Text(
                  _loadingTextRussian,
                  style: TextStyle(fontSize: 25.0, color: Colors.grey),
                ));
              return ListView(children: getExpenseItems(snapshot));
            }));
  }

  getExpenseItems(AsyncSnapshot<QuerySnapshot> snapshot) {
    return snapshot.data.documents
        .map((doc) => new Container(
            margin: const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 0.0),
            child: ListTile(
                leading: Padding(
                    padding: EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 0.0),
                    child: Hero(
                        tag: doc[_audioLink],
                        child: new ClipOval(
                            child: Container(
                          width: 70.0,
                          height: 70.0,
                          child: Image.asset(
                            Utils.getImagePastor(doc[_pastorCode]),
                            fit: BoxFit.cover,
                          ),
                        )))),
                title: new Text(doc[_speechTitle]),
                subtitle: new Text(doc[_speechSubtitle].toString() +
                    " - " +
                    doc[_pastorName].toString()),
                onTap: () => onPressed(context, doc[_speechTitle],
                    doc[_pastorCode], doc[_audioLink]))))
        .toList();
  }

  onPressed(BuildContext context, String speechTitle, String pastorCode,
      String audioLink) {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) =>
                ScreenAudioSelected(speechTitle, pastorCode, audioLink)));
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Flutter 从 Firestore 中使用 ListView 获得无限滚动 的相关文章

随机推荐

  • 设置 CSS 列中第一项的样式

    我有一个显示在多列上的列表 每个列表项都是块元素 display block 并附加了一些样式 底部有 1px 边框 目前看起来是这样的 List item List item List item List item List item L
  • 如何以编程方式确定蓝牙主/从角色?

    因此 在蓝牙微微网中 有一个主设备和最多七个从设备 主设备设置从设备同步的时钟和跳频 但有没有办法确定哪个设备是主设备 哪个设备是从设备呢 我主要对便携式设备 Android iPhone 感兴趣 但乞丐不能是选择者 如果有人有这个领域的信
  • 将 cmd 错误捕获到当前目录中的文件中?

    我有一个 PowerShell 脚本 可以重新启动文件中列出的服务器 foreach server in servers try cmd c shutdown exe r f m server t 0 d p 0 0 c PlannedRe
  • 模糊屏幕截图中的矩形

    我正在开发一个使用背景的 Android 应用程序Service以编程方式捕获当前屏幕上的任何内容的屏幕截图 我获得的屏幕截图是Bitmap 接下来我成功导入了OpenCV https docs opencv org 2 4 doc tut
  • 如何为 Laravel Fortify + Inertia + vue 添加角色和权限?

    我的项目使用 laravel fortify 惯性与 vue 我必须添加基于角色的权限 就像 spatie 权限包一样 我对于强化和惯性还是一个初学者 但我有 spatie 包的经验 我对如何添加角色和权限进行强化感到困惑 目前我计划创建像
  • 在 WordPress(或 .htaccess)中创建 URL 别名

    我有一个在 Wordpress 上运行的网站 我想创建一个自定义短网址 如果页面 URL 是 www mysite com category post 我希望用户能够访问 www mysite com alias 如果有一种 Wordpre
  • 函数什么时候太长? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在主可执行文件的子文件夹中部署 Qt C++ 共享库的 dll?

    我有一个由我创建的 Qt5 C 项目 其中包含一个主应用程序和一个共享库 它编译并执行 我能够部署它 问题是 通过部署 我需要将共享库的已编译 dll 放在与主可执行文件相同的目录中 但是 我更喜欢保持顶层文件夹相对干净 并将必要的文件放在
  • 模块“AppModule”声明了意外值“AnyComponent”

    我正在使用 Angular2 当尝试在同一个 Typescript 文件中使用两个类时 我遇到了这个问题 在编译时不会给我任何错误 但是当我尝试执行该页面时 console log 会给出以下错误 Error BaseException h
  • PostgreSQL:块中的页眉无效

    我收到错误 ERROR invalid page header in block 411 of relation t value time 在我的 PostgreSQL 数据库中 这种情况在不同的机器上不断发生 有没有办法防止这种情况发生
  • 由于 ORDER BY 子句导致 SQL 查询性能不佳

    我有一个查询连接 4 个表 其中 WHERE 子句中有很多条件 该查询还包括数字列上的 ORDER BY 子句 返回需要 6 秒 这太长了 我需要加快速度 令人惊讶的是 我发现如果删除 ORDER BY 子句 则需要 2 秒 为什么 ord
  • CakePHP 2 找不到插件

    在 CakePHP 2 中我使用 一川 https github com ichikaway cakephp mongodb tree cake2 0的 MongoDB 插件是这样的 public default array datasou
  • 编译 imagemagick Convert util 的静态版本

    寻找为创建静态二进制文件图像魔法 http www imagemagick org 两个平台上的转换实用程序 ubuntu 和 os x 我能找到的唯一讨论如何做到这一点的讨论是 并且已经过时了 我尝试从下载 tar 文件http www
  • SQL Server 中的数据沿袭

    客观的 让我们想象一下一个大型企业 其中我们拥有异构数据存储 例如 SQL 服务器 No SQL 存储 ADL ADF 等大数据存储 分布在不同的业务组中 我们的目标是在企业级别构建沿袭服务 这将提供有关企业内不同数据存储实例之间的数据沿袭
  • 从命令行运行 .php 文件中的 shell 命令

    我想将一系列 shell 命令放入程序中并从命令行执行该程序 我决定使用 PHP 来实现此目的 因此目前我正在尝试运行最基本的 shell 命令 另存为 build php 从命令行 php build php Output php exe
  • 如何在 matplotlib 中生成链接轴

    我正在尝试创建一个带有链接 x 轴 st 的图 顶部和底部刻度 标签是单位测量 焦耳和千焦耳 我看过 sharex 等的例子 但我的需求如下 如何使轴链接到从第一个轴生成第二个刻度线 标签的位置 当改变一个轴的限制时 另一轴应自动更新 最简
  • 在 MongoDB 文档中搜索带有特殊字符的字符串

    我想搜索具有特殊字符的值 例如 gt 在一个文档中 让我们考虑一下 我的 myKey 的值如下 test australia test austria test belgium green africa 我想搜索值 aus 例如 db my
  • Flutter报错Kotlin找不到所需的JDK工具

    我首先创建了一个新的 flutter 项目 但我收到了这个错误 What went wrong Execution failed for task app compileDebugKotlin gt Kotlin could not fin
  • 中断处理程序在不同的线程中执行?

    我想知道处理器何时被中断并执行 ISR 中断服务例程 是在被中断以处理此中断的线程上下文中执行的 还是在自己的线程中执行 然后返回到哪里它留在原来的线程中吗 那么中断发生时实际上会发生上下文切换吗 不会创建线程来处理中断 系统调用有时会失败
  • 如何使用 Flutter 从 Firestore 中使用 ListView 获得无限滚动

    我正在 Flutter 中使用 Firestore 和 ListView 对于列表中的某些项目 每个项目都可以正常工作 但是当我向下滚动超出所见限制时 我收到许多消息 该方法在 null 上被调用 似乎 ListView builder 没