我有一个具有多个屏幕的应用程序(pageView + cupertino标签栏)。在几页内,我使用了一个streambuilder。就是这样
class BookList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('books').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting: return new Text('Loading...');
default:
return new ListView(
children: snapshot.data.documents.map((DocumentSnapshot document) {
return new ListTile(
title: new Text(document['title']),
subtitle: new Text(document['author']),
);
}).toList(),
);
}
},
);
}
}
一切正常,但是当我切换页面时(是的,我已经在使用keep client live live混合功能)。半秒钟没有任何响应,然后streambuilder出现了。但是我想在每次streambuilder完成加载时使用淡入淡出的动画使其更“柔和”。
有可能吗?
谢谢!
答案 0 :(得分:1)
只要是数据源(Firebase),您只需要在AnimatedSwitcher
的builder属性内用StreamBuilder
包装最上面的小部件即可实现该淡入动画。
class BookList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('books').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError)
return new AnimatedSwitcher(
duration: Duration(milliseconds: 700),
child: snapshot.hasData?Text('Error: ${snapshot.error}')):Container();
switch (snapshot.connectionState) {
case ConnectionState.waiting: return new Text('Loading...');
default:
return new ListView(
children: snapshot.data.documents.map((DocumentSnapshot document) {
return new ListTile(
title: new Text(document['title']),
subtitle: new Text(document['author']),
);
}).toList(),
);
}
},
);
}
}