Flutter 使用Navigator進(jìn)行局部跳轉(zhuǎn)頁(yè)面的方法
Navigator組件使用的頻率不是很高,但在一些場(chǎng)景下非常適用,比如局部表單多頁(yè)填寫(xiě)、底部導(dǎo)航一直存在,每個(gè)tab各自導(dǎo)航場(chǎng)景。
Navigator 是管理路由的控件,通常情況下直接使用Navigator.of(context)
的方法來(lái)跳轉(zhuǎn)頁(yè)面,之所以可以直接使用Navigator.of(context)
是因?yàn)樵?code>WidgetsApp中使用了此控件,應(yīng)用程序的根控件通常是MaterialApp
,MaterialApp
包含WidgetsApp
,所以可以直接使用Navigator的相關(guān)屬性。
Navigator用法非常簡(jiǎn)單,如下:
Navigator( initialRoute: '/', onGenerateRoute: (RouteSettings settings) { WidgetBuilder builder; switch (settings.name) { case 'home': builder = (context) => PageA(); break; case 'user': builder = (context) => PageB(); break; } return MaterialPageRoute(builder: builder, settings: settings); }, )
initialRoute
表示初始化路由,onGenerateRoute
表示根據(jù)RouteSettings生成路由。
那么在什么情況下需要使用Navigator?在需要局部頁(yè)面跳轉(zhuǎn)的地方使用Navigator,如下面的場(chǎng)景:
頭條客戶(hù)端舉報(bào)場(chǎng)景
頭條客戶(hù)端每一個(gè)新聞下面都有一個(gè)“叉號(hào)”,點(diǎn)擊彈出相關(guān)信息,點(diǎn)擊其中的局部,會(huì)在當(dāng)前小窗戶(hù)內(nèi)跳轉(zhuǎn)到舉報(bào)頁(yè)面,效果如下:
此場(chǎng)景就是使用Navigator的典型場(chǎng)景,點(diǎn)擊舉報(bào),并不是全屏切換頁(yè)面,而是僅僅在當(dāng)前彈出的頁(yè)面進(jìn)行切換。
首頁(yè)代碼如下:
@override Widget build(BuildContext context) { return Center( child: Container( height: 350, width: 300, child: Navigator( initialRoute: '/', onGenerateRoute: (RouteSettings settins) { WidgetBuilder builder; switch (settins.name) { case '/': builder = (context) => PageC(); break; } return MaterialPageRoute(builder: builder); }, ), ), ); }
Navigator
的初始化路由為PageC頁(yè)面,PageC頁(yè)面代碼如下:
class PageC extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Card( child: Column( children: <Widget>[ _buildItem(Icons.clear, '不感興趣', '減少這類(lèi)內(nèi)容'), Divider(), _buildItem(Icons.access_alarm, '舉報(bào)', '標(biāo)題夸張,內(nèi)容質(zhì)量差 等', showArrow: true, onPress: () { Navigator.of(context).push(MaterialPageRoute(builder: (context) { return PageD(); })); }), Divider(), _buildItem(Icons.perm_identity, '拉黑作者:新華網(wǎng)客戶(hù)端', ''), Divider(), _buildItem(Icons.account_circle, '屏蔽', '軍事視頻、駕駛員等'), ], ), ), ); } _buildItem(IconData iconData, String title, String content, {bool showArrow = false, Function onPress}) { return Row( children: <Widget>[ Icon(iconData), SizedBox( width: 20, ), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( title, style: TextStyle(fontSize: 18), ), Text( content, style: TextStyle( color: Colors.black.withOpacity(.5), fontSize: 14), ) ], ), ), !showArrow ? Container() : IconButton( icon: Icon(Icons.arrow_forward_ios), iconSize: 16, onPressed: onPress, ), ], ); } }
PageC頁(yè)面跳轉(zhuǎn)到PageD頁(yè)面,PageD頁(yè)面代碼如下:
class PageD extends StatelessWidget { @override Widget build(BuildContext context) { return Container( height: 200, width: 250, color: Colors.grey.withOpacity(.5), child: Column( children: <Widget>[ Row( children: <Widget>[ IconButton( icon: Icon(Icons.arrow_back_ios), onPressed: () { Navigator.of(context).pop(); }, ), Text('返回'), SizedBox( width: 30, ), Text('舉報(bào)'), ], ), ], ), ); } }
最終實(shí)現(xiàn)了局部跳轉(zhuǎn)效果,只在中間區(qū)域變化,其他區(qū)域不變。
Tab內(nèi)跳轉(zhuǎn)
還有一個(gè)典型到應(yīng)用場(chǎng)景就Tab內(nèi)跳轉(zhuǎn),效果如下:
底部導(dǎo)航一直存在,每個(gè)tab都有自己的導(dǎo)航器。
首頁(yè)代碼如下:
class TabMain extends StatefulWidget { @override State<StatefulWidget> createState() => _TabMainState(); } class _TabMainState extends State<TabMain> { int _currentIndex = 0; @override Widget build(BuildContext context) { return Scaffold( body: IndexedStack( index: _currentIndex, children: <Widget>[ TabNavigator(0), TabNavigator(1), TabNavigator(2), ], ), bottomNavigationBar: BottomNavigationBar( onTap: (int index) { setState(() { _currentIndex = index; }); }, currentIndex: _currentIndex, items: <BottomNavigationBarItem>[ BottomNavigationBarItem(title: Text('首頁(yè)'), icon: Icon(Icons.home)), BottomNavigationBarItem(title: Text('書(shū)籍'), icon: Icon(Icons.book)), BottomNavigationBarItem( title: Text('我的'), icon: Icon(Icons.perm_identity)), ], ), ); } }
首頁(yè)定義了3個(gè)tab及切換效果。
定義TabNavigator:
class TabNavigator extends StatelessWidget { TabNavigator(this.index); final int index; @override Widget build(BuildContext context) { return Navigator( initialRoute: '/', onGenerateRoute: (RouteSettings settins) { WidgetBuilder builder; switch (settins.name) { case '/': builder = (context) => ListPage(index); break; } return MaterialPageRoute(builder: builder); }, ); } }
列表頁(yè)面,此頁(yè)面一般為L(zhǎng)ist頁(yè)面,點(diǎn)擊其中一個(gè)跳轉(zhuǎn)到相關(guān)詳情頁(yè)面,這里為了簡(jiǎn)便,只放了一個(gè)跳轉(zhuǎn)按鈕:
class ListPage extends StatelessWidget { ListPage(this.index); final int index; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Center( child: RaisedButton( child: Text('$index'), onPressed: () { Navigator.of(context).push(MaterialPageRoute(builder: (context) { return DetailPage(); })); }, ), ), ); } }
詳情頁(yè)面
class DetailPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Center( child: Text('DetailPage'), ), ); } }
雖然Navigator控件不是特別常用,但在一些場(chǎng)景下非常適用。
總結(jié)
到此這篇關(guān)于Flutter 使用Navigator進(jìn)行局部跳轉(zhuǎn)頁(yè)面的文章就介紹到這了,更多相關(guān)Flutter 使用Navigator進(jìn)行局部跳轉(zhuǎn)頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
android仿音悅臺(tái)頁(yè)面交互效果實(shí)例代碼
這篇文章主要介紹了android 仿音悅臺(tái)頁(yè)面播放效果實(shí)例代碼,新版的音悅臺(tái) APP 播放頁(yè)面交互非常有意思,可以把播放器往下拖動(dòng),然后在底部懸浮一個(gè)小框,還可以左右拖動(dòng)。2017-01-01android獲取當(dāng)前手機(jī)號(hào)示例程序
這篇文章主要介紹了android如何獲取當(dāng)前手機(jī)號(hào)的方法,大家參考使用吧2013-11-11Flutter實(shí)現(xiàn)自定義篩選框的示例代碼
本文主要介紹了Flutter實(shí)現(xiàn)自定義篩選框的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07Android BroadcastReceiver傳輸機(jī)制詳解
Android開(kāi)發(fā)的四大組件分別是:活動(dòng)(activity),用于表現(xiàn)功能;服務(wù)(service),后臺(tái)運(yùn)行服務(wù),不提供界面呈現(xiàn);廣播接受者(Broadcast Receive),勇于接收廣播;內(nèi)容提供者(Content Provider),支持多個(gè)應(yīng)用中存儲(chǔ)和讀取數(shù)據(jù),相當(dāng)于數(shù)據(jù)庫(kù),本篇著重介紹廣播組件2023-01-01Android DigitalClock組件用法實(shí)例
這篇文章主要介紹了Android DigitalClock組件用法,結(jié)合實(shí)例形式分析了DigitalClock組件的布局調(diào)用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-01-01Android快速實(shí)現(xiàn)無(wú)預(yù)覽拍照功能
這篇文章主要為大家詳細(xì)介紹了Android快速實(shí)現(xiàn)無(wú)預(yù)覽拍照功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06用Android Studio3.0新功能加快構(gòu)建速度
本文主要介紹了使用Android Studio3.0新功能,加快Android Studio的構(gòu)建速度等相關(guān)做法。2017-11-11Android AndBase框架使用封裝好的函數(shù)完成Http請(qǐng)求(三)
這篇文章主要介紹了Android AndBase框架使用封裝好的函數(shù)完成Http請(qǐng)求的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-03-03