您好,登錄后才能下訂單哦!
這篇文章主要介紹Flutter路由fluro引入配置和使用的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
fluro簡(jiǎn)化了Flutter的路由開發(fā),也是目前Flutter生態(tài)中最成熟的路由框架。
GitHub地址:https://github.com/theyakka/fluro
它出現(xiàn)的比較早啊,是目前用戶最多的Flutter路由解決方案,目前Github上有將近1000Star,可以說(shuō)是相當(dāng)了不起了。
在pubspec.yaml文件里,直接注冊(cè)版本依賴,代碼如下。(注意要最新版)
dependencies: fluro: "^1.5.1"
如果你這個(gè)版本下載不下來(lái),你也可以使用git的方式注冊(cè)依賴,這樣頁(yè)是可以下載包的(這也是小伙伴提的一個(gè)問題),代碼如下:
dependencies: fluro: git: git://github.com/theyakka/fluro.git
在項(xiàng)目的入口文件,也就是main.dart中引入,代碼如下:
import 'package:fluro/fluro.dart';
通過(guò)上面的三步,就算把Fluro引入到項(xiàng)目中了,下面就可以開心的使用了。
現(xiàn)在可以進(jìn)行使用了,使用時(shí)需要先在Build方法里進(jìn)行初始化,其實(shí)就是把對(duì)象new出來(lái)。
final router = Router();
handler相當(dāng)于一個(gè)路由的規(guī)則,比如我們要到詳細(xì)頁(yè)面,這時(shí)候就需要傳遞商品的ID,那就要寫一個(gè)handler。這次我按照大型企業(yè)級(jí)真實(shí)項(xiàng)目開發(fā)來(lái)部署項(xiàng)目目錄和文件,把路由全部分開,Handler單獨(dú)寫成一個(gè)文件。新建一個(gè)routers文件夾,然后新建router_handler.dart文件
import 'package:flutter/material.dart'; import 'package:fluro/fluro.dart'; import '../pages/details_page.dart'; Handler detailsHanderl =Handler( handlerFunc: (BuildContext context,Map<String,List<String>> params){ String goodsId = params['id'].first; print('index>details goodsID is ${goodsId}'); return DetailsPage(goodsId); } );
這樣一個(gè)Handler就寫完了。Hanlder的編寫是路由中最重要的一個(gè)環(huán)境,知識(shí)點(diǎn)也是比較多的,這里我們學(xué)的只是最簡(jiǎn)單的一個(gè)Handler編寫,以后會(huì)隨著課程的增加,我們會(huì)再繼續(xù)深入講解Handler的編寫方法。
Hanlder只是對(duì)每個(gè)路由的獨(dú)立配置文件,fluro當(dāng)然還需要一個(gè)總體配置文件。配置好后,我們還需要一個(gè)靜態(tài)化文件,方便我們?cè)赨I頁(yè)面進(jìn)行使用。
我們還需要對(duì)路由有一個(gè)總體的配置,比如跟目錄,出現(xiàn)不存在的路徑如何顯示,工作中我們經(jīng)常把這個(gè)文件單獨(dú)寫一個(gè)文件。在routes.dart里,新建一個(gè)routes.dart文件。
代碼如下:
import 'package:flutter/material.dart'; import 'package:fluro/fluro.dart'; import './router_handler.dart'; class Routes { //配置類 static String root = '/'; //根目錄 static String detailsPage = '/detail'; //詳情頁(yè)面 //靜態(tài)方法 static void configureRoutes(Router router){//路由配置 //找不到路由 router.notFoundHandler = new Handler( handlerFunc: (BuildContext context,Map<String,List<String>> params){ print('ERROR====>ROUTE WAS NOT FONUND!!!'); } ); //整體配置 router.define(detailsPage, handler: detailsHandler); } }
這一步就是為了使用方便,直接把Router進(jìn)行靜態(tài)化,這樣在任何一個(gè)頁(yè)面都可以直接調(diào)用,不用再New 去調(diào)用了。
在routers下面新建了application.dart文件。代碼如下:
import 'package:fluro/fluro.dart'; class Application{ static Router router; }
靜態(tài)化Router,這樣我們?cè)谑褂玫臅r(shí)候就可以直接用 Application.Router就可以了。
現(xiàn)在我們基本就把Fluro的路由配置好了,這樣的配置雖然稍顯復(fù)雜,但是跟層次和條理化,擴(kuò)展性也很強(qiáng)。
打開main.dart文件,首頁(yè)引入配置文件和靜態(tài)化文件,routes.dart和application.dart,代碼如下:
import './routers/routes.dart'; import './routers/application.dart';
引入后需要進(jìn)行賦值,進(jìn)行注入程序。這里展示主要build代碼。
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //-------------------主要代碼start final router = Router(); //路由初始化 Routes.configureRoutes(router); Application.router = router; //-------------------主要代碼end return Container( child: MaterialApp( title:'百姓生活+', debugShowCheckedModeBanner: false, //----------------主要代碼start onGenerateRoute: Application.router.generator, //路由靜態(tài)化 //----------------主要代碼end theme: ThemeData( primaryColor:Colors.pink, ), home:IndexPage() ), ); } }
上面代碼就是注入整個(gè)程序,讓我們?cè)谌魏雾?yè)面直接引入application.dart就可以使用。
現(xiàn)在要在首頁(yè)里使用路由,直接在首頁(yè)打開商品詳細(xì)頁(yè)面。
先引入application.dart文件:
import './routers/application.dart';
然后再火爆專區(qū)的列表中使用配置好的路由,打開商品詳細(xì)頁(yè)面details_page.dart。
打開home_page.dart文件,找到火爆專區(qū)列表里的ontap事件,然后在ontap事件中直接使用application進(jìn)行跳轉(zhuǎn),代碼如下:
Application.router.navigateTo(context,"/detail?id=${val['goodsId']}");
這時(shí)候可以測(cè)試一下,如果一切正常,應(yīng)該可以打開商品詳細(xì)頁(yè)面了。
以上是“Flutter路由fluro引入配置和使用的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。