我有这个代码。在图像列表页面中,它获取图像并显示它们。当我单击图像时,它会以英雄动画导航到其详细信息页面。但是,当我返回(弹出)图像列表页面时,无法再看到任何图像。它只是空白。
当我返回图像列表页面时,图像不再存在。
class MediaList extends StatefulWidget {
final tag;
MediaList(this.tag);
@override
State<StatefulWidget> createState() {
return _MediaListState(this.tag);
}
}
class _MediaListState extends State<MediaList> with AutomaticKeepAliveClientMixin {
final tag;
final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey = new GlobalKey<RefreshIndicatorState>();
_MediaListState(this.tag);
Future future;
List list = new List();
initState() {
super.initState();
future = MediaAPI().pictures(tag);
}
Future<void> _refresh() {
future = MediaAPI().pictures(tag);
setState((){});
return future;
}
setData(data) {
for(var i = 0 ; i < data.length; i++) {
list.add(AnimatingImage(data[i]["image"]));
}
}
@override
Widget build(BuildContext context) {
return list.length > 0
?
RefreshIndicator(
key: _refreshIndicatorKey,
onRefresh: _refresh,
child: StaggeredGridView.countBuilder(
itemCount: list.length,
crossAxisCount: 4,
itemBuilder: (context, index) {
return list[index];
},
staggeredTileBuilder: (int index) =>
new StaggeredTile.fit(2),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
)
)
:
FutureBuilder(
builder: (context, projectSnap) {
if (projectSnap.connectionState != ConnectionState.done) {
//print('project snapshot data is: ${projectSnap.data}');
print("yp");
return Container();
}
setData(json.decode(projectSnap.data.body));
return RefreshIndicator(
key: _refreshIndicatorKey,
onRefresh: _refresh,
child: StaggeredGridView.countBuilder(
itemCount: json.decode(projectSnap.data.body).length,
crossAxisCount: 4,
itemBuilder: (context, index) {
return AnimatingImage(json.decode(projectSnap.data.body)[index]["image"]);
},
staggeredTileBuilder: (int index) =>
new StaggeredTile.fit(2),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
)
);
},
future: future,
);
}
@override
bool get wantKeepAlive => true;
}
class AnimatingImage extends StatefulWidget {
final String url;
const AnimatingImage(this.url);
@override
AnimatingImageState createState() {
return new AnimatingImageState(this.url);
}
}
class AnimatingImageState extends State<AnimatingImage>
with SingleTickerProviderStateMixin {
CurvedAnimation _animation;
AnimationController _animationController;
final url;
NetworkImage _image;
AnimatingImageState(this.url);
bool _loading = true;
@override
void initState() {
_animationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 350),
)..addListener(() => setState(() {}));
_animation = CurvedAnimation(
parent: _animationController,
curve: Curves.bounceInOut,
);
_image = new NetworkImage(
'https://xxx.xxxxx.com/xyz:)/' + url
);
_image.resolve(ImageConfiguration()).addListener(
ImageStreamListener(
(info, call) {
if (this.mounted){
setState(() { _loading=false; });
_animationController.forward();
}
},
),
);
super.initState();
}
@override
Widget build(BuildContext context) {
return
Container(
child: new Material(
child: new InkWell(
child: new Center(
child: _loading
?
new Container(
width: double.infinity,
height: ((new Random().nextInt(5) + 1) * 80).toDouble(),
color: Colors.grey[100],
child:
Center(
child: null)
)
:
new Hero(
tag:url,
child:
new GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => MediaDetail(url)));
},
child:
new Container(
child: new ScaleTransition(
scale: _animation,
child: Image( image: _image))
),),
),
)
),
),
);
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
}
这是图像细节
class MediaDetail extends StatelessWidget {
final image;
MediaDetail(this.image);
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Center(
child: Container(
child: Hero(
tag: image,
child: Image( image: new NetworkImage(
'https://xxx.xxxxxxx.com/xyz:)/' + image
)
),
),
),
),
);
}
}