前言
寫(xiě)了這么多文章绣否,有翻譯文檔的,有自己理解的洪鸭,也不知道到底是怎么樣的風(fēng)格更能讓人接受样刷,希望大家能給點(diǎn)意見(jiàn)或建議。
正文
一里面已經(jīng)把“頁(yè)面跳轉(zhuǎn)”的操作基本上都說(shuō)完了览爵,那當(dāng)一個(gè)頁(yè)面打開(kāi)后是需要一些返回信息的時(shí)候應(yīng)該怎么做呢置鼻?還是繼續(xù)看原文吧
Routes can return a value route們可以返回一個(gè)值
When a route is pushed to ask the user for a value, the value can be returned via the pop method's result parameter.
Methods that push a route return a Future. The Future resolves when the route is popped and the Future's value is the pop method'sresult
parameter.
For example if we wanted to ask the user to press 'OK' to confirm an operation we couldawait
the result of Navigator.push:
當(dāng)一個(gè)route
加載到頁(yè)面并需要返回一個(gè)值的時(shí)候,這個(gè)值會(huì)在pop
方法返回
Navigator
的push
方法會(huì)返回一個(gè)Future
蜓竹,這個(gè)東西可以在dart
教程里面找到箕母。這個(gè)Future
會(huì)在route
被pop
的時(shí)候處理储藐,而這個(gè)Future
的值就是pop
方法里的result
參數(shù)。
比如嘶是,當(dāng)我們想在用戶(hù)點(diǎn)擊ok
的時(shí)候去確認(rèn)一個(gè)操作钙勃,這個(gè)時(shí)候我們可以await
這個(gè)push
的結(jié)果。await
的用法也可以在dart
的教程里找到聂喇。
bool value = await Navigator.push(context, new MaterialPageRoute<bool>(
builder: (BuildContext context) {
return new Center(
child: new GestureDetector(
child: new Text('OK'),
onTap: () { Navigator.pop(context, true); }
),
);
}
));
上面的代碼辖源,如果用戶(hù)按了ok
鍵,則返回的值是true希太,如果用戶(hù)是按的返回鍵克饶,則返回值是null
When a route is used to return a value, the route's type parameter must match the type of pop's result. That's why we've used
MaterialPageRoute<bool>
instead ofMaterialPageRoute<void>
or justMaterialPageRoute
. (If you prefer to not specify the types, though, that's fine too.)
當(dāng)一個(gè)route
被用來(lái)返回一個(gè)值的時(shí)候,這個(gè)route
的參數(shù)類(lèi)型必須和結(jié)果返回的類(lèi)型一致誊辉,這就是為什么我們用MaterialPageRoute<bool>
而不用MaterialPageRoute<void>
或直接用MaterialPageRoute
矾湃。(如果你就不想指定返回類(lèi)型,也是可以的)
Popup routes “彈出route”
Routes don't have to obscure the entire screen. PopupRoutes cover the screen with a ModalRoute.barrierColor that can be only partially opaque to allow the current screen to show through. Popup routes are "modal" because they block input to the widgets below.
There are functions which create and show popup routes. For example: showDialog, showMenu, and showModalBottomSheet. These functions return their pushed route's Future as described above. Callers can await the returned value to take an action when the route is popped, or to discover the route's value.
There are also widgets which create popup routes, like PopupMenuButton and DropdownButton. These widgets create internal subclasses of PopupRoute and use the Navigator's push and pop methods to show and dismiss them.
Route
并不一定非要跟屏幕一樣大芥映,彈窗可以用ModalRoute.barrierColor
使部分當(dāng)前屏幕不透明洲尊,用來(lái)顯示內(nèi)容。彈窗是一種“模態(tài)”窗口奈偏,因?yàn)樗i定了他下面的控件坞嘀。這里有一些創(chuàng)建和顯示彈窗的方法。比如: showDialog, showMenu, 和 showModalBottomSheet惊来。這些方法的返回的Future
和上面所說(shuō)的是一樣的丽涩。當(dāng)這個(gè)彈窗出棧的時(shí)候,調(diào)用者可以通過(guò)await
拿到這個(gè)返回值裁蚁。
這里還有一些其他的方法來(lái)創(chuàng)建彈窗矢渊。比如:PopupMenuButton and DropdownButton。這些控件也通過(guò)Navigator
的push
和pop
來(lái)控制顯示消失枉证。
Custom routes 自定義route
You can create your own subclass of one of the widget library route classes like PopupRoute, ModalRoute, or PageRoute, to control the animated transition employed to show the route, the color and behavior of the route's modal barrier, and other aspects of the route.
The PageRouteBuilder class makes it possible to define a custom route in terms of callbacks. Here's an example that rotates and fades its child when the route appears or disappears. This route does not obscure the entire screen because it specifiesopaque: false
, just as a popup route does.
你可以創(chuàng)建任何一個(gè)route
的子類(lèi)矮男,并控制他們的動(dòng)畫(huà)、顏色室谚、行為等等毡鉴。PageRouteBuilder
類(lèi)用各種回調(diào)來(lái)控制這些,下面的例子是一個(gè)頁(yè)面以旋轉(zhuǎn)的方式來(lái)顯示和隱藏秒赤。這個(gè)route
不會(huì)讓整個(gè)屏幕變灰猪瞬,因?yàn)樗付?code>opaque:false:
Navigator.push(context, new PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) {
return new Center(child: new Text('My PageRoute'));
},
transitionsBuilder: (___, Animation<double> animation, ____, Widget child) {
return new FadeTransition(
opacity: animation,
child: new RotationTransition(
turns: new Tween<double>(begin: 0.5, end: 1.0).animate(animation),
child: child,
),
);
}
));