flutter的進階之路之Material Design與IOS風格組件

博客

Material Design風格組件

1. 概述

Material Design是由谷歌推出的全新設計語言，這種設計語言旨在爲手機、平板電腦、臺式機和其餘平臺提供更一致、更普遍的外觀和感受。Material Design風格是一直很是有質感的設計風格，並會提供一些默認的交互動畫。

2. App結構和導航組件

2.1 MaterialApp(應用組件)

MaterialApp表明使用Material Design風格的應用，裏面包含了其餘所需的基本控件。官方提供的示例demo就是從MaterialApp這個主組件開始的。

MaterialApp組件常見屬性

屬性名	類型	說明
title	String	應用程序的標題。該標題出如今如下位置：Android：任務管理器的程序快照上； IOS：程序切換管理器中
theme	ThemeData	定義應用所使用的主題顏色，能夠指定主題中每一個控件的顏色
color	Color	應用的主要顏色值，即primary color
home	Widget	用來定義當前應用打開時所顯示的界面
routes	Map<String, WidgetBuilder>	定義應用中頁面跳轉規則
initialRoute	String	初始化路由
onGenerateRoute	RouteFactory	路由回調函數。當經過Navigator.of(context).pushNamed跳轉路由的時候，在routes查找不到時，會調用該方法
onLocaleChanged	-	當系統修改語言的時候，會觸發這個回調
navigatorObservers	List<NavigatorObserver>	導航觀察器
debugShowMaterialGrid	bool	是否顯示佈局網格，用來調試UI的工具
showPerformanceOverlay	bool	顯示性能標籤

2.1.1 設置主頁

使用home屬性設置應用的主頁，即整個應用的主組件。

2.1.2 路由處理

routes對象是一個Map<String, WidgetBuilder>。當使用Navigator.pushNamed來跳轉路由的時候，經過routes查找路由名字，而後使用對應的WidgetBuilder來構造一個帶有頁面切換動畫的MaterialPageRoute。若是應用只有一個界面，則不用設置整個屬性，使用home便可。

2.1.3 自定義主題

應用程序的主題，各類定製的顏色均可以設置，用於程序主題切換。

2.2 Scaffold(腳手架組件)

Scaffold實現了基本的Material Design佈局。只要是在Material Design中定義過的單個界面顯示的佈局組件元素，均可以使用Scaffold來繪製。

經常使用屬性

屬性名	類型	說明
appBar	AppBar	顯示在界面頂部的一個AppBar
body	Widget	當前界面所顯示的主要內容
floatingActionButton	Widget	在Material Design中定義的一個功能按鈕
persistentFooterButtons	List< Widget>	固定在下方顯示的按鈕
drawer	Widget	側邊欄組件
bottomNavigatorBar	Widget	顯示在底部的導航欄
backgroudColor	Color	背景顏色
resizeToAvoidBottomPadding	bool	控制界面內容body是否從新佈局來避免底部被覆蓋，好比當鍵盤顯示時，從新佈局避免鍵盤蓋住內容。默認爲true

2.3 AppBar(應用按鈕組件)

應用按鈕組件有AppBar和SliverAppBar。它們是Material Design中的AppBar，也就是Android中的ToolBar。 AppBar和SliverAppBar都繼承自StatefulWidget，二者的區別在於AppBar的位置是固定在應用最上面的；而SliverAppBar是能夠跟隨內容滾動的。

經常使用屬性

屬性名	類型	默認值	說明
leading	Widget	null	在標題前面顯示一個組件，在首頁一般顯示應用的logo；其餘界面一般顯示返回按鈕
title	Widget	null	當前界面的標題
actions	List<Widget>	null	一個Widget列表，經常使用菜單一般使用IconButton，不經常使用的一般使用PopupMenuButton顯示三個點，點擊後彈出二級菜單
bottom	PreferredSizeWidget	null	一般是一個TabBar。用來在標題下方顯示一個Tab導航欄
elevation	double	4	控制AppBar下方陰影的高度
flexibleSpace	Widget	null	一個顯示在AppBar下方的組件，高度和AppBar同樣，能夠實現一些特殊的效果，該屬性一般在SliverAppBar中使用
backgroundColor	Color	ThemeData.primaryColor	背景色
brightness	Brightness	ThemeData.primaryColorBrightness	AppBar的亮度，有白色和黑色兩種主題
iconTheme	IconThemeData	ThemeData.primaryIconTheme	AppBar上圖標的顏色、透明度和尺寸信息
textTheme	TextTheme	ThemeData.primaryTextTheme	AppBar上文字樣式
centerTitle	bool	-	標題是否居中顯示，不一樣操做系統，顯示方式不同

2.4 BottomNavigatorBar(底部導航欄)

BottomNavigatorBar是底部導航欄，能夠很容易地在tab之間切換和瀏覽頂級視圖。

常見屬性

屬性名	類型	說明
currentIndex	int	當前索引
fixedColor	Color	選中按鈕的顏色。不指定則使用系統主題色
iconSize	double	按鈕圖形大小
items	List<BottomNavigatorBarItem>	底部導航欄按鈕集。每一項是一個BottomNavigatorBarItem，包含icon圖標和title文本
onTap	ValueChanged<int>	按下按鈕的回調事件。須要根據返回的索引設置當前索引

2.5 TabBar(水平選項卡及視圖組件)

TabBar是一個顯示水平選項卡的Material Design組件，一般須要配套Tab選項組件及TabBarView頁面視圖組件一塊兒使用。 TabBar常見屬性

屬性名	類型	說明
isScrolled	bool	是否能夠水平滾動
tabs	List<Widget>	Tab選項列表

Tab常見屬性

屬性名	類型	說明
icon	Widget	Tab圖標
text	String	Tab文本

TabBarView常見屬性

屬性名	類型	說明
controller	TabController	指定視圖的控制器
childrens	List<Widget>	視圖組件的child爲一個列表，一個選項卡對應一個視圖

2.6 Drawer(抽屜組件)

Drawer能夠實現相似抽屜拉入推出的效果，一般與ListView組合使用。

Drawer經常使用屬性

屬性名	類型	默認值	說明
child	Widget	-	Drawer的child能夠放置任意可顯示的組件
elevation	double	16	陰影尺寸

Drawer能夠添加頭部效果：

• DrawerHeader：展現基本信息
• UserAccountsDrawerHeader：展現用戶頭像、用戶名、Email等信息

DrawerHeader經常使用屬性

屬性名	類型	說明
decoration	Decoration	header區域的decoration，一般用來設置背景顏色或背景圖片
curve	Curve	若是decoration發生了變化，則會使用curve設置的變化曲線和duration設置的動畫時間來作一個動畫效果
child	Widget	Header裏面所顯示的內容控件
padding	EdgeInsetsGeometry	Header裏面內容控件的padding值，若是child爲null，該值無效
margin	EdgeInsetsGeometry	Header四周的間隙

UserAccountsDrawerHeader經常使用屬性

屬性名	類型	說明
margin	EdgeInsetsGeometry	Header四周的間隙
decoration	Decoration	header區域的decoration，一般用來設置背景顏色或背景圖片
currentAccountPicture	Widget	用來設置當前用戶的頭像
otherAccountsPicture	Widget	用來設置當前用戶其餘帳號的頭像
accountName	Widget	當前用戶的名字
accountEmail	Widget	當前用戶的Email
onDetailsPressed	VoidCallback	當accountName或者accountEmail被點擊的時候所觸發的回調函數，能夠用來顯示其餘額外的信息

3. 按鈕和提示組件

3.1 FloatingActionButton(懸停按鈕組件)

FloatingActionButton對應一個圓形圖標按鈕，懸停在內容之上，以展現應用程序中的主要動做。相似IOS裏的小白點。

FloatingActionButton經常使用屬性

屬性名	類型	默認值	說明
child	-	-	-
tooltip	-	-	-
foregroundColor	-	-	-
backgroundColor	-	-	-
elevation	-	-	-
highlightElevation	-	-	-
onPressed	-	-	-
shape	-	-	-

3.2 FlatButton(扁平按鈕組件)

FlatButton是一個扁平的Material Design風格的按鈕，點擊時會有一個陰影效果。

3.3 PopupMenuButton(彈出菜單組件)

PopupMenuButton通常放在應用右上角，表示更多操做，菜單項使用PopupMenuItem組件。

PopupMenuButton經常使用屬性

屬性名	類型	說明
child	-	-
icon	-	-
itemBuilder	-	-
onSelected	-	-

3.4 SimpleDialog(簡單對話框組件)

SimpleDialog用於設計簡單的對話框，能夠顯示附加的提示或操做。SimpleDialog一般須要配合SimpleDialogOption組件一塊兒使用。

SimpleDialog經常使用屬性

屬性名	類型	說明
children	List<Widget>	對話框子項
title	Widget	一般是一個文本控件
contentPadding	EdgeInsetsGeometry	內容部分間距
titlePadding	EdgeInsetsGeometry	標題部分間距

• 一般對話框都是由某個動做來觸發渲染的，好比點擊按鈕，點擊菜單等。因此對話框通常要封裝在一個方法裏實現。
• 另外這個過程是異步的須要加入async/await處理。

3.5 AlertDialog(提示對話框組件)

AlertDialog比SimpleDialog對話框又複雜一些，不只有提示內容，還有一些操做按鈕，如肯定和取消等，內容部分能夠用SingleChildScrollView進行包裹。

AlertDialog經常使用屬性

屬性名	類型	說明
actions	List<Widget>	對話框底部操做按鈕，如肯定、取消等
title	Widget	一般是一個文本控件
contentPadding	EdgeInsetsGeometry	內容部分間距
content	Widget	內容部分，一般爲對話框的提示內容
titlePadding	EdgeInsetsGeometry	標題部分間距

3.6 SnackBar(輕量提示組件)

SnackBar是一個輕量級消息提示組件，在屏幕底部顯示。

SnackBar經常使用屬性

屬性名	類型	默認值	說明
action	SnackBarAction	-	提示消息裏執行的動做，好比用戶想撤銷時能夠點擊操做
animation	Animation<double>	-	給組件添加動畫效果
content	Widget	-	提示消息內容，一般爲文本組件
duration	Duration	4.0秒	動畫執行的時長
backgroundColor	Color	-	消息面板的背景色

4. 其餘組件

4.1 TextField(文本框組件)

TextField就是用來作文本輸入的組件。

• 注意與Text組件區分，Text主要用於顯示文本，不接受文本輸入。

TextField經常使用屬性

屬性名	類型	說明
maxLength	int	最大長度
maxLines	int	最大行數
autocorrect	bool	是否自動更正
autofocus	bool	是否自動對焦
obscureText	bool	是不是密碼
textAlign	TextAlign	文本對齊方式
style	TextStyle	文本的樣式
inputFormatters	List<TextInputFormatter>	容許的輸入格式
onChanged	VoidChanged<String>	內容改變時回調
onSubmitted	VoidChanged<String>	內容提交時回調
enabled	bool	是否禁用

4.2 Card(卡片組件)

Card內容能夠由大多數類型的組件構成，但一般與ListTitle一塊兒使用。Card有一個child，但能夠是支持多個child的Row、Column、ListView、GridView或其餘小部件。默認狀況下，Card將其大小縮小爲0像素。可使用SizedBox來限制Card的大小。

Card經常使用屬性

屬性名	類型	默認值	說明
child	Widget	-	組件的子元素，任意Widget均可以
margin	EdgeInsetsGeometry	-	圍繞在decoration和child以外的空白區域，不屬於內容區域
shape	ShapeBorder	RoundedRectangleBorder	Card的陰影效果，默認的陰影效果爲圓角的長方形邊。弧度爲4.0

Cupertino風格組件

1. 概述

Cupertino風格組件即IOS風格組件。主要有CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。目前組件庫尚未Material Design風格組件豐富。

2. CupertinoActivityIndicator組件

IOS風格loading指示器。

經常使用屬性

屬性名	類型	默認值	說明
radius	double	10.0	加載圖形的半徑
animating	bool	true	是否播放加載動畫

3 CupertinoAlertDialog

與Material Design風格的AlertDialog相似。

常見屬性

屬性名	類型	說明
actions	List<Widget>	對話框底部操做按鈕。如肯定、取消。
title	Widget	對話框標題，一般是一個文本
content	Widget	對話框內容部分，一般爲提示內容

3. CupertinoButton

IOS風格按鈕。

經常使用屬性

屬性名	類型	默認值	說明
color	Color	-	按鈕顏色
disableColor	Color	ThemeData.disabledColor	按鈕禁用狀態顏色
onPressed	VoidCallback	-	按鈕按下時回調函數
child	Widget	-	按鈕的child一般爲Text文本，顯示按鈕名字
enable	bool	true	是否爲禁用狀態

4. Cupertino導航組件

4.1 CupertinoTabScaffold

選項卡組件，將選項卡按鈕與選項卡視圖綁定。

經常使用屬性

屬性名	類型	說明
tabBar	CupertinoTabBar	選項卡按鈕，一般由圖標和文本組成
tabBuilder	IndexedWidgetBuilder	選項卡視圖構造器

4.2 CupertinoTabBar

選項卡按鈕，一般由BottomNavigationBarItem組成包含圖標加文本。

經常使用屬性

屬性名	類型	說明
items	List<BottomNavigationBarItem>	選項卡按鈕集合
backgroundColor	Color	選項卡按鈕背景色
activeColor	Color	選中按鈕前景色
iconSize	double	選項卡圖標大小

4.3 CupertinoTabView

選項卡視圖。

經常使用屬性

屬性名	類型	說明
builder	WidgetBuilder	選項卡視圖構造器
routes	Map<String, WidgetBuilder>	選項卡視圖路由

4.4 CupertinoPageScaffold

頁面的基本佈局結構。包含內容和導航欄。

經常使用屬性

屬性名	類型	說明
backgroudColor	Color	頁面背景色
navigationBar	ObstructingPreferredSizeWidget	頂部導航欄按鈕。包含左中右三個子組件
child	Widget	頁面的主要內容

4.5 CupertinoNavigationBar

導航欄結構組件。

經常使用屬性

屬性名	類型	說明
middle	Widget	導航欄中間組件，一般爲頁面標題
trailing	Widget	導航欄右邊組件，一般爲菜單按鈕
leading	Widget	導航欄左邊組件，一般爲返回按鈕