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