美文网首页
(Flutter 七)Navigator:导航

(Flutter 七)Navigator:导航

作者: 小豆豆苗 | 来源:发表于2020-03-20 17:25 被阅读0次

    导航关系到页面之间到跳转问题,一般有几种场景:一般情况下的导航,也就是说页面之间跳转不需要带参数,还有就是页面直接跳转需要带参数。

    一、不带参数的页面跳转和返回

     import 'package:flutter/material.dart';
    
     void main() {
       runApp(MaterialApp(
         title: '导航示例',
         home: new FirstScreen(),
       ));
     }
    
     //第一个页面
     class FirstScreen extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return Scaffold (
           appBar: AppBar(title: Text('导航页面'),),
           body: Center( //让按钮居中显示的框架
             child: RaisedButton(//凸起的按钮
               child: Text('checkout detail'), //按钮的文字
               color: Colors.red,//按钮的背景色
               child: Text('checkout detail'), //按钮的文字
               textColor: Colors.orange, //文字的颜色
               highlightColor: Colors.green,//高亮(被点击)时的颜色
               focusColor: Colors.blue,
               hoverColor: Colors.purple,
               elevation: 20.0, //阴影
               onPressed: (){//点击按钮的事件
                 Navigator.push(context, MaterialPageRoute( //跳转界面到SecondScreen
                   builder:(context)=> new SecondScreen()
                 ));
               },
             ),
           ),
         );
       }
     }
    //第二个页面
     class SecondScreen extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(title: Text('detail page'),),
           body: Center(
             child: RaisedButton(
               child: Text('back'),
               onPressed: (){
                 Navigator.pop(context); //返回到上一级界面
               },
             ),
           ),
         );
       }
     }
    

    其中需要注意的是RaisedButton按钮组件,它继承自MaterialButton,它有两个最基本的属性:

    • child:可以放入容器,图标,文字。让你构建多彩的按钮。
    • onPressed:点击事件的相应,一般会调用Navigator组件。
      当然它还有长按点击事件:onLongPress点击事件。

    Navigator.push 和 Navigator.pop

    • Navigator.push:是跳转到下一个页面,它要接受两个参数一个是上下文context,另一个是要跳转的函数。
    • Navigator.pop:是返回到上一个页面,使用时传递一个context(上下文)参数,使用时要注意的是,你必须是有上级页面的,也就是说上级页面使用了Navigator.push

    运行结果:简书中没法添加录制视频,只能截图显示显示效果



    二、导航参数的传递

    下列代码功能是创建一个商品列表页,点击商品跳转到商品详情页

    import 'package:flutter/material.dart';
    
    //构造一个Product对象
    class Product {
      final String title;//商品名称
      final String description;//商品描述
      Product(this.title, this.description);//构造函数
    }
    
    void main(){
      runApp(MaterialApp(
        title: '导航的接收和传递',
        home: ProductList(
          //初始化并赋值products数组
          products: List.generate(20, (i)=>Product('商品$i','这是一个商品详情'))
        ),
      ));
    }
    //创建商品列表页
    class ProductList extends StatelessWidget {
      final List<Product> products;
      ProductList({@required this.products}):super();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('商品列表')),
          body: ListView.builder(
            itemCount: products.length,
            itemBuilder: (context,index){
              return ListTile(
                title: Text(products[index].title),
                onTap: (){
                  Navigator.push(
                      context, 
                      MaterialPageRoute(
                        builder: (context) => ProductDetail(product: products[index])
                      )
                  );
                },
              );
            },
          ),
        );
      }
    }
    //创建商品详情页
    class ProductDetail extends StatelessWidget {
      final Product product;
      ProductDetail({@required this.product}):super(); //构造函数用来接收参数
      
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('${product.title}'),), //把传递过来的product中的title作为标题
          body: Center(
            child: Text('${product.description}'),
          ),
        );
      }
    }
    
    
    列表页
    商品详情页

    三、导航参数的接收

    下列示例是点击按钮进入详情页,然后点击详情页的按钮返回到上一级界面并返回值显示。
    这段代码中使用了async是异步加载,Dart规定async标记的函数,只能由await来调用。
    使用了SnackBar这个组件来显示返回值。

    import 'package:flutter/material.dart';
    
    void main(){
      runApp(MaterialApp(
        title: '页面跳转返回数据',
        home: FirstPage(),
      ));
    }
    
    class FirstPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text("商品")),
          body: Center(
            child: RouteButton(),
          )
        );
      }
    }
    
    class RouteButton extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return RaisedButton(
          onPressed: (){
            _navigateToDetail(context);
          },
          child: Text('点击进入商品列表页'),
        );
      }
      //下划线表示是内部方法
      //async是异步加载,Dart规定async标记的函数,只能由await来调用
      _navigateToDetail(BuildContext context) async{
        final result = await Navigator.push( //接收DetailPage传回来的值
            context, 
            MaterialPageRoute(builder: (context)=>DetailPage())
        );
        //SnackBar是一个组件可以显示内容,用于显示返回值result
        Scaffold.of(context).showSnackBar(SnackBar(content: Text('${result}')));
      }
      //
    }
    
    class DetailPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('可供选择的商品')),
          body: Center(
            child: Column(
              children: <Widget>[
                RaisedButton(
                  child: Text('This is a Mac'),
                  onPressed: (){
                    Navigator.pop(context,'Mac'); //把Mac值返回给上一个页面
                  },
                ),
                RaisedButton(
                  child: Text('This is a phone'),
                  onPressed: (){
                    Navigator.pop(context,'phone');
                  },
                ),
              ],
            ),
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:(Flutter 七)Navigator:导航

          本文链接:https://www.haomeiwen.com/subject/ueklyhtx.html