快捷導(dǎo)航

flutter 路由跳轉(zhuǎn)的實(shí)現(xiàn)示例

更新時(shí)間：2020年08月21日 14:33:24 作者：夏小夏

這篇文章主要介紹了flutter 路由跳轉(zhuǎn)的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

路由

做Android/iOS原生開(kāi)發(fā)的時(shí)候，要打開(kāi)一個(gè)新的頁(yè)面，你得知道你的目標(biāo)頁(yè)面對(duì)象，然后初始化一個(gè)Intent或者ViewController，再通過(guò)startActivity或者pushViewController來(lái)推出一個(gè)新的頁(yè)面，不能跟web一樣，直接丟一個(gè)鏈接地址就跳轉(zhuǎn)到新的頁(yè)面。當(dāng)然，可以自己去加一個(gè)中間層來(lái)實(shí)現(xiàn)這些功能。
Flutter里面是原生支持路由的。Flutter的framework提供了路由跳轉(zhuǎn)的實(shí)現(xiàn)。我們可以直接使用這些功能。

Flutter路由介紹

Flutter里面有路由支持所有的路由場(chǎng)景，push、pop頁(yè)面，頁(yè)面間的參數(shù)傳遞等等。flutter里面的路由可以分成兩種，一種是直接注冊(cè)，不能傳遞參數(shù)。另一種要自己構(gòu)造實(shí)例，可以傳遞參數(shù)。我們暫時(shí)把它們規(guī)為靜態(tài)路由和動(dòng)態(tài)路由。

單頁(yè)面路由跳轉(zhuǎn)時(shí)注意不要有兩個(gè)materialapp，因?yàn)閷?dǎo)航是依賴(lài)于這個(gè)的，有兩個(gè)，就會(huì)有兩個(gè)導(dǎo)航

一、兩種路由傳參方法： DetailScreen跳轉(zhuǎn)的路由組件

1.直接向路由子組件構(gòu)造函數(shù)傳參

Navigator.push(
  context,
  MaterialPageRoute(
     builder: (context) => DetailScreen(todo: todos[index]),
   ),
 );
1.通過(guò)RouteSettings傳遞參數(shù)
Navigator.push(
   context,
   MaterialPageRoute(
      builder: (context) => DetailScreen(),
      settings: RouteSettings(
        arguments: todos[index],
       ),
    ),
 );

二、定義路由：

1、在 MaterialApp 中添加屬性：

 initialRoute 和 routes 來(lái)定義我們的路由
new MaterialApp(
   initialRoute: '/',
   routes: {
    '/': (context) => TodosScreen(todos: todos),
    '/detail': (context) => DetailScreen(),
   },
   title: 'ssss',
);

但要注意的是：當(dāng)使用 initialRoute 時(shí)，需要確保你沒(méi)有同時(shí)定義 home 屬性。

2、給特定的 route 傳參：

1) 定義需要傳遞的參數(shù)

class ScreenArguments {
 final String title;
 final String message;
 ScreenArguments(this.title, this.message);
}

2) 創(chuàng)建組件來(lái)獲取參數(shù)

class ExtractArgumentsScreen extends StatelessWidget {
 static const routeName = '/extractArguments';
 @override
 Widget build(BuildContext context) {
  final ScreenArguments args = ModalRoute.of(context).settings.arguments;
  return Scaffold(
  );
 }
}

3) 把組件注冊(cè)到路由表中

MaterialApp(
 routes: {
  ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
 },
);

4) 導(dǎo)航到組件

RaisedButton(
 onPressed: () {
  Navigator.pushNamed(
   context,
   ExtractArgumentsScreen.routeName,
   arguments: ScreenArguments(
    'Extract Arguments Screen',
    'This message is extracted in the build method.',
   ),
  );
 },
),

5) onGenerateRoute 提取參數(shù)

MaterialApp(
 onGenerateRoute: (settings) {
  if (settings.name == PassArgumentsScreen.routeName) {
   final ScreenArguments args = settings.arguments;
   return MaterialPageRoute(
    builder: (context) {
     return PassArgumentsScreen(
      title: args.title,
      message: args.message,
     );
    },
   );
  }
 },
);

到此這篇關(guān)于flutter 路由跳轉(zhuǎn)的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)flutter 路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: