最簡單的Flutter路由教程——跳轉、動畫與傳參

lunlunshiwo發表於2018-11-22
Flutter路由動畫

跳轉

命名路由

在檔案構建時先設定路由引數：

new MaterialApp(
  // 程式碼
  routes: {
    "secondPage":(BuildContext context)=>new SecondPage(),
  },
);
複製程式碼

在需要做路由跳轉的時候直接使用：

Navigator.pushNamed(context, "secondPage");
複製程式碼

構建路由

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
  return new SecondPage();
}))
複製程式碼

區別

以上兩種路由的優缺點十分明顯：

  1. 命名路由簡明並且系統，但是不能傳參。
  2. 構建路由可以傳參，但比較繁瑣。

動畫

構建動畫

先在構建一個動畫效果，如：

static SlideTransition createTransition(
  Animation<double> animation, Widget child) {
    return new SlideTransition(
        position: new Tween<Offset>(
        begin: const Offset(1.0, 0.0),
        end: const Offset(0.0, 0.0),
    ).animate(animation),
        child: child,
    );
}
複製程式碼

以上動畫意思為跳轉時新頁面從右邊劃入，返回時向右邊劃出。

引入動畫

Navigator.push<String>(
  context,
  new PageRouteBuilder(pageBuilder: (BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation) {
        // 跳轉的路由物件
        return new Wechat();
  }, transitionsBuilder: (
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return MyStatefulWidgetState
        .createTransition(animation, child);
  }))
複製程式碼

傳參

跳轉時

傳

前面我們說過，flutter的命名路由跳轉無法傳參。因此，我們只能使用構建路由的方式傳參:

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
  return new SecondPage(
    title:'此處為引數'，
    name:'此處為名字引數'
  );
}))
複製程式碼

收

class SecondPage extends StatefulWidget {
  String title;
  String name;

  Wechat({
    Key key,
    this.title,
    this.name
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return new MyStatefulWidgetState();
  }
}
複製程式碼

返回時

傳

當觸發路由返回的事件時，傳參是十分簡單的。和跳轉時的方式一樣，甚至更簡單，只需要：

Navigator.of(context).pop('這個是要返回給上一個頁面的資料');
複製程式碼

收

但是，在接受返回時的資料需要改造前面觸發跳轉時的路由：

// 命名路由
Navigator.pushNamed<String>(context, "ThirdPage").then( (String value){
   //處理程式碼
});
// 構建路由
Navigator.push<String>(context, new MaterialPageRoute(builder: (BuildContext context){
    return new ThirdPage(title:"請輸入暱稱");
})).then( (String result){
   //處理程式碼
});
複製程式碼

以上就是Flutter路由的跳轉、動畫以及傳參的相關方法，依葫蘆畫瓢即可輕鬆應對。

相關文章