使用 Navigator 从堆栈中弹出屏幕

Question

我用几个项目填充了一个 Gridview，当我按下一个项目时，它会引导我进入包含它的相关信息的详细信息页面。

但是不知何故，当我按下后退按钮时，它并没有return到上一页，而是到另一页，我相信它会自动弹出堆栈。

我想了解为什么会这样。

下面是包含网格视图的class：

 List<Container> containerSuperHero = new List();

  var posts = [
    {"title":"VIP Bartender", "imagem":"lib/images/logo.png"},
    {"title":"Flair Bartender", "imagem":"lib/images/logo.png"},
    {"title":"VIP Bartender", "imagem":"lib/images/logo.png"},
    {"title":"Flair Bartender", "imagem":"lib/images/logo.png"},
    {"title":"VIP Bartender", "imagem":"lib/images/logo.png"},
    {"title":"Flair Bartender", "imagem":"lib/images/logo.png"},
    {"title":"VIP Bartender", "imagem":"lib/images/logo.png"},
    {"title":"Flair Bartender", "imagem":"lib/images/logo.png"},
  ];

 _buildGridView(BuildContext context) async {

  for(var i=0; i < posts.length; i++){

    final posty = posts[i];
    final String image = posty["imagem"];

    containerSuperHero.add(
      new Container(
        padding: EdgeInsets.all(10.0),
        child: Card(
            child: Column(
            children: <Widget>[
              Hero(
                tag:posty,
                child: Material(
                child: InkWell(
                  onTap: ()=> Navigator.of(context).push(MaterialPageRoute(builder:
                  (BuildContext context) =>
                      Detail(title: posty["title"],
                        image: image,
                      ),
                  )
                  ),
                  child:  Image.asset(image,
                      height: 80,
                      width: 80,
                      fit: BoxFit.cover),
                ),
              )),
               Padding(padding: EdgeInsets.all(10.0)),
               Text(posty["title"],
                style: TextStyle(
                  fontSize: 18.0,
                ) ,)
            ],
          )
        )),
    );

  }
}

Widget buidContainerHero(BuildContext context){

   _buildGridView(context);

   return GridView.count(
       crossAxisCount: 2,
       children: containerSuperHero
   );
}


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),),
      body: Stack(
          children: <Widget>[
            Column(
              children: <Widget>[
                _buildCarouselSlider(context),
                SizedBox(height: 30),
                Text("Welcome Back!"),
                SizedBox(height: 30),
                Expanded(
                    child: buidContainerHero(context))
              ],
            )
          ]
      ),
    );
  }
}

我的详细信息屏幕仅包含以下内容：

class Detail extends StatelessWidget {

  Detail(
      {this.postID, this.title, this.image}
      );

  final int postID;
  final String title;
  final String image;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
          children: <Widget>[
            Container(
              height: 240,
              child: Image.asset(image),
            )
          ],

        )
    );
  }
}

Answer 1

试试这个， Navigator.push( 语境， MaterialPageRoute( 生成器：(_) => 详细信息（标题：posty["title"], 图片：图片， ), )

使用 Navigator 从堆栈中弹出屏幕

Screen is popped off the stack using Navigator

stack

scaffold

navigator

dart

flutter