因?yàn)楣P者本身主要從事是Android開發(fā)弄抬，所以很多角度都是作為一個(gè)Android開發(fā)者學(xué)習(xí)Flutter的角度出發(fā)嗅辣，IOS或者H5的開發(fā)同學(xué)可以選擇性閱讀
目錄
StatelessWidget基礎(chǔ)組件展示
前言
StatelessWidget和StatefulWidget這兩個(gè)組件可以說是Flutter中最基礎(chǔ)也是最重要的兩個(gè)組件胯陋，從字面意思理解就是一個(gè)是有狀態(tài)的，一個(gè)是無(wú)狀態(tài)的社裆。我原本想對(duì)這兩個(gè)概念進(jìn)行一番解釋的效览，我自己在學(xué)習(xí)Flutter的時(shí)候也是看了不少對(duì)這兩個(gè)概念的解釋的相關(guān)文章，但是大部分實(shí)際上都是搬運(yùn)自官網(wǎng)的刹孔，所以如果你完全沒有接觸過Flutter啡省，這里還是先推薦大家看一下官網(wǎng)。然后看完官網(wǎng)的介紹之后髓霞，你可能已經(jīng)懂了這兩個(gè)組件的區(qū)別卦睹，或者你可能似懂非懂，其實(shí)這些都沒有關(guān)系的方库，我認(rèn)為最重要的還是我們要實(shí)際敲一敲代碼结序，使用一下他們，回過頭來再看纵潦，就非常好理解了徐鹤，所以這里我還是先不過多的進(jìn)行解釋了
本節(jié)直接介紹繼承自StatelessWidget的一些常用組件，大家可以通過實(shí)際使用來感受一下他們的共同特點(diǎn)邀层，下一節(jié)會(huì)介紹繼承自StatefulWidget相關(guān)的組件凳干。看完這兩節(jié)被济，自己動(dòng)手敲一下代碼救赐。我相信大家再去理解這兩個(gè)組件的意義應(yīng)該就很好理解了
Container
Container其實(shí)就可以理解為一個(gè)容器，個(gè)人認(rèn)為最大的作用就是可以通過BoxDecoration來設(shè)置背景只磷、邊框或陰影经磅，以及內(nèi)外邊距、尺寸這些钮追。
這些特點(diǎn)预厌，對(duì)于Android開發(fā)的同學(xué)來說，會(huì)覺得這個(gè)類的功能是不是太簡(jiǎn)單了元媚，因?yàn)锳ndroid中的LinearLayout和FrameLayout等等這些布局組件都包含上述的這些能力轧叽，除此之外他們還有各自的布局特性，諸如水平布局刊棕，垂直布局炭晒，疊加布局等。但是Flutter中把這些特性拆的比較細(xì)甥角，F(xiàn)lutter中也有水平（Row）网严、垂直（Column）、疊加（Stack）這些布局組件嗤无，這些我們后面的章節(jié)會(huì)詳細(xì)介紹震束，但是他們的功能幾乎僅限于用來布局怜庸，并不支持設(shè)置背景、內(nèi)外邊距垢村、尺寸這些參數(shù)割疾，所以在Flutter中我們還是會(huì)經(jīng)常用到這個(gè)Container組件的
Container(
decoration: BoxDecoration(color: Colors.blue),
alignment: Alignment.center,
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
width:100,
heigt:100,
child: Text("hello world"),
)
Text
Text類似Android中的TextView，可以設(shè)置文本內(nèi)容嘉栓，字體樣式等
Text(
"I am Text",
style: TextStyle(fontSize: 20),
)
Icon
主要用于一些矢量圖標(biāo)杈曲，可設(shè)置大小顏色，Icons 定義了一系列IconData的枚舉值胸懈，包含了material design的所有內(nèi)置圖標(biāo)担扑，所以如果有需要，你可以像下面這樣直接使用所需要的圖標(biāo)
Icon(
Icons.android,//設(shè)置圖標(biāo)
size: 50,
color: Colors.red,
)
當(dāng)然你也可以使用矢量圖庫(kù)中的資源趣钱，如阿里巴巴的圖標(biāo)庫(kù)
const IconData(
this.codePoint, //該圖標(biāo)在字體中的編碼
{
this.fontFamily,//所屬字體
this.fontPackage,//字體所屬的包
this.matchTextDirection = false,//是否啟用鏡像涌献，向左還是向右
}
);
將下載的 iconfont.ttf 復(fù)制到項(xiàng)目 fonts 目錄
配置 pubspec.yaml 文件，將字體文件引入（如果沒有fonts文件夾需要先創(chuàng)建）
fonts:
- family: iconfont
fonts:
- asset: fonts/iconfont.ttf
- 查看iconfont.css首有，將content字段中 \替換成0x即可得到對(duì)應(yīng)的code
- 通過IconData使用圖標(biāo)
Icon(
IconData(0xeb95, fontFamily: 'iconfont'),
size: 50,
color: Colors.red,
)
RaisedButton
RausedButton是凸起燕垃、有陰影的按鈕。只設(shè)置按鈕樣式不設(shè)置其他屬性的情況下井联，樣式就類似于Android中的Button
RaisedButton(
child: Text("RaisedButton"), // 按鈕字樣
color: Colors.red, // 背景顏色
splashColor: Colors.blue, // 水波紋顏色
highlightColor: Colors.green, // 長(zhǎng)按顏色
textColor: Colors.white, // 文本顏色
padding: EdgeInsets.fromLTRB(10, 10, 10, 10), // 設(shè)置四個(gè)方向的內(nèi)邊距
shape: RoundedRectangleBorder( // 設(shè)置按鈕形狀為圓角矩形
borderRadius: BorderRadius.all(Radius.circular(10)),
),
onPressed: () {},
),
FlatButton
FlatButton是扁平卜壕、無(wú)陰影的按鈕，與RaisedButton的屬性十分類似
大多數(shù)使用FlatButton的場(chǎng)景烙常，有點(diǎn)類似于Android中給TextView設(shè)置一個(gè)點(diǎn)擊事件
FlatButton(
child: Text("FlatButton"),
textColor: Colors.red,
onPressed: () {},
)
OutlineButton
OutlineButton是帶邊框的按鈕
OutlineButton(
child: Text("OutlineButton"),
borderSide: BorderSide(color: Colors.red), // 自定義邊框顏色
splashColor: Colors.blue,
highlightColor: Colors.green,
textColor: Colors.red,
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
onPressed: () {},
)
IconButton
IconButton是帶圖標(biāo)的按鈕
上面的RaisedButton轴捎、FlatButton、OutlineButton都是繼承自MaterialButton蚕脏，MaterialButton再繼承自StatelessWidget侦副。而IconButton則是直接繼承自StatelessWidget。如果想使用水波紋等點(diǎn)擊效果驼鞭，需要在外面再套一層Material widget秦驯，如下所示
Material(
type: MaterialType.circle,
color: Colors.transparent,
clipBehavior: Clip.antiAlias,
child: IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 30,
color: Colors.blue,
splashColor: Colors.blue,
highlightColor: Colors.green,
onPressed: () {},
),
)
原因是：點(diǎn)擊效果是水波紋的，這個(gè)需要在最近的一個(gè)Material類控件里繪制挣棕，并不是在控件的本體使用译隘。參考https://stackoverflow.com/questions/56231322/why-flutter-iconbutton-animation-shows-under-the-row
Chip
chip組件就是對(duì)Android開發(fā)中經(jīng)常需要用到的一個(gè)UI樣式進(jìn)行了封裝。（具體效果看了上面的圖應(yīng)該就懂了）
Chip(
label: Text("StatelessWidget常用基礎(chǔ)組件"),
avatar: Icon(Icons.photo),
)
Divider
Divider顧名思義就是分割線洛心，但是Divider的高度（即線的粗細(xì)）是固定的固耘，無(wú)法主動(dòng)設(shè)置，所以往往可以用Container代替
Divider(
height: 20, //容器高度皂甘，不是線的高度（無(wú)法設(shè)置線的高度玻驻，可以用Container代替）
indent: 10, //左邊間距
endIndent: 10, //右邊間距
color: Colors.amber,
)
Card
Card類似Android中的CardView，可以設(shè)置背景偿枕、陰影璧瞬、外邊距（注意不能設(shè)置內(nèi)邊距）。一般可以用在列表的Item中
Card(
color: Colors.blue,
elevation: 10, //陰影
clipBehavior: Clip.antiAlias,//抗鋸齒
margin: EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.all(10),
child: Text("I am Card"),
),
)
AlertDialog
AlertDialog從名稱來看顯而易見就是對(duì)話框組件渐夸，但在Flutter中它和前面這些組件一樣嗤锉，單獨(dú)使用的話，僅僅是一個(gè)UI的樣式墓塌，即不包含Android中DIalog的各種屬性瘟忱，例如并不包含Dialog外部的半透明蒙層，也沒有點(diǎn)擊Dialog外部即可dismiss對(duì)話框的這些邏輯
但是不用擔(dān)心苫幢，我們可以將AlertDialog組件放入Flutter自帶的ShowDialog方法中访诱，使用方式如下
Future<Null> _openAlertDialog(BuildContext context) async {
final action = await showDialog(
context: context,
barrierDismissible: false, //// user must tap button!
builder: (context) {
return AlertDialog(
title: Text("這是標(biāo)題"),
titlePadding: EdgeInsets.only(top: 10, left: 10),
content: Text("這是內(nèi)容"),
contentPadding: EdgeInsets.all(10),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("取消")),
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("確定"))
],
);
},
);
return null;
}
這樣就能顯示一個(gè)和Android原生體驗(yàn)類似的對(duì)話框。當(dāng)然你也可以不使用AlertDialog韩肝，而是使用自己自定義的UI樣式
總結(jié)
這里主要就是給大家快速展示一下StatelessWdget相關(guān)組件的作用以及一些基本的用法触菜，對(duì)于我自己來說也起到一個(gè)歸納整理的作用，但是每個(gè)組件里面其實(shí)還有很多屬性文章中沒有用到哀峻，這些大家可以自己實(shí)際在項(xiàng)目中試一試涡相，如果想詳細(xì)了解某一個(gè)組件，網(wǎng)上也有很多文章講的比較詳細(xì)的剩蟀，所以這里針對(duì)每一個(gè)組件就不說的那么細(xì)了
