flutter - backpress 将用户带到列表中的第一个图像

Question

我正在全屏模式下打开图像列表中的图像，但是当我返回并返回图像列表时，页面会位于列表顶部，然后我每次都必须向下滚动。

有没有一种方法，当我从全屏按下图像时，它会转到点击全屏的图像，而不是在列表顶部。

图片列表页-

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(),
                      ),),],),),],),),),); }

Answer 1

我不熟悉 StaggeredGridView，但通常如果你想保存 ScrollView 小部件的 ScrollPosition，你给它一个 PageStorageKey(与您使用的 UniqueKey 相对)。

当使用相同的 PageStorageKey 重建 ScrollView 时，它将获取之前的滚动位置并为 ScrollView 适本地设置它，将您带回到您在推到之前所在的位置新路线。

您可以阅读有关 PageStorageKey 的更多信息 here .