flutter 路由

Flutter · 發表 2019-04-10 14:36:04

摘要： push 將設定的router資訊推送到Navigator上，實現頁面跳轉。 of 主要是獲取 Navigator最近例項的好狀態。 pop 導航到新頁面，或者返回到上個頁面。 canPop 判斷是否可以導航到新頁面 maybePop 可能會導航到新頁...

push 將設定的router資訊推送到Navigator上，實現頁面跳轉。
of 主要是獲取 Navigator最近例項的好狀態。
pop 導航到新頁面，或者返回到上個頁面。
canPop 判斷是否可以導航到新頁面
maybePop 可能會導航到新頁面
popAndPushNamed 指定一個路由路徑，並導航到新頁面。
popUntil 反覆執行pop 直到該函式的引數predicate返回true為止。
pushAndRemoveUntil 將給定路由推送到Navigator，刪除先前的路由，直到該函式的引數predicate返回true為止。
pushNamed 將命名路由推送到Navigator。
pushNamedAndRemoveUntil 將命名路由推送到Navigator，刪除先前的路由，直到該函式的引數predicate返回true為止。
pushReplacement 路由替換。
pushReplacementNamed 這個也是替換路由操作。推送一個命名路由到Navigator，新路由完成動畫之後處理上一個路由。
removeRoute 從Navigator中刪除路由，同時執行Route.dispose操作。
removeRouteBelow 從Navigator中刪除路由，同時執行Route.dispose操作，要替換的路由是傳入引數anchorRouter裡面的路由。
replace 將Navigator中的路由替換成一個新路由。
replaceRouteBelow 將Navigator中的路由替換成一個新路由，要替換的路由是是傳入引數anchorRouter裡面的路由。

push

// 不傳參
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SecondScreen()),
);

//傳參
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new ContentScreen(articles[index]),
),
);
// 不同寫法
Navigator.push<String>(context, new MaterialPageRoute(
builder: (BuildContext context) {
return new Add(title: i.toString());
},
));
// 接收
final Article article;
ContentScreen(this.article);

final String title;// 儲存傳遞過來的引數
Add({this.title});
複製程式碼

pop

// 不傳參
Navigator.pop(context);
// 傳參
Navigator.pop(context, 'Like');
// 接收
void add() async{
String result = await Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context) {
return new Add();
},
));

print(result);
}
複製程式碼

定製路由動畫

onTap: () async {
String result = await Navigator.push(
context,
new PageRouteBuilder(
transitionDuration: const Duration(milliseconds: 1000),
pageBuilder: (context, _, __) =>
new ContentScreen(articles[index]),
transitionsBuilder:
(_, Animation<double> animation, __, Widget child) =>
new FadeTransition(
opacity: animation,
child: new RotationTransition(
turns: new Tween<double>(begin: 0.0, end: 1.0)
.animate(animation),
child: child,
),
),
));

if (result != null) {
Scaffold.of(context).showSnackBar(
new SnackBar(
content: new Text("$result"),
duration: const Duration(seconds: 1),
),
);
}
},
複製程式碼

命名導航器路由(MaterialApp)

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Navigation',
initialRoute: '/',
routes: <String, WidgetBuilder>{
'/': (BuildContext context) => new ArticleListScreen(),
'/new': (BuildContext context) => new NewArticle(),
},
);
}
}

// 跳轉
Navigator.of(context).pushNamed('/new');
Navigator.pushNamed(context, '/b');
複製程式碼

pushNamed

普通跳轉

pushReplacementNamed

跳轉新頁面並且替換原頁面，比如登入頁跳轉主頁, 當新的頁面進入後，之前的頁面將執行dispose方法

Navigator.of(context).pushReplacementNamed('/home');
複製程式碼

pushReplacement

同pushReplacementNamed 寫法不同可傳遞引數

Navigator.of(context).pushReplacement(new MaterialPageRoute(builder: (context) => new Home()));
複製程式碼

popAndPushNamed

銷燬當前頁面並跳轉指向新的頁面動畫不太友好

pushNamedAndRemoveUntil

跳轉到新的路由，並且關閉給定路由的之前的所有頁面

指將制定的頁面加入到路由中，然後將其他所有的頁面全部pop, (Route route) => false將確保刪除推送路線之前的所有路線。這時候將開啟一個新的screen4頁面

Navigator.of(context).pushNamedAndRemoveUntil('/home', (route) => route == null);

// 到red為止
Navigator.of(context).pushNamedAndRemoveUntil('/home', ModalRoute.withName('/red'));
複製程式碼

pushAndRemoveUntil

同pushNamedAndRemoveUntil 寫法不同可傳遞引數

Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => new Home()), ModalRoute.withName('/home'));
複製程式碼

popUntil

pop直到...為止

Navigator.of(context).popUntil(ModalRoute.withName('/red'));
複製程式碼

傳參onGenerateRoute

onGenerateRoute ：生成路由的回撥函式，當導航的命名路由的時候，會使用這個來生成介面

// 跳轉
Navigator.of(context).pushNamed('/add/' + i.toString());

// 定義
class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'TODO',
theme: new ThemeData(
primaryColor: Colors.purple,
),
home: new Home(),
routes: <String, WidgetBuilder>{
'/add': (context) => new Add()
},
onGenerateRoute: (RouteSettings settings) {
print(settings);
WidgetBuilder builder;
if (settings.name == '/') {
builder = (BuildContext context) => new Add();
} else {
String param = settings.name.split('/')[2];
builder = (BuildContext context) => new Add();
}

return new MaterialPageRoute(builder: builder, settings: settings);
}
);
}
}
複製程式碼