注意:我已经看到了关于 ListView 的延迟加载的答案,但这些是针对自定义 API 的,而不是针对 firestore 数据库的!
我有一个书籍摘要应用程序,应用程序从我的Firebase/Firestore
数据库,然后使用ListView.builder
它被包裹在一个StreamBuilder
.
现在,我想延迟获取数据,我的意思是当用户滚动列表时,所需的数据会被加载,而不是立即加载数据然后延迟显示。
//The Widget used to display data:
Widget feed() {
return Container(
width: deviceWidth,
height: deviceHeight / 3,
child: StreamBuilder(
stream: Firestore.instance
.collection('feedItem')
.orderBy('feedId', descending: true)
.snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
int totalLength = snapshot.data.documents.length;
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: totalLength > 10 ? 10 : totalLength,
itemBuilder: (BuildContext context, int index) {
return Container(
width: deviceWidth / 2.5,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => FeedIntro(
snapshot.data.documents[
((totalLength - 1) - index)]['feedId'])));
},
child: Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
// width: 150,
height: 150,
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
snapshot.data.documents[index]['feedImage'],
),
fit: BoxFit.fill)),
),
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(snapshot.data.documents[index]['title']),
)),
],
)),
),
);
},
);
} else if (snapshot.hasError) {
return Center(child: Text('Sorry Something went wrong!'));
} else {
return Center(
child: SizedBox(
child: CircularProgressIndicator(),
width: 50,
height: 50,
),
);
}
}),
);
}