用Android布局的角度來看Flutter
| Flutter控件 | Android控件 |
|---|---|
| AppBar | ActionBar/ToolBar |
| ListView,GridView | ListView/RecyclerView |
| Text | TextView |
| Center | ViewGroup |
| Container | RelativeLayout |
| FloatingActionButton | FloatingActionButton(design庫里面的) |
| BottomNavigationBar | BottomNavigation(design庫里面的) |
| RaisedButton/Button | Button |
| Column | LinearLayout的android:orientation="vertical" |
| Row | android:orientation="horizontal" |
| DecorationImage | ImageView |
| Image | ImageView |
| Stack | FrameLayout/RelativeLayout |
| Algin | alginParentXXX屬性 |
| resizeToAvoidBottomPadding | android:windowSoftInputMode=”adjustResize屬性 |
| SingleChildScrollView | ScrollView |
| Stack | FrameLayout |
| SizeBox | Layout固定寬高 |
| Alignment | 對齊方式 |
| CustomScrollerView，slivers | 復雜的滑動嵌套布局 |
| SliverAppBar | CollapsingToolbarLayout，實現(xiàn)AppBar展開/收起的功能， 相對于 AppBar 位置的固定的應用最上面的；而 SliverAppBar 是可以跟隨內(nèi)容滾動的。 |
| Positioned | 確定某一個View的具體坐標 |
| Expanded | Row、Column、Flex會被Expanded撐開，充滿主軸可用空間。 |
| Clip | 小碎片，類似流式布局里面的Item |
| Warp | 包裹的小部件超過屏幕寬度后換行 |
| Step | 步驟，類似快遞物流效果 |
| Card | 類似CardView效果 |
| ClipRRect | 給圖片加圓角 |
| ListTile | 固定樣式的view 左邊圖片 右邊可設置標題 副標題 |
| DataTable | 表格 參考 |
| PaginatedDataTable | 分頁表格參考 |
Flutter控件本身通常由許多小型、單用途的控件組成，結合起來產(chǎn)生強大的效果，例如，Container是一種常用的控件，由負責布局、繪畫、定位和大小調(diào)整的幾個控件組成，具體來說，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件組成，而不是將Container子類化來產(chǎn)生自定義效果，您可以用這種新穎的方式組合這些以及其他簡單的控件。
在寫應用程序時，經(jīng)常會使用StatelessWidget和StatefulWidget編寫新控件，兩者的差別在于你是否要管理控件的狀態(tài)。一個控件的主要任務是實現(xiàn)build函數(shù)，定義控件中其他較低層次的控件。build函數(shù)將依次構建這些控件，直到底層渲染對象。
- Scaffold
Scaffold 實現(xiàn)了基本的Material Design布局結構。也就是說， MaterialApp 的 child 是 Scaffold Widget。
在Material設計中定義的單個界面上的各種布局元素，在 Scaffold 中都有支持，比如 左邊欄（Drawers）、snack bars、以及 bottom sheets。
Scaffold 有下面幾個主要屬性：
1、appBar：顯示在界面頂部的一個 AppBar，也就是 Android 中的 ActionBar 、Toolbar。
2、body：當前界面所顯示的主要內(nèi)容 Widget。
3、floatingActionButton：Material設計中所定義的 FAB，界面的主要功能按鈕。
4、persistentFooterButtons：固定在下方顯示的按鈕，比如對話框下方的確定、取消按鈕。
5、drawer：側邊欄控件。
6、backgroundColor： 內(nèi)容的背景顏色，默認使用的是 ThemeData.scaffoldBackgroundColor 的值。
7、bottomNavigationBar： 顯示在頁面底部的導航欄。
8、resizeToAvoidBottomPadding：類似于 Android 中的
9、android:windowSoftInputMode=”adjustResize”，控制界面內(nèi)容 body 是否重新布局來避免底部被覆蓋了，比如當鍵盤顯示的時候，重新布局避免被鍵盤蓋住內(nèi)容。默認值為 true。
- Appbar
AppBar 和 SliverAppBar 是Material Design中的 App Bar，也就是 Android 中的 Toolbar，關于 Toolbar 的設計指南請參考Material Design中 Toolbar 的內(nèi)容。
AppBar 和 SliverAppBar 都是繼承StatefulWidget 類，都代表 Toobar，二者的區(qū)別在于 AppBar 位置的固定的應用最上面的；而 SliverAppBar 是可以跟隨內(nèi)容滾動的。
他們的主要屬性如下：
1、 leading：在標題前面顯示的一個控件，在首頁通常顯示應用的 logo；在其他界面通常顯示為返回按鈕
2、 title： Toolbar 中主要內(nèi)容，通常顯示為當前界面的標題文字。
3、actions：一個 Widget 列表，代表 Toolbar 中所顯示的菜單，對于常用的菜單，通常使用。4、IconButton 來表示；對于不常用的菜單通常使用 PopupMenuButton 來顯示為三個點，點擊后彈出二級菜單。
5、 bottom：一個 AppBarBottomWidget 對象，通常是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄。
6、elevation：紙墨設計中控件的 z 坐標順序，默認值為 4，對于可滾動的 SliverAppBar，當 SliverAppBar 和內(nèi)容同級的時候，該值為 0， 當內(nèi)容滾動 SliverAppBar 變?yōu)?Toolbar 的時候，修改 elevation 的值 flexibleSpace：一個顯示在 AppBar 下方的控件，高度和 AppBar 高度一樣，可以實現(xiàn)一些特殊的效果，該屬性通常在 SliverAppBar 中使用
7、backgroundColor：APP bar 的顏色，默認值為 ThemeData.primaryColor。改值通常和下面的三個屬性一起使用
8、 brightness：App bar 的亮度，有白色和黑色兩種主題，默認值為 ThemeData.primaryColorBrightness
9、 iconTheme：App bar 上圖標的顏色、透明度、和尺寸信息。默認值為 ThemeData.primaryIconTheme
10、 textTheme： App bar 上的文字樣式。默認值為 ThemeData.primaryTextTheme
11、 centerTitle： 標題是否居中顯示，默認值根據(jù)不同的操作系統(tǒng)，顯示方式不一樣
基本組件
ClipRRect 給圖片加圓角
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
child: Image.network(
'http://img3.3lian.com/2013/c4/95/d/18.jpg',
fit: BoxFit.cover,
),
),
- Container
容器，一個常用的控件，由基本的繪制、位置和大小控件組成。負責創(chuàng)建矩形的可視元素，可以用BoxDecoration來設計樣式，比如背景、邊框和陰影，Container也有邊距、填充和大小限制，另外，還可以在三維空間利用矩陣進行變換。
沒有子控件的容器盡可能大，除非傳入的大小約束是無限的，在這種情況下，它們盡可能小。有子控件的容器將自己的尺寸給他們的孩子。我們可以通過width、height和 constraints屬性控制size。
- BoxDecoration
裝飾器，可以用來修飾其他的組件，和Android里面的shape很相似
const BoxDecoration({
this.color,//背景色
this.image,//圖片
this.border,//描邊
this.borderRadius,//圓角大小
this.boxShadow,//陰影
this.gradient,//過度效果
this.backgroundBlendMode,
this.shape = BoxShape.rectangle,//形狀,BoxShape.circle和borderRadius不能同時使用
})
- SizedBox
SizedBox控件能強制子控件具有特定寬度、高度或兩者都有
類似線性布局制定高寬
body: new SizedBox(
width: 250.0,
height: 250.0,
child: new Container(
decoration: new BoxDecoration(
backgroundColor: Colors.lightBlueAccent[100],
),
),
),
);
- AspectRatio
AspectRatio控件能強制子小部件的寬度和高度具有給定的寬高比，以寬度與高度的比例表示。
body: new AspectRatio(
aspectRatio: 3.0 / 2.0,
child: new Container(
decoration: new BoxDecoration(
backgroundColor: Colors.lightBlueAccent[100],
),
),
),
);
- Row
flex水平布局控件，能夠將子控件水平排列，是基于Web的flexbox的布局模式設計的。
Row子控件有靈活與不靈活的兩種，Row首先列出不靈活的子控件，減去它們的總寬度，計算還有多少可用的空間。然后Row按照Flexible.flex屬性確定的比例在可用空間中列出靈活的子控件。要控制靈活子控件，需要使用Expanded控件。
注意該控件不支持滑動，如果子控件超過剩余空間，會報錯，如果想支持水平滑動，考慮使用ListView。
如果只有一個子控件，可以使用 Align or Center控件定義該子控件位置。
new Row(
children: <Widget>[
new Expanded(
child: new Text('Deliver features faster', textAlign: TextAlign.center),
),
new Expanded(
child: new Text('Craft beautiful UIs', textAlign: TextAlign.center),
),
new Expanded(
child: new FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
),
],
)
Column
flex垂直布局控件，能夠將子控件垂直排列。
用法與Row控件一樣。Image
顯示圖像的控件，Image控件有多種構造函數(shù)：
new Image，用于從ImageProvider獲取圖像。
new Image.asset，用于使用key從AssetBundle獲取圖像。
new Image.network，用于從URL地址獲取圖像。
new Image.file，用于從File獲取圖像。
Image里面的BoxFit參數(shù)介紹：（相當于Android的ImageView的scaleType參數(shù)）
fill 通過篡改原始寬高比來填充目標box
contain 在盡可能大的情況下，仍然將源完全包含在目標框中。
cover 盡可能小，同時仍然覆蓋整個目標框。
fitWidth 確保顯示源的全部寬度，而不管這是否意味著源垂直溢出目標框。
fitHeight 確保顯示源的全部高度，而不管這是否意味著源水平地溢出目標框。
none 在目標框中對齊源（默認為居中），并放棄位于框外的源的任何部分。源圖像未調(diào)整大小。
scaleDown 在目標框中對齊源(默認為居中)，如果需要，將源縮小以確保源適合該框。這與contain的內(nèi)容相同，如果該內(nèi)容會收縮圖像，那么它就是none。
-MainAxisAlignment和CrossAxisAlignment簡介
MainAxisAlignment（主軸）和CrossAxisAlignment（交叉軸）常用于Row和Column控件中，主要是用來控制子控件排列的位置，并可以配合textDirection和verticalDirection屬性來控制子控件排列的方向及改變MainAxisAlignment和CrossAxisAlignment的起始位置。
enum MainAxisAlignment {
//將子控件放在主軸的開始位置
start,
//將子控件放在主軸的結束位置
end,
//將子控件放在主軸的中間位置
center,
//將主軸空白位置進行均分，排列子元素，手尾沒有空隙
spaceBetween,
//將主軸空白區(qū)域均分，使中間各個子控件間距相等，首尾子控件間距為中間子控件間距的一半
spaceAround,
//將主軸空白區(qū)域均分，使各個子控件間距相等
spaceEvenly,
}
- Expanded組件可以使Row、Column、Flex等子組件在其主軸方向上展開并填充可用空間(例如，Row在水平方向，Column在垂直方向)。如果多個子組件展開，可用空間會被其flex factor(表示擴展的速度、比例)分割
- Text
用來顯示文本的控件，當然還有很多樣式，具體請看源碼
new Text("hello_word",
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.overline,
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.black87,
))
- Icon
圖標控件，按照IconData中所描述的規(guī)則繪制，顯示Material中預定義的IconDatas。
new Icon(Icons.pool, size: 32.0, color: Colors.white),
