前言
學(xué)習(xí)flutter有幾個月的時間了，flutter也已經(jīng)發(fā)布了1.0版本，所以自己也想把這段時間學(xué)習(xí)的東西做個總結(jié)，這里做一個入門的Widgets使用總結(jié)。網(wǎng)上的學(xué)習(xí)資料也有很多，希望我的文章也能對大家有所幫助。
筆者在剛開始學(xué)習(xí)flutter的時候，看著官網(wǎng)的介紹，卻不知道代碼怎么寫，呈現(xiàn)的效果是怎樣的。雖然有官方的Gallery示例代碼，但是那些代碼寫的太復(fù)雜，對于初學(xué)者來說看的就很懵。所以我計劃寫這樣一個項目（項目github地址），是根據(jù)flutter中文網(wǎng)的widgets目錄來進(jìn)行編寫的。主要是展示出某個widget的簡單使用方法，一些常用屬性的介紹，顯示在界面上是什么樣的效果。并不過于仔細(xì)剖析一個widget的方方面面，只是作為入門。
大家在學(xué)習(xí)的時候，可以對照flutter中文網(wǎng)的widgets目錄和運行項目以及項目代碼進(jìn)行學(xué)習(xí)。本項目不追求界面的美化程度，僅僅是想展現(xiàn)出某個widget的最簡單用法。這個項目適用于剛?cè)腴T想學(xué)習(xí)flutter的小伙伴。錯誤之處在所難免，如有發(fā)現(xiàn)請大家提出來，我進(jìn)行修改，謝謝！
PS：flutter安裝等前期準(zhǔn)備工作在這里就不介紹了，可以直接看官網(wǎng)教程。下面開始第一部分。
基礎(chǔ)組件
1. Container
Container是一個擁有繪制、定位、調(diào)整大小的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屬性將不可用，取而代之的是裝飾內(nèi)的color屬性。
constraints:對Container的約束，可以設(shè)置最大寬高、最小寬高。
transform：對Container進(jìn)行轉(zhuǎn)換。
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也是一樣，只需要設(shè)置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、項目資源、儲存卡文件、網(wǎng)絡(luò)和Uint8List中獲取圖像。這里介紹2種比較常用的方式。
示例代碼：
// 加載項目資源圖片
Image.asset('assets/images/1.jpg',),
// 加載網(wǎng)絡(luò)資源圖片
Image.network(
'https://avatars2.githubusercontent.com/u/37101820?s=400&u=4c6356d8d94322a7684909af9594149d3c83d433&v=4',
width: 200.0,
),
5. Text
顯示單一格式的文本W(wǎng)idget，該小部件顯示單個樣式的文本字符串，最簡單的使用是
Text('這是一行文本內(nèi)容！')
下面來看一下Text的一些常用屬性：
style:樣式，他是一個TextStyle，里面能夠設(shè)置文本內(nèi)容的顏色color、文字大小fontSize、字重fontWeight、文字樣式fontStyle、字體fontFamily、文字裝飾decoration、文本對其方式textAlign、最大行數(shù)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風(fēng)格的小圖標(biāo)。這是flutter內(nèi)置的圖表庫，里面包含了很多圖標(biāo)資源。
示例代碼：
Icon(
Icons.ac_unit,
size: 60.0,
color: Colors.lightBlueAccent,
),
示例代碼顯示了一個大小為60的雪花圖標(biāo)，并設(shè)置了顏色。如果想讓小圖標(biāo)可以相應(yīng)點擊事件，可以使用IconButton。
7. RaisedButton
Material Design風(fēng)格的按鈕，點擊有水波紋的效果。
示例代碼：
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('改變文本、背景顏色'),
onPressed: () {},
),
常用屬性解析：
color：按鈕背景顏色
textColor：文本顏色
disabledTextColor：不可點擊狀態(tài)的文本顏色
splashColor：水波紋顏色
highlightColor：按下按鈕時高亮的顏色
elevation：陰影
highlightElevation：高亮?xí)r的陰影
disabledElevation：不可點擊狀態(tài)的陰影
child：子元素，通常放一個Text
shape：形狀，可設(shè)置圓角效果
onPressed：點擊事件
8. Scaffold
腳手架Widget，是Material Design布局結(jié)構(gòu)的基本實現(xiàn)?？梢钥吹皆陧椖恐?，每一個頁面的build里面都return了一個Scaffold，它包含了應(yīng)用標(biāo)題欄appBar、主題部分body、側(cè)滑窗口drawer、浮動按鈕floatingActionButton、底部導(dǎo)航欄bottomNavigationBar等，這些事實一個APP頁面常用的部分?？梢愿鶕?jù)需求選擇自己需要的部分。
9. Appbar
應(yīng)用標(biāo)題欄，由工具欄和其他小部件組成，例如TabBar和FlexibleSpaceBar。
在標(biāo)題欄可以顯示當(dāng)前頁面的title，前導(dǎo)圖標(biāo)leading，若頁面是從其他頁面跳轉(zhuǎn)過來的，會默認(rèn)在該頁面添加一個返回上一頁的leading。
常用屬性解析：
title：標(biāo)題
centerTitle：標(biāo)題是否居中
elevation：陰影
leading：前導(dǎo)小部件
actions：在title之后的部件，可以顯示多個。
bottom：顯示在應(yīng)用欄底部的小部件
backgroundColor：背景顏色
10. FlutterLogo
以Widget的形式顯示一個Flutter的Logo，沒啥特別的。
11. Placeholder
一個繪制了一個盒子的widget，代表以后有widget將會被添加到該盒子中，就是占一個位置?？赡苡捎趥€人編程習(xí)慣，覺得這個沒什么太大用處
部分頁面效果如下：
項目源碼在我的GitHub flutter_widgets項目地址
項目與教程有時間會繼續(xù)更新，直至整個widgets目錄完成。喜歡的給個 ★star 支持，謝謝！如有錯誤之處或問題也可以在這里留言或者提issue給我~
