Flutter学习笔记（15）--MaterialApp应用组件及routes路由详解
如需轉(zhuǎn)載，請(qǐng)注明出處：Flutter學(xué)習(xí)筆記（15）--MaterialApp應(yīng)用組件及routes路由詳解
最近一段時(shí)間生病了，整天往醫(yī)院跑，也沒狀態(tài)學(xué)東西了，現(xiàn)在是好了不少了，也該繼續(xù)學(xué)習(xí)啦！！！
今天給大家講一下MaterialApp應(yīng)用組件及routes路由詳解，我會(huì)著重說一下routes路由的使用及解釋，因?yàn)闀?huì)經(jīng)常用到，前面我寫的一些demo所涉及到的組件，都是遵循著Material Design設(shè)計(jì)風(fēng)格，所謂的Material Design是由Goodle推出的全新的設(shè)計(jì)語言，這種設(shè)計(jì)旨在為手機(jī)、平板電腦、臺(tái)式機(jī)和其他平臺(tái)更一致、更廣泛的外觀和感覺，接下來我們看一下常見的Material Design風(fēng)格組件：
| 組件名稱 | 中文名稱 | 簡(jiǎn)單說明 |
| Appbar | 應(yīng)用按鈕組件 | 應(yīng)用的工具按鈕 |
| AlertDialog | 對(duì)話框組件 | 有操作按鈕的對(duì)話框 |
| BottomNavigationBar | 底部導(dǎo)航組件 | 底部導(dǎo)航條，可以很容易的在tab之間切換和瀏覽頂級(jí)試圖 |
| Card | 卡片組件 | 帶有邊框陰影的卡片組件 |
| Drawer | 抽屜組件 | Drawer抽屜組件可以實(shí)現(xiàn)類似抽屜拉開關(guān)閉的效果 |
| FloatingActionButton | 懸浮按鈕組件 | 應(yīng)用的主要功能操作按鈕 |
| FlatButton | 扁平按鈕組件 | 扁平化風(fēng)格的按鈕 |
| MaterialApp | Material應(yīng)用組件 | MaterialApp代表使用紙墨設(shè)計(jì)風(fēng)格的應(yīng)用 |
| PopupMenuButton | 彈出菜單組件 | 彈出菜單按鈕 |
| Scaffold | 腳手架組件 | 實(shí)現(xiàn)了基本的Material Design布局 |
| SnackBar | 輕量提示組件 | 一個(gè)輕量消息提示組件，在屏幕的底部顯示 |
| SimpileDialog | 簡(jiǎn)單對(duì)話框組件 | 簡(jiǎn)單對(duì)話框組件。只起提示作用，沒有交互 |
| TabBar | 水平選項(xiàng)卡及視圖組件 | 一個(gè)顯示水平選項(xiàng)卡的Material Design組件 |
| TextField | 文本框組件 | 可以接受應(yīng)用輸入文本的組件 |
Material Design風(fēng)格的組件有這么多，不看不知道，一看嚇一跳，這基本上都沒有用過呀，漫漫長(zhǎng)征路，還有很遠(yuǎn)要走呀，一個(gè)一個(gè)學(xué)吧！！！
MaterialApp（應(yīng)用組件）
| 屬性名 | 類型 | 說明 |
| title | String | 應(yīng)用程序的標(biāo)題，該標(biāo)題出現(xiàn)在如下位置Android：任務(wù)管理器的程序快照之上，iOS：程序切換管理器中 |
| theme | ThemeData | 定義應(yīng)用所使用的主題顏色，可以制定一個(gè)主題中每個(gè)控件的顏色 |
| color | Color | 應(yīng)用的主要顏色值，即primary color |
| home | Widget | 這個(gè)是一個(gè)Widget對(duì)象，用來定義一個(gè)主題中每個(gè)控件的顏色 |
| routes | Map<String，WidgetBuilder> | 定義應(yīng)用中頁面跳轉(zhuǎn)的原則 |
| initialRoute | String | 初始化路由 |
| onGenerateRoute | RouteFactory | 路由回調(diào)函數(shù)，當(dāng)通過Nacigator.of(context).pushNamed跳轉(zhuǎn)路由時(shí)，在routes查找不到時(shí)，會(huì)調(diào)用該方法 |
| onLocaleChanged | 當(dāng)系統(tǒng)需改語言的時(shí)候，會(huì)觸發(fā)這個(gè)回調(diào) | |
| nagavitorObserver | List<NavigatorObserver> | 導(dǎo)航觀察器 |
| debugShowMaterialGird | bool | 是否顯示紙墨設(shè)計(jì)基礎(chǔ)布局網(wǎng)格，用來調(diào)試UI的工具 |
| showPerformanceOverlay | bool | 顯示性能標(biāo)簽 |
具體看下代碼應(yīng)用：
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
//這個(gè)是整個(gè)應(yīng)用的主組件
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: 'MaterialApp示例',
debugShowMaterialGrid: true,
showPerformanceOverlay: true,
theme: new ThemeData(
primaryColor: Colors.deepOrange
),
home: new MaterialAppDemo(),
);
}
}
class MaterialAppDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: Text('MaterialAppDemo'),
),
body: new Center(
child: new Text('MaterialAppDemo'),
),
);
}
}
效果圖：
demo里面我主要嘗試了title、theme、home、debugShowMaterialGird、showPerformanceOverlay屬性，根據(jù)截圖，給大家直觀的對(duì)比一下結(jié)果：
title：應(yīng)用程序的標(biāo)題（因?yàn)槲抑挥蠥ndroid測(cè)試機(jī)），可以看到第二張截圖，切到任務(wù)管理器，應(yīng)用程序的標(biāo)題為MaterialApp示例。
theme：我用theme更改了應(yīng)用主題的顏色，可以看到第一張截圖導(dǎo)航欄的顏色改為了橙色。
home：home代表著整個(gè)頁面的主widget，可以理解為根widget，而home的主體就是一個(gè)Center容器組件，然后里面放一個(gè)文本。
debugShowMaterialGird：這個(gè)屬性我們?cè)O(shè)置為了true，頁面展示出來會(huì)有很多網(wǎng)格，用于調(diào)試UI（這個(gè)要怎么用來調(diào)試UI，小弟還不會(huì)。。。）
showPerformanceOverlay：性能標(biāo)簽，這個(gè)設(shè)置為true，在頁面的最上方會(huì)出現(xiàn)一些性能相關(guān)的數(shù)據(jù)。
routes（路由處理）
routes對(duì)象是一個(gè)Map<String，WidgetBuilder>，當(dāng)使用Navigator.pushName來路由的時(shí)候，會(huì)在routes查找路由的名字，然后使用對(duì)應(yīng)的WidgetBuilder來構(gòu)造一個(gè)帶有頁面切換動(dòng)畫的MaterialPageRoute。
下面我著重講一下routes路由處理，因?yàn)槲矣X得頁面間的跳轉(zhuǎn)是最常用到的，而且很重要，下面的demo主要功能是在A頁面點(diǎn)擊一個(gè)按鈕跳轉(zhuǎn)到B頁面，并且兩個(gè)頁面間傳值。
注：路由跳轉(zhuǎn)分靜態(tài)路由跳轉(zhuǎn)和動(dòng)態(tài)路由跳轉(zhuǎn)，兩者的區(qū)別就是是否給第二個(gè)頁面?zhèn)髦?/p>
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: 'theme Title',
debugShowMaterialGrid: false,
home: new Scaffold(
appBar: new AppBar(
leading: Icon(Icons.menu),
actions: <Widget>[
Icon(Icons.search)
],
title: new Text('routes demo'),
),
body: new Center(
child: new Text('主頁'),
),
),
routes: {
'/first':(BuildContext context) => new FirstPage(),
'/second':(BuildContext context) => new SecondPage(""),
},
initialRoute: '/first',//初始化路由為first頁面
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('First Page'),
),
body: new Center(
child: RaisedButton(
child: new Text('第一個(gè)頁面'),
onPressed: (){
//靜態(tài)路由跳轉(zhuǎn)，不給第二個(gè)頁面?zhèn)髦?// Navigator.pushNamed(context, '/second').then((value){
// Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
// });
//動(dòng)態(tài)路由跳轉(zhuǎn)，給第二個(gè)頁面?zhèn)髦? Navigator.of(context).push(new MaterialPageRoute(builder: (context){
return new SecondPage('這是從第一個(gè)頁面?zhèn)鬟f出去的數(shù)據(jù)');
})).then((value){
Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
});
}
),
),
);
}
}
class SecondPage extends StatelessWidget {
var content = '';
SecondPage(this.content);
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('Second Page'),
),
body: new RaisedButton(
child: new Text(content),
onPressed: (){
// Navigator.pop(context);//不給上一級(jí)頁面返回參數(shù)
Navigator.of(context).pop("這個(gè)是從第二個(gè)頁面返回的數(shù)據(jù)");//給上一級(jí)頁面返回參數(shù)
}
),
);
}
}
效果截圖：
來細(xì)講一下上面的代碼吧，要不然還真容易看懵逼了。
1.首先初始化路由列表，為后面頁面跳轉(zhuǎn)做準(zhǔn)備，路由列表對(duì)應(yīng)這每一個(gè)頁面
routes: {
'/first':(BuildContext context) => new FirstPage(),
'/second':(BuildContext context) => new SecondPage(""),
},
2.靜態(tài)路由跳轉(zhuǎn)，靜態(tài)由A頁面跳轉(zhuǎn)到B頁面，不給B頁面?zhèn)髦担墙邮誃頁面返回的數(shù)據(jù)，并將返回值toast出來，即圖3
Navigator.pushNamed(context, '/second').then((value){
Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
});
3.動(dòng)態(tài)路由跳轉(zhuǎn)，A頁面跳轉(zhuǎn)到B頁面，并給B頁面?zhèn)髦担瑢頁面的按鈕文案賦值，從B頁面返回后，將B頁面的返回值toast出來，即圖2，圖3
Navigator.of(context).push(new MaterialPageRoute(builder: (context){
return new SecondPage('這是從第一個(gè)頁面?zhèn)鬟f出去的數(shù)據(jù)');
})).then((value){
Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
});
4.由B頁面帶數(shù)據(jù)返回到A頁面（頁面Pop返回有兩類，一類帶參數(shù)返回，一類不帶參數(shù)返回）
4.1帶參數(shù)返回
Navigator.of(context).pop("這個(gè)是從第二個(gè)頁面返回的數(shù)據(jù)");//給上一級(jí)頁面返回參數(shù)
4.2不帶參數(shù)返回
Navigator.pop(context);//不給上一級(jí)頁面返回參數(shù)
注：頁面Pop還有兩個(gè)方法常用到
Navigator.canPop(context);//頁面是否可以pop，返回bool值，可以用作頁面判斷 Navigator.maybePop(context);//如果當(dāng)前頁面可以pop，則會(huì)執(zhí)行，反之則不會(huì)執(zhí)行，更安全
以上就是今天的全部?jī)?nèi)容了，稍微難一點(diǎn)的就是路由這塊兒了，我寫的demo還是很簡(jiǎn)單的，頁面跳轉(zhuǎn)傳值只是字符串，在項(xiàng)目中還會(huì)遇到其他類型的數(shù)據(jù)參數(shù)，暫時(shí)就先不研究了，等用到的時(shí)候在具體細(xì)看吧，上面的內(nèi)容，如果各位有任何疑問，或者發(fā)現(xiàn)有錯(cuò)誤的地方，還望留言！！！
下一章節(jié)：Flutter學(xué)習(xí)筆記（16）--Scaffold腳手架、AppBar組件、BottomNavigationBar組件
總結(jié)
以上是生活随笔為你收集整理的Flutter学习笔记（15）--MaterialApp应用组件及routes路由详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： glide缩略图存储 android,G
- 下一篇： mysql语句在node.js中的写法