Flutter 的界面基本由Widgets組成棉姐，widget需要位于MaterialApp內(nèi)才能正常顯示。
Flutter提供了許多widgets荐类，可幫助您構(gòu)建遵循Material Design的應(yīng)用程序境肾。
Material應(yīng)用程序以MaterialApp widget開始蚂夕， 該widget在應(yīng)用程序的根部創(chuàng)建了一些有用的widget翰绊，其中包括一個Navigator佩谷， 它管理由字符串標(biāo)識的Widget棧（即頁面路由棧）〖嗍龋可以讓您的應(yīng)用程序在頁面之間的平滑的過渡谐檀。 是否使用MaterialApp完全是可選的，但是使用它是一個很好的做法裁奇。
應(yīng)用程序繼承了 StatelessWidget桐猬，這將會使應(yīng)用本身也成為一個widget。 在Flutter中刽肠，大多數(shù)東西都是widget溃肪，包括對齊(alignment)、填充(padding)和布局(layout)
Scaffold 是 Material library 中提供的一個widget, 它提供了默認(rèn)的導(dǎo)航欄五垮、標(biāo)題和包含主屏幕widget樹的body屬性乍惊。widget樹可以很復(fù)雜杜秸。
Flutter有一套豐富放仗、強大的基礎(chǔ)widget，其中以下是很常用的：
- Text該 widget 可讓創(chuàng)建一個帶格式的文本撬碟。
設(shè)置文字&文字大小&顏色&行數(shù)限制&文本對齊
const Text( "hello flutter!",
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis, // 溢出顯示诞挨。。呢蛤。
style: TextStyle(fontSize: 30.0,// 文字大小
color: Colors.yellow),// 文字顏色
),
- Row 惶傻、Column 這些具有彈性空間的布局類Widget可讓您在水平（Row）和垂直（Column）方向上創(chuàng)建靈活的布局。其設(shè)計是基于web開發(fā)中的Flexbox布局模型其障。
//水平布局
Widget buildColumns() {
Row column = new Row(
children: <Widget>[
new Text('hello'),
new Icon(Icons.mail),
],
);
return column;
}
//垂直布局
Widget buildColumns1() {
Column column = new Column(
children: <Widget>[
new Icon(Icons.info),
new Icon(Icons.mail),
],
);
return column;
}
Stack： 取代線性布局 (譯者語：和Android中的LinearLayout相似)银室，Stack允許子 widget 堆疊， 你可以使用Positioned來定位他們相對于Stack的上下左右四條邊的位置。Stacks是基于Web開發(fā)中的絕度定位（absolute positioning )布局模型設(shè)計的蜈敢。Container： Container可讓您創(chuàng)建矩形視覺元素辜荠。container 可以裝飾為一個BoxDecoration,
Flutter的設(shè)計思想就是完全的widget化。這也就是說連最基本的padding,Center都是widget抓狭。設(shè)想一下如果每次寫view伯病，連padding,Center都要自己包一個組件是一種怎樣的體驗？作為一個工程師否过，別給只給我談思想午笛，實際操作的操作效率也同樣非常重要。flutter 官方也意識到了這個問題苗桂，他們從實際編寫效率的角提供了一個友好高效的封裝药磺，這就是Container！首先沒有任何疑問煤伟，Container 本身也是一個widget与涡。但是他卻提供了對基礎(chǔ)widget的封裝，提高了UI基礎(chǔ)裝飾能力的表達(dá)效率持偏。Container類似于android中的ViewGroup驼卖。
它是一個組合的widget，內(nèi)部有繪制widget鸿秆、定位widget酌畜、尺寸widget。后續(xù)看到的不少widget卿叽，都是通過一些更基礎(chǔ)的widget組合而成的桥胞。
Container的組成如下：Container參考文章
最里層的是child元素；
child元素首先會被padding包著考婴；
然后添加額外的constraints限制贩虾；
最后添加margin。
Container的繪制的過程如下：
首先會繪制transform效果沥阱；
接著繪制decoration缎罢；
然后繪制child；
最后繪制foregroundDecoration考杉。
- 裝飾
Decoration是對Container進(jìn)行裝飾的描述策精。其概念類似與android中的shape。一般實際場景中會使用他的子類BoxDecoration崇棠。BoxDecoration提供了對背景色咽袜，邊框，圓角枕稀，陰影和漸變等功能的定制能力询刹。
需要注意幾個點：
BoxDecoration的image屬性相當(dāng)于設(shè)置的是背景圖谜嫉。但是image會繪制在color 和gradient之上。
image是需要一個DecorationImage類的實現(xiàn)凹联。DecorationImage的屬性和Image組件比較類似骄恶，可以復(fù)用Image組件中的ImageProvider。
- 大小
BoxConstraints其實是對Container組件大小的描述匕垫。BoxConstraints屬性比較簡單僧鲁。如果不太清楚可以研究一下盒子模型。這里有個點需要重點說明一下：
如何表達(dá)盡可能大這樣的意思象泵？（類似于android中的match_parent）Flutter中可以使用double.infinity來做出類似的表達(dá)寞秃。
- 實踐Coding
設(shè)置邊框&padding&margin&圓角&背景圖
new Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(15.0),
margin: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.red,
),
image: const DecorationImage(
image: const NetworkImage(
'https://gw.alicdn.com/tfs/TB1CgtkJeuSBuNjy1XcXXcYjFXa-906-520.png',
),
fit: BoxFit.contain,
),
//borderRadius: const BorderRadius.all(const Radius.circular(6.0)),
borderRadius: const BorderRadius.only(
topLeft: const Radius.circular(3.0),
topRight: const Radius.circular(6.0),
bottomLeft: const Radius.circular(9.0),
bottomRight: const Radius.circular(0.0),
),
),
child: Text(''),
),
Scaffold是Material中主要的布局組件，現(xiàn)在來看看Scaffold的幾個重要屬性：
1偶惠、appBar appBar顯示在Scaffold的頂部春寿。
appBar: new AppBar(
title: new Text('Scaffold Widget Demo'),
centerTitle: true,
backgroundColor: Colors.red,
),
centerTitle：讓文本居中顯示。默認(rèn)是居左顯示
backgroundColor：導(dǎo)航欄背景顏色
2忽孽、backgroundColor 這個是整個Scaffold的背景顏色
3绑改、body 主要內(nèi)容的視圖區(qū)域，在這個里面兄一，展示的是你的核心內(nèi)容
4厘线、bottomNavigationBar 用于顯示底部導(dǎo)航欄
5、floatingActionButton 浮動于body右上角的按鈕
6出革、floatingActionButtonLocation 決定floatingActionButton按鈕的位置
stack
在實際開發(fā)中造壮，還是需要在一些Widgets的上面再覆蓋上新的Widgets。這時候就需要層式布局了骂束。這種布局在Native上耳璧，以android為例，類似于relativeLayout 或者FrameLayout展箱。在Flutter中使用的是Stack旨枯。
實際使用中Stack中的子Widgets分為兩種：
positioned
是包裹在組件Positioned中的組件
可以通過Positioned屬性靈活定位
non-positioned
沒有包裹在Positioned組件中
需要通過父Widget Stack 的屬性來控制布局
對于non-positioned children， 我們通過控制Stack的alignment屬性來控制對齊方式混驰。Positioned的布局方式類似于H5&weex中的position布局中的absolute布局方式攀隔。通過設(shè)置距離父組件上下左右的距離，Positioned對象能在Stack布局中更加靈活的控制view的展現(xiàn)方式账胧。
層疊布局
new Container(
color: Colors.yellow,
height: 150.0,
width: 500.0,
child: new Stack(children: <Widget>[
new Container(
color: Colors.blueAccent,
height: 50.0,
width: 100.0,
alignment: Alignment.center,
child: Text('unPositioned'),
),
new Positioned(
left: 40.0,
top: 80.0,
child: new Container(
color: Colors.pink,
height: 50.0,
width: 95.0,
alignment: Alignment.center,
child: Text('Positioned'),
)),
]))
Visibility
當(dāng)你看完Flutter Widge文檔的時候竞慢，我們突然發(fā)現(xiàn)一個略顯尷尬的問題：組件是否顯示怎么控制？貌似所有的組件中都沒有這個屬性治泥！這不坑了，咋辦遮精？
目前看方法無非如下幾個：
- 刪除法
核心將該真實widget或者widget樹從renderTree中移除居夹。
具體到實踐級別主要分為兩個：
單個組件‘隱藏’自己败潦。在build方法中返回一個空的Container.
@override
Widget build(BuildContext context) {
return isVisible
? Widget //真的Widget
: new Container(); //空Widget 僅僅占位 并不顯示
}
多個child
在父容器的children字段的list中，刪除掉對應(yīng)的cell准脂。
- Offstage
Offstage 是一個widget劫扒。Offstage的offstage屬性設(shè)置為true，那么Offstage以及他的child都將不會被繪制到界面上狸膏。
sample code如下：
@override
Widget build(BuildContext context) {
return new Offstage(
offstage: !isVisible,
child:child);
}
- 透明度
設(shè)置widget的透明度沟饥，使之不可見。但是這樣的方法是副作用的湾戳。因為這個對應(yīng)的widget樹是已經(jīng)經(jīng)過了完整的layout&paint過程贤旷，成本高。同時設(shè)置透明度本身也要耗費一定的計算資源砾脑，造成了二次浪費幼驶。需要注意的是即便變透明了，占據(jù)的位置還在韧衣。大家慎重選擇使用盅藻。
sample code如下：
@override
Widget build(BuildContext context) {
return new AnimatedOpacity(
duration: Duration(milliseconds: 10),
opacity: isVisible ? 1.0 : 0.0,
child:child);
}
visibility的控制還是比較麻煩的。這是Flutter設(shè)計上不符合正常習(xí)慣的一個點畅铭，需要大家重點關(guān)注氏淑。
