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中的写法