路由
做Android/iOS原生開發的時候，要打開一個新的頁面，你得知道你的目標頁面對象，然后初始化一個Intent或者ViewController，再通過startActivity或者pushViewController來推出一個新的頁面，不能跟web一樣，直接丟一個鏈接地址就跳轉到新的頁面。當然，可以自己去加一個中間層來實現這些功能。
Flutter里面是原生支持路由的。Flutter的framework提供了路由跳轉的實現。我們可以直接使用這些功能。
Flutter路由介紹
Flutter里面有路由支持所有的路由場景，push、pop頁面，頁面間的參數傳遞等等。flutter里面的路由可以分成兩種，一種是直接注冊，不能傳遞參數。另一種要自己構造實例，可以傳遞參數。我們暫時把它們規為靜態路由和動態路由。
單頁面路由跳轉時注意不要有兩個materialapp，因為導航是依賴于這個的，有兩個，就會有兩個導航
一、兩種路由傳參方法： DetailScreen跳轉的路由組件
1.直接向路由子組件構造函數傳參
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(todo: todos[index]),
),
);
1.通過RouteSettings傳遞參數
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(),
settings: RouteSettings(
arguments: todos[index],
),
),
);
二、定義路由：
1、在 MaterialApp 中添加屬性：
initialRoute 和 routes 來定義我們的路由
new MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => TodosScreen(todos: todos),
'/detail': (context) => DetailScreen(),
},
title: 'ssss',
);
但要注意的是：當使用 initialRoute 時，需要確保你沒有同時定義 home 屬性。
2、 給特定的 route 傳參：
1) 定義需要傳遞的參數
class ScreenArguments {
final String title;
final String message;
ScreenArguments(this.title, this.message);
}
2) 創建組件來獲取參數
class ExtractArgumentsScreen extends StatelessWidget {
static const routeName = '/extractArguments';
@override
Widget build(BuildContext context) {
final ScreenArguments args = ModalRoute.of(context).settings.arguments;
return Scaffold(
);
}
}
3) 把組件注冊到路由表中
MaterialApp(
routes: {
ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
},
);
4) 導航到組件
RaisedButton(
onPressed: () {
Navigator.pushNamed(
context,
ExtractArgumentsScreen.routeName,
arguments: ScreenArguments(
'Extract Arguments Screen',
'This message is extracted in the build method.',
),
);
},
),
5) onGenerateRoute 提取參數
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,
);
},
);
}
},
);
到此這篇關于flutter 路由跳轉的實現示例的文章就介紹到這了,更多相關flutter 路由跳轉內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
