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

目录
相关文章
|
2月前
|
Dart 开发者
flutter:页面整合 (十)
本文档介绍了如何在 Flutter 应用中使用底部导航栏(`BottomNavigationBar`)和侧边栏(`Drawer`),包括简单的使用方法、属性配置、与按钮结合使用、使用图片作为图标、以及如何实现顶部导航。示例代码展示了如何创建包含多个页面的导航栏,并通过 `TabController` 控制器实现页面切换。同时,文档还提供了如何自定义导航栏样式和添加浮动操作按钮(`FloatingActionButton`)的方法。最后,整合了底部导航栏、侧边栏和顶部导航栏的完整示例代码,帮助开发者快速构建具有导航功能的 Flutter 应用界面。
|
7月前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
383 0
Flutter仿写微信导航栏快速实现页面导航
Flutter仿写微信导航栏快速实现页面导航
|
存储 数据安全/隐私保护
Flutter App页面路由及路由拦截实现
直接使用页面跳转会带来诸多缺陷,通过路由管理可以降低页面耦合,提高代码的可维护性和权限控制。本篇介绍了 Flutter 的路由管理和拦截实现。
1383 1
Flutter App页面路由及路由拦截实现
如何用一行代码实现Flutter页面变灰效果?
如何用一行代码实现Flutter页面变灰效果?
如何用一行代码实现Flutter页面变灰效果?
|
JSON 数据格式 容器
Flutter 仿微信价值几个亿的页面
网传微信支付页面的第三方链接一个格子需要广告费1一个亿,微信支付页非常适合做功能导航,本篇使用 ListView和 GridView 模仿微信支付页面
268 0
Flutter 仿微信价值几个亿的页面
|
存储 索引 容器
Flutter 构建常用的 App 页面框架
详细讲解如何用 Flutter 构建一个底部导航的 App 页面框架
509 0
Flutter  构建常用的 App 页面框架
Flutter 跳转并关闭当前页面
Flutter 跳转并关闭当前页面
1754 0
|
Android开发 容器
Flutter 57: 图解页面小跳转 (三)
0 基础学习 Flutter,第五十七步:尝试学习页面间跳转第三节!
1646 0