Flutter開發(fā)環(huán)境搭建好后取胎，就可以開始開發(fā)了霎迫。
有狀態(tài)組件與無狀態(tài)組件
在Flutter 中，一切皆組件：Widget吃既。組件Widget又分為兩種：
1.StatefulWidget（有狀態(tài)組件）:如果一個控件拒秘，它需要隨著用戶交互或者內(nèi)部的值号显、狀態(tài)需要根據(jù)不同的外部業(yè)務變化而改變的話，那么這個組件就需要被設計為有狀態(tài)的躺酒。比如TextField輸入隨著輸入變化而變化押蚤。
2.StatelessWidget(無狀態(tài)組件)：對比有狀態(tài)的組件，無狀態(tài)的組件是不變的羹应，不需要隨著業(yè)務變化而變化揽碘，比如一個固定的Text文本展示控件，他是不需要隨著用戶交互而改變的园匹，我們把它定為無狀態(tài)的钾菊。
在Flutter中，沒有Controller和Activity的控制器的概念偎肃，所有的page也都是一個Widget. 一個頁面基本上都是有交互的，所以浑此，一般我們新建一個page都是繼承：StatefulWidget累颂，示例代碼：
class CommonWebPage extends StatefulWidget {
final String url;
//添加構造函數(shù)
CommonWebPage({this.url});
@override
State<StatefulWidget> createState() {
return _CommonWebPageState();
}
}
上面例子中，我們新建了一個名為CommonWebPage的頁面凛俱，由于它是由狀態(tài)的紊馏，所以必須要復寫他的狀態(tài)方法：createState（），這個狀態(tài)方法返回的是專門管理這個page的狀態(tài)類：_CommonWebPageState蒲犬。
那么這個狀態(tài)類又是什么呢朱监？下面代碼就是這個狀態(tài)類：
class _CommonWebPageState extends State<CommonWebPage> {
@override
Widget build(BuildContext context) {
return new WebviewScaffold(
url: widget.url,
appBar: _navigationBar(),
);
}
}
上面代碼中，這個狀態(tài)類繼承State原叮，由于這個狀態(tài)類是為CommonWebPage頁面服務的赫编，所以泛型為這個頁面。這些是dart語法奋隶，前期可以先不用關注dart的語法擂送，先記住這個固定的寫法：
先創(chuàng)建一個繼承StatefulWidget的頁面類，然后在創(chuàng)建一個繼承State<page類>唯欣，然后復寫build()方法嘹吨。
這個build（）其實就是這個頁面里面的布局組件了。bulid里面布局的控件即渲染出來的頁面樣式境氢。
頁面狀態(tài)變化更新機制
前面講了有狀態(tài)組件蟀拷，你肯定會想知道碰纬，既然是有狀態(tài)交互變化，那么狀態(tài)值變化怎么讓頁面更新的呢问芬？這里就要說一下setState（）悦析。
setState()
Flutter通過setState來重新渲染頁面，也就是說：如果代碼執(zhí)行了setState（）方法愈诚，那么build()會重新執(zhí)行一遍她按，build（）里面會根據(jù)最新的頁面顯示重新渲染新的頁面】蝗幔【其實這套機制和RN是一樣酌泰，如果你以前了解過ReactNative的話】。
現(xiàn)在我們舉個例子說明：
下圖是要給webpage頁面加載h5的過程匕累，當頁面在加載過程中陵刹，中間標題為空，當加載結束后欢嘿，導航欄上顯示標題衰琐。
我們首先需要定義一個變量title:
String title; //默認null
我們頁面build()代碼如下：
@override
Widget build(BuildContext context) {
return new WebviewScaffold(
url: widget.url,
appBar: _navigationBar(),
);
}
PreferredSizeWidget _navigationBar () {
return PreferredSize(
child: new Stack(
children: <Widget>[
new CupertinoNavigationBar(
middle: Text(this.title==null?"":this.title),
border: Border.all(width: 0, color: CupertinoColors.darkBackgroundGray),
),
new Positioned(
child: _progressBar(),
left: 0,
bottom: 0,
width: window.physicalSize.width/2,
height: loading ? 2 : 0,
)
],
),
preferredSize: Size(window.physicalSize.width/2,44),
);
}
我們關注中間設置標題的代碼：
middle: Text(this.title==null?"":this.title),
這句話很好解釋，當title為空的時候炼蹦，標題顯示空字符（即不顯示）羡宙，有內(nèi)容就顯示標題內(nèi)容。當頁面加載中的時候掐隐，title為空狗热，所以顯示成上圖一的效果。那么如果在加載完成后虑省，title獲取了值后匿刮，讓頁面重新顯示成圖二呢？
那么我們再頁面加載完成探颈，獲取title的代碼：
//獲取h5頁面標題
Future<String> getWebTitle() async {
String script = 'window.document.title';
var title = await
flutterWebViewPlugin.evalJavascript(script);
setState(() {
this.title = title;
print('#################### $title');
});
return title;
}
其中關鍵代碼：
setState(() {
this.title = title;
});
這只title的代碼放在了setState()里面熟丸，那么該代碼執(zhí)行完成后，會自動觸發(fā)build()方法重新執(zhí)行伪节，重新執(zhí)行到middle: Text(this.title==null?"":this.title),這時候title就已經(jīng)有值了光羞，頁面標題就顯示出來了。
頁面布局
Flutter頁面布局采用的是Flex布局原理架馋，和ReactNative是一樣的狞山。如果你之前熟悉Flex布局，那么掌握Flutter頁面布局將非常容易上手叉寂。
以下面頁面為例：
上圖展現(xiàn)的是一個商品列表的布局樣式：整體：左右模式（Row）萍启； 右邊里面：上下模式(Column)。
下面貼出代碼：
new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
new Container(
margin: new EdgeInsets.fromLTRB(0, 0, 12, 10),
color: new Color(0xfff5f5f5),
width: 100,
height: 100,
child: new Image(image: NetworkImage(item.imageUrl),fit: BoxFit.cover,)
),
Expanded(
child: new Container(
height: 100,
child: rightColomnWidget(index)
),
)
],
),
//右邊的列布局
Widget rightColomnWidget(int index) {
GoodsModel item = dataList[index];
return new Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Text(
item.goodsName,
style: new TextStyle(
color: CupertinoColors.darkBackgroundGray,
fontSize: 18,
fontWeight: FontWeight.w600,
)
),
new Text(
item.goodsDesc,
softWrap: true,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: new TextStyle(
color: CupertinoColors.darkBackgroundGray,
fontSize: 15,
)
),
new Text(
item.goodsPrice + '元',
style: new TextStyle(
color: CupertinoColors.destructiveRed,
fontSize: 18,
fontWeight: FontWeight.w500,
)
)
],
);
}
mainAxisAlignment: 主軸方向子元素如何排列。
crossAxisAlignment：次軸方向子元素如何排列勘纯。
Container布局里可以設置margin和padding局服。
只有Row和Column的子元素可以是多個（children）;
其他的布局組件（Container， Center驳遵，Padding淫奔，Expanded）子元素只能一個：child.
Expanded組件表示：父容器剩余的空間應該如何利用：
flex: 0 自己盡量不擴展自己的大小。
flex: 1 占滿父容器剩余的空間堤结。
一般我們都是設置flex:1 (默認是1唆迁，可以不寫)。
列表組件：ListView
ListView是Flutter內(nèi)置的組件竞穷，相當于iOS 中的UITableview.
ListView用法：
new ListView.builder(
itemCount: dataList.length,
itemBuilder: (context, index){
return new Center(
child: new Container(
margin: new EdgeInsets.fromLTRB(12, 5, 12, 5),
child: new Column(
children: <Widget>[
rowWidget(index),
//分隔線
new Divider(height: 0.5,)
],
)
),
);
},
itemCount表示列表元素個數(shù)唐责；
itemBuilder：迭代的每一行里面的cell布局。
這期暫時講到這里瘾带，下期講網(wǎng)絡請求鼠哥。
