Flutter路由跳轉(zhuǎn)參數(shù)處理技巧詳解
需求
我們?cè)陂_(kāi)發(fā)應(yīng)用中,經(jīng)常會(huì)出現(xiàn)一個(gè)界面跳轉(zhuǎn)到另外一個(gè)界面并帶有參數(shù)傳遞,在Android中大家都知道使用Intent傳遞參數(shù),在第二個(gè)Activity中onCreate中可以獲取到這個(gè)參數(shù)。
實(shí)現(xiàn)
那么在Flutter中,我們經(jīng)常會(huì)使用路由跳轉(zhuǎn)到另外一個(gè)界面,那么如果這個(gè)時(shí)候需要傳參。
代碼如下:
/// 路由跳轉(zhuǎn)并帶參數(shù) Navigator.pushNamed( context, RouteConst.routeNext, arguments: (TestArguments("一笑輪回", "江蘇省徐州市")), ); /// 測(cè)試數(shù)據(jù)模型 class TestArguments { String? name; String? address; TestArguments(this.name, this.address); }
賦值arguments字段
沒(méi)錯(cuò),直接賦值arguments字段就可以了,那么我們?nèi)绾潍@取呢?
在第二個(gè)頁(yè)面中
class TwoPage extends StatelessWidget { @override Widget build(BuildContext context) { // 從路由設(shè)置中獲取傳遞的參數(shù) var arguments = ModalRoute.of(context)?.settings.arguments; // 其他部分的代碼... } }
我們需要通過(guò) ModalRoute.of(context)?.settings.arguments獲取數(shù)據(jù),那么我們直接在 initState方法中直接通過(guò) ModalRoute.of(context)?.settings.arguments獲取,會(huì)報(bào)錯(cuò)
這里出錯(cuò)原因,可以通過(guò)錯(cuò)誤并查看源碼可知,這里部講述。
我們有的時(shí)候需要在initState方法中獲取數(shù)據(jù)并處理一些事情,我們應(yīng)該怎么做呢?
下面提供一個(gè)小技巧。
路由定義
class RouteConst { static const routeNext = "/route_next"; } class RoutePathConst { static var routePaths = <String, Widget Function(BuildContext context)>{ RouteConst.routeNext: (context) => ArgumentsNextPage(), }; }
跳轉(zhuǎn)代碼
Navigator.pushNamed( context, RouteConst.routeNext, arguments: (TestArguments("一笑輪回", "江蘇省徐州市")), ); /// 測(cè)試數(shù)據(jù)模型 class TestArguments { String? name; String? address; TestArguments(this.name, this.address); }
定義ArgumentsMixin
/// Arguments參數(shù)數(shù)據(jù) mixin ArgumentsMixin { late final Object? arguments; } /// 路由拼接的參數(shù)數(shù)據(jù) mixin RouteQueryMixin { final Map<String, String> routeParams = HashMap(); }
重寫(xiě)onGenerateRoute
void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( ... onGenerateRoute: (settings) { var uri = Uri.parse(settings.name ?? ""); var route = uri.path; var params = uri.queryParameters; if (!RoutePathConst.routePaths.containsKey(route)) { return null; } return MaterialPageRoute( builder: (context) { var widgetBuilder = RoutePathConst.routePaths[route]; var widget = widgetBuilder!(context); if (widget is RouteQueryMixin) { (widget as RouteQueryMixin).routeParams.addAll(params); } if (widget is ArgumentsMixin) { (widget as ArgumentsMixin).arguments = settings.arguments; } return widget; }, settings: settings, ); }, ); } }
創(chuàng)建ArgumentsNextPage
///第二頁(yè) class ArgumentsNextPage extends StatefulWidget with ArgumentsMixin, RouteQueryMixin { ArgumentsNextPage({super.key}); @override State<ArgumentsNextPage> createState() => _ArgumentsNextPageState(); } class _ArgumentsNextPageState extends State<ArgumentsNextPage> { /// 傳參數(shù)據(jù)文本 String get result { // Arguments傳參數(shù)據(jù) TestArguments? arguments; if (widget.arguments != null && widget.arguments is TestArguments) { arguments = widget.arguments as TestArguments; } // 路由拼接的數(shù)據(jù) var params = widget.routeParams; // 拼接結(jié)果數(shù)據(jù) return "arguments:name=${arguments?.name ?? ""} address=${arguments?.address ?? ""} \nrouteParams=$params"; } @override void initState() { super.initState(); print("result=$result}"); } @override Widget build(BuildContext context) { return Scaffold( appBar: XYAppBar( title: "第二頁(yè)", onBack: () { Navigator.pop(context); }, ), body: Center( child: Text(result), ), ); } }
這樣就OK了,好像沒(méi)講啥,直接看代碼吧。
詳細(xì)代碼見(jiàn):github/yixiaolunhui/flutter_xy
以上就是Flutter路由跳轉(zhuǎn)參數(shù)處理技巧詳解的詳細(xì)內(nèi)容,更多關(guān)于Flutter路由跳轉(zhuǎn)參數(shù)處理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Recyclerview添加頭布局和尾布局、item點(diǎn)擊事件詳解
這篇文章主要為大家詳細(xì)介紹了Recyclerview添加頭布局和尾布局、item點(diǎn)擊事件的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08android 多線(xiàn)程技術(shù)應(yīng)用
能夠在屏幕上“實(shí)時(shí)地顯示”時(shí)間的流逝,單線(xiàn)程程序是無(wú)法實(shí)現(xiàn)的,必須要多線(xiàn)程程序才可以實(shí)現(xiàn),即便有些計(jì)算機(jī)語(yǔ)言可以通過(guò)封裝好的類(lèi)實(shí)現(xiàn)這一功能,但從本質(zhì)上講這些封裝好的類(lèi)就是封裝了一個(gè)線(xiàn)程,具體祥看本文2012-12-12android dialog邊框去除白色邊框?qū)崿F(xiàn)思路及代碼
android dialog邊框含有白色真是美中不足啊,本文將介紹如何去除白色邊框,有思路及代碼,感興趣的朋友可以了解下2013-01-01Android開(kāi)發(fā)之軟鍵盤(pán)用法實(shí)例分析
這篇文章主要介紹了Android開(kāi)發(fā)之軟鍵盤(pán)用法,實(shí)例分析了Android軟鍵盤(pán)的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-05-05Android實(shí)現(xiàn)調(diào)用攝像頭拍照并存儲(chǔ)照片
本文主要介紹了如何利用Android調(diào)用攝像頭拍照,并顯示拍照后的圖片到ImageView中,文中的示例代碼講解詳細(xì),感興趣的可以動(dòng)手試一試2022-01-01Android實(shí)現(xiàn)動(dòng)態(tài)自動(dòng)匹配輸入的內(nèi)容
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)動(dòng)態(tài)自動(dòng)匹配輸入的內(nèi)容,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08Android編程實(shí)現(xiàn)的首頁(yè)左右滑動(dòng)切換功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)的首頁(yè)左右滑動(dòng)切換功能,涉及Android事件監(jiān)聽(tīng)及響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-07-07