zoukankan      html  css  js  c++  java
  • Flutter路由的跳转、动画与传参(最简单)

    跳转

    命名路由

    在文件构建时先设置路由参数:

    new MaterialApp(
      // 代码
      routes: {
        "secondPage":(BuildContext context)=>new SecondPage(),
      },
    );
    

    在需要做路由跳转的时候直接使用:

    Navigator.pushNamed(context, "secondPage");
    

    构建路由

    Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
      return new SecondPage();
    }))
    

    区别

    以上两种路由的优缺点十分明显:

    1. 命名路由简明并且系统,但是不能传参。
    2. 构建路由可以传参,但比较繁琐。

    动画

    构建动画

    先在构建一个动画效果,如:

    static SlideTransition createTransition(
      Animation<double> animation, Widget child) {
        return new SlideTransition(
            position: new Tween<Offset>(
            begin: const Offset(1.0, 0.0),
            end: const Offset(0.0, 0.0),
        ).animate(animation),
            child: child,
        );
    }
    

    以上动画意思为跳转时新页面从右边划入,返回时向右边划出。

    引入动画

    Navigator.push<String>(
      context,
      new PageRouteBuilder(pageBuilder: (BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation) {
            // 跳转的路由对象
            return new Wechat();
      }, transitionsBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        Widget child,
      ) {
        return MyStatefulWidgetState
            .createTransition(animation, child);
      }))
    

    传参

    跳转时

    前面我们说过,flutter的命名路由跳转无法传参。因此,我们只能使用构建路由的方式传参:

    Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
      return new SecondPage(
        title:'此处为参数',
        name:'此处为名字参数'
      );
    }))
    

    class SecondPage extends StatefulWidget {
      String title;
      String name;
    
      Wechat({
        Key key,
        this.title,
        this.name
      }) : super(key: key);
    
      @override
      State<StatefulWidget> createState() {
        return new MyStatefulWidgetState();
      }
    }
    

    返回时

    当触发路由返回的事件时,传参是十分简单的。和跳转时的方式一样,甚至更简单,只需要:

    Navigator.of(context).pop('这个是要返回给上一个页面的数据');
    

    但是,在接受返回时的数据需要改造前面触发跳转时的路由:

    // 命名路由
    Navigator.pushNamed<String>(context, "ThirdPage").then( (String value){
       //处理代码
    });
    // 构建路由
    Navigator.push<String>(context, new MaterialPageRoute(builder: (BuildContext context){
        return new ThirdPage(title:"请输入昵称");
    })).then( (String result){
       //处理代码
    });
    

    以上就是Flutter路由的跳转、动画以及传参的相关方法,依葫芦画瓢即可轻松应对。

  • 相关阅读:
    [北京.NET俱乐部]征集T恤设计方案
    [新功能]个人Blog首页分页浏览
    [公告]关于用户资料的保密
    奇怪的邮件与MSN密码
    文章发布功能改动
    [活动]北京.NET俱乐部首次活动照片及讲课资料
    [活动公告]上海.NET俱乐部首次活动预告
    [征询意见]关于开设.NET 2.0专题
    [北京.NET俱乐部活动]参加者签名并谈一下感受
    CSS3 transform 2D实验(1)
  • 原文地址:https://www.cnblogs.com/lunlunshiwo/p/9999915.html
Copyright © 2011-2022 走看看