使用导航器将屏幕弹出堆栈

时间:2019-12-09 14:43:36

标签: flutter dart stack navigator scaffold

我在Gridview中填充了几个项目,当我按下一个项目时,它会带我到包含有关该项目的信息的“详细信息”页面。

但是当我按下“后退”按钮时,它不会返回上一页而是返回到另一页面,我相信它会自动从堆栈中弹出。

我想了解为什么会这样。

下面是包含网格视图的类:

 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),
            )
          ],

        )
    );
  }
}

1 个答案:

答案 0 :(得分:0)

尝试一下, Navigator.push(           上下文           MaterialPageRoute(             builder:(_)=> Detail(title:posty [“ title”],                         图片:图片,                       ),           )