Flutter--路由及导航

路由及导航

页面跳转基本使用

1. 说明：移动应用通常通过称为“屏幕"或“页面”的全屏元素显示其内容，在flutter中，这些元素称为路由，它们由导航器Navigator组件管理。导航器管理一组路由Route对象，并提供了管理堆栈的方法，例如Navigator.push和Navigator.pop.

2. 例子：查看商品详情页的跳转示例

   新建第一个页面加FirstScreen,添加一个跳转的按钮；再添加一个名为SecondScreen,在该页面里添加一个“返回页面”按钮，按下则放回第一个页面。如下代码：

   main.dart

   import 'package:flutter/material.dart';
   import 'package:route_page/page_jumps.dart';
   
   void main() {
     runApp(
       new MaterialApp(
         title: "导航页面示例",
         home: new FirstScreen(),
       )
     );
   }
   
   

   page_jumps.dart

   import 'package:flutter/material.dart';
   
   class FirstScreen extends StatelessWidget{
     @override
     Widget build(BuildContext context) {
       // TODO: implement build
       return Scaffold(
         appBar: AppBar(
           title: Text("导航页面示例"),
         ),
         body: Center(
           child: RaisedButton(
             child: Text("查看商品详情页面"),
             onPressed: (){
               Navigator.push(context,
               new MaterialPageRoute(builder: (context) => new SecondScreen()));
             },
           ),
         ),
       );
     }
   }
   
   class SecondScreen extends StatelessWidget{
     @override
     Widget build(BuildContext context) {
       // TODO: implement build
       return Scaffold(
         appBar: AppBar(
           title: Text("导航页面示例"),
         ),
         body: new Center(
           child:RaisedButton(
             child: Text("返回页面"),
             onPressed: (){
               Navigator.pop(context);
             },
           )
   
         ),
       );
     }
   }
   

来到第二个页面

回到第一个页面

页面跳转发送数据

1. 说明：页面跳转经常会遇到需要发送数据给其他页面的情况，比如从订单列表到商品详情页面时，通常要发送商品id参数。接下来，我们就以这个为示例，来学习一下发送数据的操作。

2. 例子：

   1. 新建一个页面为productList，使用list.generate方法构造20条模拟数据。

   2. 当按下商品列表中的某一项时，页面会跳转到商品详情页面（ProductDetail）里面.

      main.dart

      import 'package:flutter/material.dart';
      import 'package:route_page/page_jumps.dart';
      import 'package:route_page/send_message.dart';
      
      void main() {
        runApp(
        //   new MaterialApp(
        //   title: "导航页面示例",
        //   home: new FirstScreen(),
        // )
          new MaterialApp(
            title: "传递数据示例",
            home: new ProductList(
                products:
                new List.generate(20, (i) => new Product('商品 $i', "这是一个商品详情 $i"))),
          )
        );
      }
      
      
      

      Send_message.dart

      import 'package:flutter/material.dart';
      class Product{
        final String title;
        final String description;
        Product(this.title,this.description);
      }
      
      class ProductList extends StatelessWidget{
        final List<Product>  products;
      //  构造函数
        ProductList({Key key,@required this.products}):super(key:key);
        @override
        Widget build(BuildContext context) {
          // TODO: implement build
          return Scaffold(
            appBar: AppBar(
              title: new Text("商品列表"),
            ),
            body: new ListView.builder(
              itemCount: products.length,
      //        遍历
              itemBuilder: (context,index){
                return new ListTile(
                  title: new Text(products[index].title),
                  onTap: (){
                    Navigator.push(context, 
                        new MaterialPageRoute(builder: (context)=>new ProductDetail(product:products[index])),);
                  },
                );
              }
            ),
      
          );
        }
      }
      class ProductDetail extends StatelessWidget{
        final Product product;
        ProductDetail({Key key,@required this.product}):super(key:key);
        @override
        Widget build(BuildContext context) {
          // TODO: implement build
          return new Scaffold(
            appBar: new AppBar(
              title: new Text("${product.title}"),
            ),
            body: new Padding(
                padding: new EdgeInsets.all(16.0),
              child: new Text("${product.description}"),
            ),
          );
        }
      }
      

      
      

      页面跳转返回数据

      1. 说明：页面跳转有时，涉及到要从第二个页面返回数据到第一个页面，下面我们通过一个简单的例子，来练习一下怎么实现。

      2. 例子：

         1. 新建第一个页面，并设置跳转按钮。并设置提示语，来检验是否拿到了数据（⚠️这里的跳转事件要设置成异步的，这样才能保证拿到返回数据后，才进行下面的语句执行）

         2. 第二个页面设置了两个按钮，按下不同的按钮，都会回到第一个页面，但是返回的值不同

            代码：

            main.dart

            import 'package:flutter/material.dart';
            import 'package:route_page/page_jumps.dart';
            import 'package:route_page/return_message.dart';
            import 'package:route_page/send_message.dart';
            
            void main() {
              runApp(
              //   new MaterialApp(
              //   title: "导航页面示例",
              //   home: new FirstScreen(),
              // )
              //   new MaterialApp(
              //     title: "传递数据示例",
              //     home: new ProductList(
              //         products:
              //         new List.generate(20, (i) => new Product('商品 $i', "这是一个商品详情 $i"))),
              //   )
                new MaterialApp(
                  title: '页面跳转发、返回数据',
                  home: new FirstPage(),
                )
              );
            }
            

            return_message.dart

            import 'package:flutter/material.dart';
            class FirstPage extends StatelessWidget{
              @override
              Widget build(BuildContext context) {
                // TODO: implement build
                return Scaffold(
                  appBar: AppBar(
                    title: Text("页面跳转返回数据示例"),
                  ),
                  body: new Center(
                    child:new RouteButton(),
                  ),
                );
              }
            }
            class RouteButton extends StatelessWidget{
              @override
              Widget build(BuildContext context) {
                // TODO: implement build
                return RaisedButton(
                  child: Text("跳转到第二个页面"),
                  onPressed: (){
                    _navigateToSecondPage(context);
                  },
                );
              }
            //异步请求---要等await语句的拿到返回值后，才能往下执行
               _navigateToSecondPage(BuildContext context) async {
                final reslut = await Navigator.push(context,
                 new MaterialPageRoute(builder: (context)=>new Secondage()),);
                //弹出提示信息
                 Scaffold.of(context).showSnackBar(new SnackBar(content: new Text("${reslut}")));
               }
            }
            class Secondage extends StatelessWidget{
              @override
              Widget build(BuildContext context) {
                // TODO: implement build
                return Scaffold(
                  appBar: AppBar(
                    title: Text("选择一条数据"),
                  ),
                  body: new Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        //Padding可以为其子节点留白（填充）
                        Padding(
                          padding:const EdgeInsets.all(8.0),//留白
                          child: RaisedButton(
                            child: Text('hi,google!'),
                            onPressed: (){
                              Navigator.pop(context,'hi google');
                            },
                          ),
                        ),
                        Padding(
                          padding:const EdgeInsets.all(8.0),//留白
                          child: RaisedButton(
                            child: Text('hi,flutter!'),
                            onPressed: (){
                              Navigator.pop(context,'hi flutter');
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              }
            }
            

      

      

      

​

总结

今天主要记录的是基础的页面跳转、还有具有返回数据和发送数据的页面跳转哈～

好啦！今天的分享就到这里了哦～