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有一套豐富、強(qiáng)大的基礎(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)注。
