Flutter 跳转页面并传值

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

效果：

1、跳转

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

为了导航到新的页面，我们需要调用Navigator.push方法。 该push方法将添加Route到由导航器管理的路由栈中！
该push方法需要一个Route，但Route从哪里来？我们可以创建自己的，或直接使用MaterialPageRoute。 MaterialPageRoute很方便，因为它使用平台特定的动画跳转到新的页面(Android和IOS屏幕切换动画会不同)。

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

ArticleDetail就是要跳转的详情页

2、传值

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

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

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

传入了两个参数，title和url，传参形式为 key：参数

3、接收

先添加一个ArticleDetail构造方法，

class ArticleDetail extends StatelessWidget {
  String url, title;

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

有两个@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}"),
              ),
            ),
      },
    );
  }
}


  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
 

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

文章来源: blog.csdn.net，作者：yechaoa，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/yechaoa/article/details/90174488