Tags： flutter
Material Design風(fēng)格組件
[TOC]
1. 概述
Material Design是由谷歌推出的全新設(shè)計(jì)語(yǔ)言纱耻，這種設(shè)計(jì)語(yǔ)言旨在為手機(jī)任斋、平板電腦香到、臺(tái)式機(jī)和其他平臺(tái)提供更一致脾歇、更廣泛的外觀和感覺蚣录。Material Design風(fēng)格是一直非常有質(zhì)感的設(shè)計(jì)風(fēng)格午衰，并會(huì)提供一些默認(rèn)的交互動(dòng)畫立宜。
2. App結(jié)構(gòu)和導(dǎo)航組件
2.1 MaterialApp(應(yīng)用組件)
MaterialApp代表使用Material Design風(fēng)格的應(yīng)用，里面包含了其他所需的基本控件臊岸。官方提供的示例demo就是從MaterialApp這個(gè)主組件開始的橙数。
MaterialApp組件常見屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| title | String | 應(yīng)用程序的標(biāo)題。該標(biāo)題出現(xiàn)在以下位置：Android：任務(wù)管理器的程序快照上帅戒； IOS：程序切換管理器中 |
| theme | ThemeData | 定義應(yīng)用所使用的主題顏色灯帮，可以指定主題中每個(gè)控件的顏色 |
| color | Color | 應(yīng)用的主要顏色值，即primary color |
| home | Widget | 用來(lái)定義當(dāng)前應(yīng)用打開時(shí)所顯示的界面 |
| routes | Map<String, WidgetBuilder> | 定義應(yīng)用中頁(yè)面跳轉(zhuǎn)規(guī)則 |
| initialRoute | String | 初始化路由 |
| onGenerateRoute | RouteFactory | 路由回調(diào)函數(shù)。當(dāng)通過Navigator.of(context).pushNamed跳轉(zhuǎn)路由的時(shí)候钟哥，在routes查找不到時(shí)迎献，會(huì)調(diào)用該方法 |
| onLocaleChanged | - | 當(dāng)系統(tǒng)修改語(yǔ)言的時(shí)候，會(huì)觸發(fā)這個(gè)回調(diào) |
| navigatorObservers | List<NavigatorObserver> | 導(dǎo)航觀察器 |
| debugShowMaterialGrid | bool | 是否顯示布局網(wǎng)格腻贰，用來(lái)調(diào)試UI的工具 |
| showPerformanceOverlay | bool | 顯示性能標(biāo)簽 |
2.1.1 設(shè)置主頁(yè)
使用home屬性設(shè)置應(yīng)用的主頁(yè)吁恍，即整個(gè)應(yīng)用的主組件。
2.1.2 路由處理
routes對(duì)象是一個(gè)Map<String, WidgetBuilder>播演。當(dāng)使用Navigator.pushNamed來(lái)跳轉(zhuǎn)路由的時(shí)候践盼，通過routes查找路由名字，然后使用對(duì)應(yīng)的WidgetBuilder來(lái)構(gòu)造一個(gè)帶有頁(yè)面切換動(dòng)畫的MaterialPageRoute宾巍。如果應(yīng)用只有一個(gè)界面咕幻，則不用設(shè)置整個(gè)屬性，使用home即可顶霞。
2.1.3 自定義主題
應(yīng)用程序的主題肄程，各種定制的顏色都可以設(shè)置，用于程序主題切換选浑。
2.2 Scaffold(腳手架組件)
Scaffold實(shí)現(xiàn)了基本的Material Design布局蓝厌。只要是在Material Design中定義過的單個(gè)界面顯示的布局組件元素，都可以使用Scaffold來(lái)繪制古徒。
常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| appBar | AppBar | 顯示在界面頂部的一個(gè)AppBar |
| body | Widget | 當(dāng)前界面所顯示的主要內(nèi)容 |
| floatingActionButton | Widget | 在Material Design中定義的一個(gè)功能按鈕 |
| persistentFooterButtons | List< Widget> | 固定在下方顯示的按鈕 |
| drawer | Widget | 側(cè)邊欄組件 |
| bottomNavigatorBar | Widget | 顯示在底部的導(dǎo)航欄 |
| backgroudColor | Color | 背景顏色 |
| resizeToAvoidBottomPadding | bool | 控制界面內(nèi)容body是否重新布局來(lái)避免底部被覆蓋拓提，比如當(dāng)鍵盤顯示時(shí)，重新布局避免鍵盤蓋住內(nèi)容隧膘。默認(rèn)為true |
2.3 AppBar(應(yīng)用按鈕組件)
應(yīng)用按鈕組件有AppBar和SliverAppBar代态。它們是Material Design中的AppBar，也就是Android中的ToolBar疹吃。
AppBar和SliverAppBar都繼承自StatefulWidget蹦疑，兩者的區(qū)別在于AppBar的位置是固定在應(yīng)用最上面的；而SliverAppBar是可以跟隨內(nèi)容滾動(dòng)的萨驶。
常用屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| leading | Widget | null | 在標(biāo)題前面顯示一個(gè)組件歉摧，在首頁(yè)通常顯示應(yīng)用的logo；其他界面通常顯示返回按鈕 |
| title | Widget | null | 當(dāng)前界面的標(biāo)題 |
| actions | List<Widget> | null | 一個(gè)Widget列表腔呜，常用菜單通常使用IconButton叁温，不常用的通常使用PopupMenuButton顯示三個(gè)點(diǎn)，點(diǎn)擊后彈出二級(jí)菜單 |
| bottom | PreferredSizeWidget | null | 通常是一個(gè)TabBar核畴。用來(lái)在標(biāo)題下方顯示一個(gè)Tab導(dǎo)航欄 |
| elevation | double | 4 | 控制AppBar下方陰影的高度 |
| flexibleSpace | Widget | null | 一個(gè)顯示在AppBar下方的組件膝但，高度和AppBar一樣，可以實(shí)現(xiàn)一些特殊的效果膛檀，該屬性通常在SliverAppBar中使用 |
| backgroundColor | Color | ThemeData.primaryColor | 背景色 |
| brightness | Brightness | ThemeData.primaryColorBrightness | AppBar的亮度锰镀，有白色和黑色兩種主題 |
| iconTheme | IconThemeData | ThemeData.primaryIconTheme | AppBar上圖標(biāo)的顏色、透明度和尺寸信息 |
| textTheme | TextTheme | ThemeData.primaryTextTheme | AppBar上文字樣式 |
| centerTitle | bool | - | 標(biāo)題是否居中顯示咖刃，不同操作系統(tǒng)泳炉，顯示方式不一樣 |
2.4 BottomNavigatorBar(底部導(dǎo)航欄)
BottomNavigatorBar是底部導(dǎo)航欄，可以很容易地在tab之間切換和瀏覽頂級(jí)視圖嚎杨。
常見屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| currentIndex | int | 當(dāng)前索引 |
| fixedColor | Color | 選中按鈕的顏色花鹅。不指定則使用系統(tǒng)主題色 |
| iconSize | double | 按鈕圖形大小 |
| items | List<BottomNavigatorBarItem> | 底部導(dǎo)航欄按鈕集。每一項(xiàng)是一個(gè)BottomNavigatorBarItem枫浙，包含icon圖標(biāo)和title文本 |
| onTap | ValueChanged<int> | 按下按鈕的回調(diào)事件刨肃。需要根據(jù)返回的索引設(shè)置當(dāng)前索引 |
2.5 TabBar(水平選項(xiàng)卡及視圖組件)
TabBar是一個(gè)顯示水平選項(xiàng)卡的Material Design組件，通常需要配套Tab選項(xiàng)組件及TabBarView頁(yè)面視圖組件一起使用箩帚。
TabBar常見屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| isScrolled | bool | 是否可以水平滾動(dòng) |
| tabs | List<Widget> | Tab選項(xiàng)列表 |
Tab常見屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| icon | Widget | Tab圖標(biāo) |
| text | String | Tab文本 |
TabBarView常見屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| controller | TabController | 指定視圖的控制器 |
| childrens | List<Widget> | 視圖組件的child為一個(gè)列表真友，一個(gè)選項(xiàng)卡對(duì)應(yīng)一個(gè)視圖 |
2.6 Drawer(抽屜組件)
Drawer可以實(shí)現(xiàn)類似抽屜拉入推出的效果，通常與ListView組合使用紧帕。
Drawer常用屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| child | Widget | - | Drawer的child可以放置任意可顯示的組件 |
| elevation | double | 16 | 陰影尺寸 |
Drawer可以添加頭部效果：
- DrawerHeader：展示基本信息
- UserAccountsDrawerHeader：展示用戶頭像盔然、用戶名、Email等信息
DrawerHeader常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| decoration | Decoration | header區(qū)域的decoration是嗜，通常用來(lái)設(shè)置背景顏色或背景圖片 |
| curve | Curve | 如果decoration發(fā)生了變化愈案，則會(huì)使用curve設(shè)置的變化曲線和duration設(shè)置的動(dòng)畫時(shí)間來(lái)做一個(gè)動(dòng)畫效果 |
| child | Widget | Header里面所顯示的內(nèi)容控件 |
| padding | EdgeInsetsGeometry | Header里面內(nèi)容控件的padding值，如果child為null鹅搪，該值無(wú)效 |
| margin | EdgeInsetsGeometry | Header四周的間隙 |
UserAccountsDrawerHeader常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| margin | EdgeInsetsGeometry | Header四周的間隙 |
| decoration | Decoration | header區(qū)域的decoration站绪，通常用來(lái)設(shè)置背景顏色或背景圖片 |
| currentAccountPicture | Widget | 用來(lái)設(shè)置當(dāng)前用戶的頭像 |
| otherAccountsPicture | Widget | 用來(lái)設(shè)置當(dāng)前用戶其他賬號(hào)的頭像 |
| accountName | Widget | 當(dāng)前用戶的名字 |
| accountEmail | Widget | 當(dāng)前用戶的Email |
| onDetailsPressed | VoidCallback | 當(dāng)accountName或者accountEmail被點(diǎn)擊的時(shí)候所觸發(fā)的回調(diào)函數(shù)，可以用來(lái)顯示其他額外的信息 |
3. 按鈕和提示組件
3.1 FloatingActionButton(懸停按鈕組件)
FloatingActionButton對(duì)應(yīng)一個(gè)圓形圖標(biāo)按鈕丽柿，懸停在內(nèi)容之上恢准，以展示應(yīng)用程序中的主要?jiǎng)幼鳌ｎ愃艻OS里的小白點(diǎn)甫题。
FloatingActionButton常用屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| child | - | - | - |
| tooltip | - | - | - |
| foregroundColor | - | - | - |
| backgroundColor | - | - | - |
| elevation | - | - | - |
| highlightElevation | - | - | - |
| onPressed | - | - | - |
| shape | - | - | - |
3.2 FlatButton(扁平按鈕組件)
FlatButton是一個(gè)扁平的Material Design風(fēng)格的按鈕顷歌，點(diǎn)擊時(shí)會(huì)有一個(gè)陰影效果。
3.3 PopupMenuButton(彈出菜單組件)
PopupMenuButton一般放在應(yīng)用右上角幔睬，表示更多操作眯漩，菜單項(xiàng)使用PopupMenuItem組件。
PopupMenuButton常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| child | - | - |
| icon | - | - |
| itemBuilder | - | - |
| onSelected | - | - |
3.4 SimpleDialog(簡(jiǎn)單對(duì)話框組件)
SimpleDialog用于設(shè)計(jì)簡(jiǎn)單的對(duì)話框麻顶，可以顯示附加的提示或操作赦抖。SimpleDialog通常需要配合SimpleDialogOption組件一起使用。
SimpleDialog常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| children | List<Widget> | 對(duì)話框子項(xiàng) |
| title | Widget | 通常是一個(gè)文本控件 |
| contentPadding | EdgeInsetsGeometry | 內(nèi)容部分間距 |
| titlePadding | EdgeInsetsGeometry | 標(biāo)題部分間距 |
- 通常對(duì)話框都是由某個(gè)動(dòng)作來(lái)觸發(fā)渲染的辅肾，比如點(diǎn)擊按鈕队萤，點(diǎn)擊菜單等。所以對(duì)話框一般要封裝在一個(gè)方法里實(shí)現(xiàn)矫钓。
- 另外這個(gè)過程是異步的需要加入async/await處理要尔。
3.5 AlertDialog(提示對(duì)話框組件)
AlertDialog比SimpleDialog對(duì)話框又復(fù)雜一些舍杜，不僅有提示內(nèi)容，還有一些操作按鈕赵辕，如確定和取消等既绩，內(nèi)容部分可以用SingleChildScrollView進(jìn)行包裹。
AlertDialog常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| actions | List<Widget> | 對(duì)話框底部操作按鈕还惠，如確定饲握、取消等 |
| title | Widget | 通常是一個(gè)文本控件 |
| contentPadding | EdgeInsetsGeometry | 內(nèi)容部分間距 |
| content | Widget | 內(nèi)容部分，通常為對(duì)話框的提示內(nèi)容 |
| titlePadding | EdgeInsetsGeometry | 標(biāo)題部分間距 |
3.6 SnackBar(輕量提示組件)
SnackBar是一個(gè)輕量級(jí)消息提示組件蚕键，在屏幕底部顯示救欧。
SnackBar常用屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| action | SnackBarAction | - | 提示消息里執(zhí)行的動(dòng)作，比如用戶想撤銷時(shí)可以點(diǎn)擊操作 |
| animation | Animation<double> | - | 給組件添加動(dòng)畫效果 |
| content | Widget | - | 提示消息內(nèi)容锣光，通常為文本組件 |
| duration | Duration | 4.0秒 | 動(dòng)畫執(zhí)行的時(shí)長(zhǎng) |
| backgroundColor | Color | - | 消息面板的背景色 |
4. 其他組件
4.1 TextField(文本框組件)
TextField就是用來(lái)做文本輸入的組件笆怠。
- 注意與Text組件區(qū)分，Text主要用于顯示文本誊爹，不接受文本輸入骑疆。
TextField常用屬性
| 屬性名 | 類型 | 說明 |
|---|---|---|
| maxLength | int | 最大長(zhǎng)度 |
| maxLines | int | 最大行數(shù) |
| autocorrect | bool | 是否自動(dòng)更正 |
| autofocus | bool | 是否自動(dòng)對(duì)焦 |
| obscureText | bool | 是否是密碼 |
| textAlign | TextAlign | 文本對(duì)齊方式 |
| style | TextStyle | 文本的樣式 |
| inputFormatters | List<TextInputFormatter> | 允許的輸入格式 |
| onChanged | VoidChanged<String> | 內(nèi)容改變時(shí)回調(diào) |
| onSubmitted | VoidChanged<String> | 內(nèi)容提交時(shí)回調(diào) |
| enabled | bool | 是否禁用 |
4.2 Card(卡片組件)
Card內(nèi)容可以由大多數(shù)類型的組件構(gòu)成，但通常與ListTitle一起使用替废。Card有一個(gè)child箍铭，但可以是支持多個(gè)child的Row、Column椎镣、ListView诈火、GridView或其他小部件。默認(rèn)情況下状答，Card將其大小縮小為0像素冷守。可以使用SizedBox來(lái)限制Card的大小惊科。
Card常用屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| child | Widget | - | 組件的子元素拍摇，任意Widget都可以 |
| margin | EdgeInsetsGeometry | - | 圍繞在decoration和child之外的空白區(qū)域，不屬于內(nèi)容區(qū)域 |
| shape | ShapeBorder | RoundedRectangleBorder | Card的陰影效果馆截，默認(rèn)的陰影效果為圓角的長(zhǎng)方形邊充活。弧度為4.0 |
