我在全屏模式下打开图像列表中的一个图像,但当我返回并进入图像列表时,页面会位于列表的顶部,然后每次都必须向下滚动。
有没有一种方法,当我从全屏向后按下图像时,它会转到全屏时点击的图像,而不是列表的顶部。
镜像列表页面-
class _PageOneState extends State<PageOne> with AutomaticKeepAliveClientMixin<PageOne> {
ScrollController scroller = ScrollController();
@override
bool get wantKeepAlive => true;
List<dynamic> imageUrlList;
getImageUrls() async {
var url = 'https://simple.firebaseio.com/QWE.json';
await http.get(url).then((res) {
if (res.statusCode == 200) {
var resData = json.decode(res.body);
setState(() {
imageUrlList = resData['URL'];
});
}
});
}
@override
void initState() {
super.initState();
getImageUrls();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
super.build(context); // need to call super method.
return Scaffold(
resizeToAvoidBottomPadding: false,
body:imageUrlList != nul ?
StaggeredGridView.countBuilder(
key: UniqueKey(),
padding: const EdgeInsets.all(8.0),
crossAxisCount: 4,
itemCount: imageUrlList.length,
itemBuilder: (BuildContext context,int index) {
String imgPath =imageUrlList[index].toString();
return new Material(
elevation: 8.0,
borderRadius:
new BorderRadius.all(new Radius.circular(8.0)),
child: new InkWell(
onTap:() {Navigator.push(
context,new MaterialPageRoute(builder: (context) =>
new FullScreenImagePage(imgPath)));
},
child: new Hero(
tag: imgPath,
child: new FadeInImage(
image: new CachedNetworkImageProvider(imgPath),
),
),
),
);
},
staggeredTileBuilder: (i) =>
new StaggeredTile.count(2, i.isEven ? 2 : 3),
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
)
: new Center(
child: new CircularProgressIndicator(),
),
);
}
}
全屏页面-
class FullScreenImagePage extends StatelessWidget {
String imgPath;
FullScreenImagePage(this.imgPath);
@override
Widget build(BuildContext context) {
return Scaffold(
body: new SizedBox.expand(
child: new Container(
decoration: new BoxDecoration(gradient: backgroundGradient),
child: new Stack(
children: <Widget>[
new Align(
alignment: Alignment.center,
child: new Hero(
tag: imgPath,
child: new Image.network(imgPath),
),
),
new Align(
alignment: Alignment.topCenter,
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
leading: new IconButton(
icon: new Icon(
Icons.close,
color: Colors.black,
),
onPressed: () => Navigator.of(context).pop(),
),),],),),],),),),); }
发布于 2019-06-12 12:42:23
我不熟悉StaggeredGridView
,但是如果您想要保存滚动视图小部件的ScrollPosition
,通常需要给它一个PageStorageKey
(而不是您正在使用的UniqueKey
)。
当使用相同的PageStorageKey
重建滚动视图时,它将获取以前的滚动位置,并为滚动视图适当地设置它,将您带回推送到新路线之前的位置。
您可以阅读有关PageStorageKey
here的更多信息。
https://stackoverflow.com/questions/56550740
复制相似问题