亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

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路由的跳转、动画以及传参的相关方法,依葫芦画瓢即可轻松应对。

原文出处:https://www.cnblogs.com/lunlunshiwo/p/9999915.html  

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消