Flutter 跳转页面并传值

文章目录

• 1、跳转
• 2、传值
• 3、接收

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

效果：

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