前言
學習flutter有幾個月的時間了，flutter也已經發布了1.0版本，所以自己也想把這段時間學習的東西做個總結，這里做一個入門的Widgets使用總結。網上的學習資料也有很多，希望我的文章也能對大家有所幫助。
筆者在剛開始學習flutter的時候，看著官網的介紹，卻不知道代碼怎么寫，呈現的效果是怎樣的。雖然有官方的Gallery示例代碼，但是那些代碼寫的太復雜，對于初學者來說看的就很懵。所以我計劃寫這樣一個項目（項目github地址），是根據flutter中文網的widgets目錄來進行編寫的。主要是展示出某個widget的簡單使用方法，一些常用屬性的介紹，顯示在界面上是什么樣的效果。并不過于仔細剖析一個widget的方方面面，只是作為入門。
大家在學習的時候，可以對照flutter中文網的widgets目錄和運行項目以及項目代碼進行學習。本項目不追求界面的美化程度，僅僅是想展現出某個widget的最簡單用法。這個項目適用于剛入門想學習flutter的小伙伴。錯誤之處在所難免，如有發現請大家提出來，我進行修改，謝謝！
PS：flutter安裝等前期準備工作在這里就不介紹了，可以直接看官網教程。下面開始第一部分。
基礎組件
1. Container
Container是一個擁有繪制、定位、調整大小的widget。類似于html中的div，最簡單的一個Container就是Container()，在界面中什么也不會顯示。需要給他指定寬、高和顏色等才可以看得出效果，或者在Container中放了其他自身有高度的widget才會顯示出來。
示例代碼：
顯示一個高100，寬100，顏色為Color(0xff63d6fb)的正方形
Container(
height: 100.0,
width: 100.0,
color: Color(0xff63d6fb),
),
Container有以下常用屬性：
alignment：用于定位子元素（child）的位置。
decoration：裝飾，可以為Container添加邊框border、邊框圓角borderRadius、陰影boxShadow、背景圖image、漸變色gradient、形狀shape、背景色color等，注意在使用了裝飾時，Container的color屬性將不可用，取而代之的是裝飾內的color屬性。
constraints:對Container的約束，可以設置最大寬高、最小寬高。
transform：對Container進行轉換。
2. Row
行布局，用于在水平方向上排列元素。如在一行中排放兩個Container。
示例代碼：
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 主軸方向（橫向）對齊方式
crossAxisAlignment: CrossAxisAlignment.start, // 交叉軸（豎直）對其方式
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
color: Colors.red,
),
Container(
height: 100.0,
width: 100.0,
color: Colors.black,
),
],
),
Row中排列的widget不會滾動，超出一行的范圍時會有溢出。如果你希望它具有滾動效果，可以考慮使用ListView，同理Column也是一樣，只需要設置ListView的方向即可。
3. Column
列布局，用于在豎直方向上排列元素，如在一列中排放兩個Container。
示例代碼：
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 主軸方向（豎直）對齊方式
crossAxisAlignment: CrossAxisAlignment.start, // 交叉軸（橫向）對其方式
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
color: Colors.red,
),
Container(
height: 100.0,
width: 100.0,
color: Colors.black,
),
],
),
4. Image
顯示圖片的Widget，Image能夠從ImageProvider、項目資源、儲存卡文件、網絡和Uint8List中獲取圖像。這里介紹2種比較常用的方式。
示例代碼：
// 加載項目資源圖片
Image.asset('assets/images/1.jpg',),
// 加載網絡資源圖片
Image.network(
'https://avatars2.githubusercontent.com/u/37101820?s=400&u=4c6356d8d94322a7684909af9594149d3c83d433&v=4',
width: 200.0,
),
5. Text
顯示單一格式的文本Widget，該小部件顯示單個樣式的文本字符串，最簡單的使用是
Text('這是一行文本內容！')
下面來看一下Text的一些常用屬性：
style:樣式，他是一個TextStyle，里面能夠設置文本內容的顏色color、文字大小fontSize、字重fontWeight、文字樣式fontStyle、字體fontFamily、文字裝飾decoration、文本對其方式textAlign、最大行數maxLines、單詞間距wordSpacing、字符間距letterSpacing等。
示例代碼：
Text(
'更改字體顏色',
style: TextStyle(color: Colors.red),
),
Text(
'更改字體大小、加粗、斜體',
style: TextStyle(
fontSize: 26.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
),
Text(
'使用字體資源',
style: TextStyle(fontSize: 20.0, fontFamily: 'pmzd'),
),
效果的展示及更多代碼，請查看項目源碼。
6. Icon
一個Material Design風格的小圖標。這是flutter內置的圖表庫，里面包含了很多圖標資源。
示例代碼：
Icon(
Icons.ac_unit,
size: 60.0,
color: Colors.lightBlueAccent,
),
示例代碼顯示了一個大小為60的雪花圖標，并設置了顏色。如果想讓小圖標可以相應點擊事件，可以使用IconButton。
7. RaisedButton
Material Design風格的按鈕，點擊有水波紋的效果。
示例代碼：
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('改變文本、背景顏色'),
onPressed: () {},
),
常用屬性解析：
color：按鈕背景顏色
textColor：文本顏色
disabledTextColor：不可點擊狀態的文本顏色
splashColor：水波紋顏色
highlightColor：按下按鈕時高亮的顏色
elevation：陰影
highlightElevation：高亮時的陰影
disabledElevation：不可點擊狀態的陰影
child：子元素，通常放一個Text
shape：形狀，可設置圓角效果
onPressed：點擊事件
8. Scaffold
腳手架Widget，是Material Design布局結構的基本實現。可以看到在項目中，每一個頁面的build里面都return了一個Scaffold，它包含了應用標題欄appBar、主題部分body、側滑窗口drawer、浮動按鈕floatingActionButton、底部導航欄bottomNavigationBar等，這些事實一個APP頁面常用的部分。可以根據需求選擇自己需要的部分。
9. Appbar
應用標題欄，由工具欄和其他小部件組成，例如TabBar和FlexibleSpaceBar。
在標題欄可以顯示當前頁面的title，前導圖標leading，若頁面是從其他頁面跳轉過來的，會默認在該頁面添加一個返回上一頁的leading。
常用屬性解析：
title：標題
centerTitle：標題是否居中
elevation：陰影
leading：前導小部件
actions：在title之后的部件，可以顯示多個。
bottom：顯示在應用欄底部的小部件
backgroundColor：背景顏色
10. FlutterLogo
以Widget的形式顯示一個Flutter的Logo，沒啥特別的。
11. Placeholder
一個繪制了一個盒子的widget，代表以后有widget將會被添加到該盒子中，就是占一個位置。可能由于個人編程習慣，覺得這個沒什么太大用處
部分頁面效果如下：
項目源碼在我的GitHub flutter_widgets項目地址
項目與教程有時間會繼續更新，直至整個widgets目錄完成。喜歡的給個 ★star 支持，謝謝！如有錯誤之處或問題也可以在這里留言或者提issue給我~
