Flutter 跳转页面并传值

简介: Flutter 跳转页面并传值

跳转传值是再普通不过的小功能了,在开发中会经常用到,比如列表进入详情。


效果:



image.png


1、跳转

比如在onTap事件中处理跳转。


为了导航到新的页面,我们需要调用Navigator.push方法。 该push方法将添加Route到由导航器管理的路由栈中!

该push方法需要一个Route,但Route从哪里来?我们可以创建自己的,或直接使用MaterialPageRoute。 MaterialPageRoute很方便,因为它使用平台特定的动画跳转到新的页面(Android和IOS屏幕切换动画会不同)。


onTap: () {
          Navigator.push(
            context,
            new MaterialPageRoute(builder: (context) => new ArticleDetail(),
          );
      },

ArticleDetail就是要跳转的详情页



2、传值

传值的话相当于Java中的构造方法


ArticleDetail页面此时相当于是一个方法,传入参数即可


onTap: () {
          Navigator.push(
            context,
            new MaterialPageRoute(builder: (context) => new ArticleDetail(title:_datas[i].title,url: _datas[i].link)),
          );
      },

传入了两个参数,title和url,传参形式为 key:参数



3、接收

先添加一个ArticleDetail构造方法,


class ArticleDetail extends StatelessWidget {
  String url, title;
  ArticleDetail({Key key, @required this.title, @required this.url})
      : super(key: key);
 }


有两个@required修饰的必须参数,即title和url,this.title和this.url直接指向自定义的参数,传入即赋值,即可直接引用,比如${title} 。


这里是两个String,对象同理。


详情完整代码:


class ArticleDetail extends StatelessWidget {
  String url, title;
  ArticleDetail({Key key, @required this.title, @required this.url})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: ThemeData(
        primaryColor: YColors.colorPrimary,
        primaryColorDark: YColors.colorPrimaryDark,
      ),
      routes: {
        "/": (_) => new WebviewScaffold(
              url: "${url}",
              appBar: new AppBar(
                leading: new IconButton(
                    icon: Icon(Icons.arrow_back),
                    onPressed: () {
                      Navigator.maybePop(context);
                    }),
                title: new Text("${title}"),
              ),
            ),
      },
    );
  }
}


官方文档:https://flutter.dev/docs/cookbook/navigation/passing-data

目录
相关文章
|
3月前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
58 0
|
10月前
|
UED 索引
Flutter仿写微信导航栏快速实现页面导航
Flutter仿写微信导航栏快速实现页面导航
如何用一行代码实现Flutter页面变灰效果?
如何用一行代码实现Flutter页面变灰效果?
如何用一行代码实现Flutter页面变灰效果?
|
存储 数据安全/隐私保护
Flutter App页面路由及路由拦截实现
直接使用页面跳转会带来诸多缺陷,通过路由管理可以降低页面耦合,提高代码的可维护性和权限控制。本篇介绍了 Flutter 的路由管理和拦截实现。
1141 1
Flutter App页面路由及路由拦截实现
|
JSON 数据格式 容器
Flutter 仿微信价值几个亿的页面
网传微信支付页面的第三方链接一个格子需要广告费1一个亿,微信支付页非常适合做功能导航,本篇使用 ListView和 GridView 模仿微信支付页面
222 0
Flutter 仿微信价值几个亿的页面
|
存储 索引 容器
Flutter 构建常用的 App 页面框架
详细讲解如何用 Flutter 构建一个底部导航的 App 页面框架
424 0
Flutter  构建常用的 App 页面框架
Flutter 跳转并关闭当前页面
Flutter 跳转并关闭当前页面
1448 0
Flutter入门:如何只关闭自身页面
前几天QA给我提了一个bug,说一个弹窗总是无缘无故的自己退出,而且没有任何规律,无法准确复现。 我经过调查发现,我们有一个倒计时弹窗(在Flutter中弹窗其实也是页面),倒计时结束后关闭。但是在弹出倒计时后,由于一些业务逻辑又弹出另外一个弹窗,这时候如果倒计时结束调用pop,只会将新的弹窗关闭,而倒计时弹窗则无法关闭了。 因为这个弹窗不是必弹的,所以导致好像后一个页面是随机无故退出似的。
590 0
|
Android开发 容器
Flutter 57: 图解页面小跳转 (三)
0 基础学习 Flutter,第五十七步:尝试学习页面间跳转第三节!
1602 0