Flutter開發(fā)環(huán)境搭建好后，就可以開始開發(fā)了。
有狀態(tài)組件與無狀態(tài)組件
在Flutter 中，一切皆組件：Widget。組件Widget又分為兩種：
1.StatefulWidget（有狀態(tài)組件）:如果一個(gè)控件，它需要隨著用戶交互或者內(nèi)部的值、狀態(tài)需要根據(jù)不同的外部業(yè)務(wù)變化而改變的話，那么這個(gè)組件就需要被設(shè)計(jì)為有狀態(tài)的。比如TextField輸入隨著輸入變化而變化。
2.StatelessWidget(無狀態(tài)組件)：對比有狀態(tài)的組件，無狀態(tài)的組件是不變的，不需要隨著業(yè)務(wù)變化而變化，比如一個(gè)固定的Text文本展示控件，他是不需要隨著用戶交互而改變的，我們把它定為無狀態(tài)的。
在Flutter中，沒有Controller和Activity的控制器的概念，所有的page也都是一個(gè)Widget. 一個(gè)頁面基本上都是有交互的，所以，一般我們新建一個(gè)page都是繼承：StatefulWidget，示例代碼：
class CommonWebPage extends StatefulWidget {
final String url;
//添加構(gòu)造函數(shù)
CommonWebPage({this.url});
@override
State<StatefulWidget> createState() {
return _CommonWebPageState();
}
}
上面例子中，我們新建了一個(gè)名為CommonWebPage的頁面，由于它是由狀態(tài)的，所以必須要復(fù)寫他的狀態(tài)方法：createState（），這個(gè)狀態(tài)方法返回的是專門管理這個(gè)page的狀態(tài)類：_CommonWebPageState。
那么這個(gè)狀態(tài)類又是什么呢？下面代碼就是這個(gè)狀態(tài)類：
class _CommonWebPageState extends State<CommonWebPage> {
@override
Widget build(BuildContext context) {
return new WebviewScaffold(
url: widget.url,
appBar: _navigationBar(),
);
}
}
上面代碼中，這個(gè)狀態(tài)類繼承State，由于這個(gè)狀態(tài)類是為CommonWebPage頁面服務(wù)的，所以泛型為這個(gè)頁面。這些是dart語法，前期可以先不用關(guān)注dart的語法，先記住這個(gè)固定的寫法：
先創(chuàng)建一個(gè)繼承StatefulWidget的頁面類，然后在創(chuàng)建一個(gè)繼承State<page類>，然后復(fù)寫build()方法。
這個(gè)build（）其實(shí)就是這個(gè)頁面里面的布局組件了。bulid里面布局的控件即渲染出來的頁面樣式。
頁面狀態(tài)變化更新機(jī)制
前面講了有狀態(tài)組件，你肯定會想知道，既然是有狀態(tài)交互變化，那么狀態(tài)值變化怎么讓頁面更新的呢？這里就要說一下setState（）。
setState()
Flutter通過setState來重新渲染頁面，也就是說：如果代碼執(zhí)行了setState（）方法，那么build()會重新執(zhí)行一遍，build（）里面會根據(jù)最新的頁面顯示重新渲染新的頁面。【其實(shí)這套機(jī)制和RN是一樣，如果你以前了解過ReactNative的話】。
現(xiàn)在我們舉個(gè)例子說明：
下圖是要給webpage頁面加載h5的過程，當(dāng)頁面在加載過程中，中間標(biāo)題為空，當(dāng)加載結(jié)束后，導(dǎo)航欄上顯示標(biāo)題。
我們首先需要定義一個(gè)變量title:
String title; //默認(rèn)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),
);
}
我們關(guān)注中間設(shè)置標(biāo)題的代碼：
middle: Text(this.title==null?"":this.title),
這句話很好解釋，當(dāng)title為空的時(shí)候，標(biāo)題顯示空字符（即不顯示），有內(nèi)容就顯示標(biāo)題內(nèi)容。當(dāng)頁面加載中的時(shí)候，title為空，所以顯示成上圖一的效果。那么如果在加載完成后，title獲取了值后，讓頁面重新顯示成圖二呢？
那么我們再頁面加載完成，獲取title的代碼：
//獲取h5頁面標(biāo)題
Future<String> getWebTitle() async {
String script = 'window.document.title';
var title = await
flutterWebViewPlugin.evalJavascript(script);
setState(() {
this.title = title;
print('#################### $title');
});
return title;
}
其中關(guān)鍵代碼：
setState(() {
this.title = title;
});
這只title的代碼放在了setState()里面，那么該代碼執(zhí)行完成后，會自動觸發(fā)build()方法重新執(zhí)行，重新執(zhí)行到middle: Text(this.title==null?"":this.title),這時(shí)候title就已經(jīng)有值了，頁面標(biāo)題就顯示出來了。
頁面布局
Flutter頁面布局采用的是Flex布局原理，和ReactNative是一樣的。如果你之前熟悉Flex布局，那么掌握Flutter頁面布局將非常容易上手。
以下面頁面為例：
上圖展現(xiàn)的是一個(gè)商品列表的布局樣式：整體：左右模式（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布局里可以設(shè)置margin和padding。
只有Row和Column的子元素可以是多個(gè)（children）;
其他的布局組件（Container， Center，Padding，Expanded）子元素只能一個(gè)：child.
Expanded組件表示：父容器剩余的空間應(yīng)該如何利用：
flex: 0 自己盡量不擴(kuò)展自己的大小。
flex: 1 占滿父容器剩余的空間。
一般我們都是設(shè)置flex:1 (默認(rèn)是1，可以不寫)。
列表組件：ListView
ListView是Flutter內(nèi)置的組件，相當(dāng)于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表示列表元素個(gè)數(shù)；
itemBuilder：迭代的每一行里面的cell布局。
這期暫時(shí)講到這里，下期講網(wǎng)絡(luò)請求。
