4、快速了解 Flutter 上手更容易

image.png

從上圖我們能夠看出 Flutter 的核心設(shè)計(jì)圍繞著 Widget 的窑眯。

1屏积、組件

• Text

Text 是UI開發(fā)的最重要的組件之一，文字展示都要靠 Text 組件來完成磅甩，
Flutter的 Text組件 屬性很豐富炊林。

const Text(this.data, {
  Key key,
   this.style,  //風(fēng)格樣式，沒設(shè)置的話默認(rèn)使用 DefaultTextStyle
   this.textAlign,   //文本水平如何對(duì)齊
   this.textDirection,  //方向性
   this.locale,   
   this.softWrap, // 文本是否換行符換行更胖，如何為false铛铁，那么文本就會(huì)一直水平顯示
   this.overflow, // 處理文本溢出的視覺效果
   this.textScaleFactor, //字體像素?cái)?shù)  
   this.maxLines, //可選的文本最大行數(shù)隔显，必要時(shí)進(jìn)行換行。
   this.semanticsLabel, //語(yǔ)義標(biāo)簽
}) : assert(data != null),
     textSpan = null,
     super(key: key);

• Image

 const Image({
   Key key,
   @required this.image,
   this.semanticLabel, //圖像的語(yǔ)義描述
   this.excludeFromSemantics = false, //是否從語(yǔ)義中刪除該圖像饵逐。
   this.width, //寬度
   this.height, //高度
   this.color, // 顏色
   this.colorBlendMode, // 讓顏色和圖混合在一起
   this.fit, // 如何將圖像顯示括眠。有以下幾種模式 fill 、contain倍权、cover掷豺、fitWidth、fitHeight薄声、none当船、scaleDown
   this.alignment = Alignment.center, // 圖片的邊界內(nèi)對(duì)齊。
   this.repeat = ImageRepeat.noRepeat, // 繪制沒有被圖片覆蓋的部分
   this.centerSlice,  //圖像中心切片內(nèi)的區(qū)域?qū)⑼瑫r(shí)被拉伸
   this.matchTextDirection = false, //是否按照 TextDirection 的方向繪制圖了
   this.gaplessPlayback = false,  //是繼續(xù)顯示舊圖片默辨，還是不顯示 （圖片被修改時(shí)）
   this.filterQuality = FilterQuality.low,  //設(shè)置質(zhì)量
 }) : assert(image != null),
      assert(alignment != null),
      assert(repeat != null),
      assert(filterQuality != null),
      assert(matchTextDirection != null),
      super(key: key);

• Container（容器）

Container 本身是一個(gè)widget德频。但是他卻提供了對(duì)基礎(chǔ)widget的封裝，提高了UI基礎(chǔ)裝飾能力的表達(dá)效率缩幸。

Container({
   Key key,
   this.alignment,  // 容器內(nèi)對(duì)齊
   this.padding,  //設(shè)置內(nèi)邊距屬性壹置，內(nèi)邊距的空白區(qū)域  示例 new EdgeInsets.all(8.0),
   Color color,  //顏色
   Decoration decoration, // 一般實(shí)際場(chǎng)景中會(huì)使用他的子類BoxDecoration。BoxDecoration提供了對(duì)背景色表谊，邊框钞护，圓角，陰影和漸變等功能的定制能力爆办。
   this.foregroundDecoration, // decoration 要設(shè)置在  child 前面
   double width, //寬
   double height, // 高
   BoxConstraints constraints, //約束 
   this.margin,  // decoration 與 child 的空間
   this.transform,  //  decoration 轉(zhuǎn)換
   this.child,  // 容器內(nèi)的元素 例如 Text('我是誰(shuí)'),
 }) 

• GestureDetector（手勢(shì)）

使用時(shí)只需要將GestureDetector包裹在目標(biāo)widget外面难咕，再實(shí)現(xiàn)對(duì)應(yīng)事件的函數(shù)即可。從點(diǎn)擊到長(zhǎng)按距辆，從縮放到拖動(dòng)余佃，這個(gè)類基本上都有相應(yīng)的實(shí)現(xiàn)。

GestureDetector({
   Key key,
   this.child,
   this.onTapDown,
   this.onTapUp,
   this.onTap,
   this.onTapCancel,
   this.onDoubleTap,
   this.onLongPress,
   this.onLongPressUp,
   this.onVerticalDragDown,
   this.onVerticalDragStart,
   this.onVerticalDragUpdate,
   this.onVerticalDragEnd,
   this.onVerticalDragCancel,
   this.onHorizontalDragDown,
   this.onHorizontalDragStart,
   this.onHorizontalDragUpdate,
   this.onHorizontalDragEnd,
   this.onHorizontalDragCancel,
   this.onForcePressStart,
   this.onForcePressPeak,
   this.onForcePressUpdate,
   this.onForcePressEnd,
   this.onPanDown,
   this.onPanStart,
   this.onPanUpdate,
   this.onPanEnd,
   this.onPanCancel,
   this.onScaleStart,
   this.onScaleUpdate,
   this.onScaleEnd,
   this.behavior,
   this.excludeFromSemantics = false
 })

2挑格、布局

Flutter布局分為：

• SingleChildRenderObjectWidget
  1咙冗、 center
  2、padding
  3漂彤、container

• MultiChildRenderObjectWidget
  1雾消、stack
  2、flex
  3挫望、flow

• Flex

Flex.png

上面的是 flex 布局概念

flex通過direction設(shè)置了flex的主軸方向即main axis立润。
和主軸垂直的方向叫做cross axis。
flex布局中對(duì)子布局的控制是從main axis 和cross axis兩個(gè)方向上進(jìn)行的媳板。
例如居中有main axis居中和cross axis居中桑腮。兩者都居中才是容器的完全居中。

crossAxisAlignment蛉幸、mainAxisAlignment 和 Column 破讨、Row 一起使用更爽

Column.png

Row.png

• Stack （實(shí)現(xiàn)層式布局）

開發(fā)過程中丛晦，我們通常需要在一些 Widgets 的上面再覆蓋上新的 Widgets 。
我們就用到了 Stack

• positioned 可以通過Positioned屬性靈活定位
• non-positioned 通過父Widget Stack 的屬性來控制布局

對(duì)于non-positioned children提陶， 我們通過控制Stack的alignment屬性來控制對(duì)齊方式烫沙。
Positioned的布局方式類似于H5&weex中的position布局中的absolute布局方式。
通過設(shè)置距離父組件上下左右的距離隙笆，Positioned對(duì)象能在Stack布局中更加靈活的控制view的展現(xiàn)方式锌蓄。

組件隱藏

• 父容器的list中 刪除要隱藏的cell
• offstage 屬性設(shè)置為 true ，在Offstage 上面的 child 包括它本身都不會(huì)被繪制撑柔。
• 使用透明度（不建議使用）

3瘸爽、生命周期

• Stack 生命周期

didChangeDependencies state依賴的對(duì)象發(fā)生變化時(shí)調(diào)用

名稱	狀態(tài)
initState	插入渲染樹時(shí)調(diào)用，只調(diào)用一次
didChangeDependencies	state依賴的對(duì)象發(fā)生變化時(shí)調(diào)用
didUpdateWidget	組件狀態(tài)改變時(shí)候調(diào)用铅忿，可能會(huì)調(diào)用多次
build	構(gòu)建Widget時(shí)調(diào)用
deactivate	當(dāng)移除渲染樹的時(shí)候調(diào)用
dispose	組件即將銷毀時(shí)調(diào)用

state 生命周期.png

注意

這里的狀態(tài)改變包括兩種可能：
1.通過setState內(nèi)容改變
2.父節(jié)點(diǎn)的state狀態(tài)改變剪决，導(dǎo)致子節(jié)點(diǎn)的同步變化。

• StatelessWidget 和 StatefulWidget的區(qū)別

StatelessWidget是狀態(tài)不可變的widget檀训。初始狀態(tài)設(shè)置以后就不可再變化昼捍。如果需要變化需要重新創(chuàng)建。
StatefulWidget可以保存自己的狀態(tài)肢扯。
那問題是既然widget都是immutable的，怎么保存狀態(tài)担锤？
其實(shí)Flutter是通過引入了State來保存狀態(tài)蔚晨。當(dāng)State的狀態(tài)改變時(shí)，能重新構(gòu)建本節(jié)點(diǎn)以及child的Widget樹來進(jìn)行UI變化肛循。
注意：如果需要主動(dòng)改變State的狀態(tài)铭腕，需要通過setState()方法進(jìn)行觸發(fā)，單純改變數(shù)據(jù)是不會(huì)引發(fā)UI改變的多糠。

• 內(nèi)存問題

目前發(fā)現(xiàn)的問題：大量的push 加載 圖片會(huì)造成內(nèi)存暴漲導(dǎo)致閃退累舷，

原因：是 Flutter 的加載機(jī)制，如果不進(jìn)行任何處理夹孔， 每次加載圖片被盈，不管有沒有渲染到界面上的圖片都會(huì)去加載，所以頻繁刷頁(yè)面會(huì)造成內(nèi)存峰值過高搭伤，關(guān)于 widgets 官方介紹點(diǎn)擊這里

解決：在頁(yè)面不可見的時(shí)候不發(fā)出多余的圖片加載請(qǐng)求只怎。

內(nèi)存調(diào)試工具 Xcode Instruments

部分內(nèi)容借鑒引用咸魚技術(shù)