firebase - Flutter Firebase ListView - 缓慢刷新
问题描述
我使用 StreamBuilder 小部件创建了一个从 Firebase 集合填充的 ListView。填充 ListView 需要一些时间,因为我正在为 Firebase 集合的每个项目运行任务(HTTP 请求),然后在列表中显示结果。
当我使用 ListView 离开页面然后返回页面(使用 PageView)时,ListView 似乎完全刷新,而不是使用上次看到的版本。因此,每次重新打开页面时都会重新填充列表,因此有一个约 5 秒的循环进度指示器。
问题:
- 每次重新打开页面时,让这个 ListView 不完成完整的 5 秒刷新的最佳方法是什么?它可以使用上次看到的版本并且仅在将项目添加到 firebase 集合时更新吗?
- 如果我要删除需要在集合的每个项目上运行的任务(HTTP 请求),而只是直接从 Firebase 集合中显示值,那么刷新时间是否足够快以至于不是问题?
- 是否最好创建一个与 Firebase 集合同步的本地数据库(使用 sqflite)以防止刷新缓慢?
代码:
class AccountsPage extends StatefulWidget {
@override
_AccountsPageState createState() => _AccountsPageState();
}
class _AccountsPageState extends State<AccountsPage> {
User user;
Widget _buildListItem(BuildContext context, DocumentSnapshot document, String uuid) {
// get data from firebase
String token = document.data.values.toList()[0];
// For current document/token, make an HTTP request using the token and return relevant data
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: FutureBuilder(
future: anHTTPrequest(token, uuid),
builder: (context, projectSnap) {
if (projectSnap.connectionState == ConnectionState.none ||
!projectSnap.hasData || projectSnap.data.length == 0) {
return Container();
}
return ListView.builder(
shrinkWrap: true,
itemCount: projectSnap.data.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(projectSnap.data[index]),
);
},
);
},
),
)],
);
}
@override
Widget build(BuildContext context) {
final container = StateContainer.of(context);
user = container.user;
return Container(
child: Scaffold(
body: Column(
children: <Widget>[
new Flexible(
child: StreamBuilder(
stream: Provider.of(context).collectionRef.document(user.uuid).collection('tokens').snapshots(),
builder: (context, snapshot){
if (!snapshot.hasData){
return Container(
child: Center(
child: Text("No data")
)
);
}
return ListView.builder(
padding: EdgeInsets.all(8.0),
reverse: false,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, int index) {
return _buildListItem(context, snapshot.data.documents[index], user.uuid);
}
);
}
)
),
]
),
),
);
}
}
解决方案
推荐阅读
- reactjs - 第 17:115 行的意外令牌 reactjs
- c# - 使用 LINQ 查询 JSON 嵌套对象
- c++ - 检查字符串c ++的形式
- git - 我可以根据分支使用 Azure Pipelines Yaml 将 FTP 部署到不同的服务器吗?
- python - 如何在请求和执行 pip 时解决 python 中的 SSL 错误?
- python - 使用 mongoimport 将文件导入 mongodb
- google-cloud-bigtable - 在 CBT 工具中创建表时出现授权错误
- ruby-on-rails - rails to postgre 两个用户之间的连接不同
- reactjs - ReactJS 函数组件对象第二次更新
- flutter - 文本字段文本对齐未垂直对齐