Flutter路由跳轉(zhuǎn)參數(shù)處理技巧詳解
需求
我們?cè)陂_發(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字段
沒錯(cuò),直接賦值arguments字段就可以了,那么我們?nèi)绾潍@取呢?
在第二個(gè)頁面中
class TwoPage extends StatelessWidget { @override Widget build(BuildContext context) { // 從路由設(shè)置中獲取傳遞的參數(shù) var arguments = ModalRoute.of(context)?.settings.arguments; // 其他部分的代碼... } }
我們需要通過 ModalRoute.of(context)?.settings.arguments獲取數(shù)據(jù),那么我們直接在 initState方法中直接通過 ModalRoute.of(context)?.settings.arguments獲取,會(huì)報(bào)錯(cuò)
這里出錯(cuò)原因,可以通過錯(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(); }
重寫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
///第二頁 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: "第二頁", onBack: () { Navigator.pop(context); }, ), body: Center( child: Text(result), ), ); } }
這樣就OK了,好像沒講啥,直接看代碼吧。
詳細(xì)代碼見: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 dialog邊框去除白色邊框?qū)崿F(xiàn)思路及代碼
android dialog邊框含有白色真是美中不足啊,本文將介紹如何去除白色邊框,有思路及代碼,感興趣的朋友可以了解下2013-01-01Android實(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)的首頁左右滑動(dòng)切換功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)的首頁左右滑動(dòng)切換功能,涉及Android事件監(jiān)聽及響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-07-07