一湿刽，基礎(chǔ)控件

1，Text

1.1,繼承關(guān)系
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Text

1.2 創(chuàng)建Text
Text一共有三種構(gòu)造方法

1.3 Text

• 構(gòu)造方法源碼：

 /// Creates a text widget.
  /// If the [style] argument is null, the text will use the style from the closest enclosing [DefaultTextStyle].
  const Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }) : assert(data != null), textSpan = null, super(key: key);

• 用法

new Text(
              '學(xué)習(xí)Text',
              textAlign: TextAlign.center, //文本對(duì)齊方式  居中
              textDirection: TextDirection.ltr, //文本方向
              softWrap: false, //是否自動(dòng)換行 false文字不考慮容器大小  單行顯示   超出；屏幕部分將默認(rèn)截?cái)嗵幚?              overflow: TextOverflow
                  .ellipsis, //文字超出屏幕之后的處理方式  TextOverflow.clip剪裁   TextOverflow.fade 漸隱  TextOverflow.ellipsis省略號(hào)
              textScaleFactor: 2.0, //字體顯示的賠率
              maxLines: 10, //最大行數(shù)
              style: new TextStyle(
                decorationColor: const Color(0xffffffff), //線的顏色
                decoration: TextDecoration
                    .none, //none無(wú)文字裝飾   lineThrough刪除線   overline文字上面顯示線    underline文字下面顯示線
                decorationStyle: TextDecorationStyle
                    .solid, //文字裝飾的風(fēng)格  dashed,dotted虛線(簡(jiǎn)短間隔大小區(qū)分)  double三條線  solid兩條線
                wordSpacing: 0.0, //單詞間隙(負(fù)值可以讓單詞更緊湊)
                letterSpacing: 0.0, //字母間隙(負(fù)值可以讓字母更緊湊)
                fontStyle: FontStyle.italic, //文字樣式豫尽，斜體和正常
                fontSize: 20.0, //字體大小
                fontWeight: FontWeight.w900, //字體粗細(xì)  粗體和正常
                color: const Color(0xffffffff), //文字顏色
              )

1.4 Text.rich()鳖宾、new RichText()

• 構(gòu)造方法源碼：

/// Creates a text widget with a [TextSpan].
  const Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }): assert(textSpan != null), data = null, super(key: key);

  /// Creates a paragraph of rich text.
  const RichText({
    Key key,
    @required this.text,
    this.textAlign = TextAlign.start,
    this.textDirection,
    this.softWrap = true,
    this.overflow = TextOverflow.clip,
    this.textScaleFactor = 1.0,
    this.maxLines,
    this.locale,
  }) : assert(text != null) ,assert(textAlign != null), assert(softWrap != null), assert(overflow != null),
       assert(textScaleFactor != null), assert(maxLines == null || maxLines > 0), super(key: key);

• 用法:

new TextSpan(
                text: '拼接1',
              ),
              new TextSpan(
                text: '拼接2',
              ),
              new TextSpan(
                text: '拼接3',
              ),
              new TextSpan(
                text: '拼接4',
              ),
              new TextSpan(
                text: '拼接5',
              ),
              new TextSpan(
                text: '拼接6',
              ),
              new TextSpan(
                  text: '拼接7',
                  style: new TextStyle(
                    color: Colors.yellow,
                  ),
                  recognizer:new TapGestureRecognizer()..onTap=(){//增加一個(gè)點(diǎn)擊事件
                    print('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@');
                  },
              ),

2吼砂，Image

2.1,繼承關(guān)系
Object > Diagnosticablet > DiagnosticableTreet > Widgett > StatefulWidgett > Image

2.2,支持類型
支持 JPEG、PNG鼎文、GIF渔肩、Animated GIF、WebP拇惋、Animated WebP周偎、BMP 和 WBMP 等格式

2.3, 創(chuàng)建Image
Image一共有五種創(chuàng)建方式

2.4, 創(chuàng)建Image

• 構(gòu)造方法源碼：

  const Image({
    Key key,
    @required this.image,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  }) : assert(image != null),
       assert(alignment != null),
       assert(repeat != null),
       assert(filterQuality != null),
       assert(matchTextDirection != null),
       super(key: key);

• 用法

// 資源圖片
new Image.asset('imgs/logo.jpeg'),
//網(wǎng)絡(luò)圖片
new Image.network(
    'https://flutter.io/images/homepage/header-illustration.png'),
// 本地文件圖片
new Image.file(new File("/Users/gs/Downloads/1.jpeg")),
// Uint8List圖片
new Image.memory(bytes),
//使用ImageProvider加載圖片
new Image(image: new NetworkImage("https://flutter.io/images/homepage/screenshot-2.png"))

tips:
關(guān)于本地圖片資源使用這里我需要說(shuō)一下，首先在項(xiàng)目最頂部創(chuàng)建一個(gè)images文件夾放入一張圖片xxx.jpeg撑帖，然后在pubspec.yaml添加幾行代碼蓉坎，表示引用images文件夾下的xxx.jpeg圖片,另外還可以設(shè)置2x和3x圖片

image

2.5, 屬性解析

• alignment → AlignmentGeometry - 圖像邊界內(nèi)對(duì)齊圖像。

• centerSlice → Rect - 九片圖像的中心切片胡嘿。

• color → Color - 該顏色與每個(gè)圖像像素混合colorBlendMode蛉艾。

• colorBlendMode → BlendMode - 用于 color 與此圖像結(jié)合使用。

• fit → BoxFit - 圖像在布局中分配的空間衷敌。

• gaplessPlayback → bool - 當(dāng)圖像提供者發(fā)生變化時(shí)勿侯，是繼續(xù)顯示舊圖像（true）還是暫時(shí)不顯示（false）。

• image → ImageProvider - 要顯示的圖像缴罗。

• matchTextDirection → bool - 是否在圖像的方向上繪制圖像 TextDirection助琐。

• repeat → ImageRepeat - 未充分容器時(shí)，是否重復(fù)圖片面氓。

• height → double - 圖像的高度弓柱。

• width → double - 圖像的寬度。

2.6, 圓角圖片

Image 是不支持圓角和陰影的侧但，目前可以通過(guò)使用 CircleAvatar 和 Container 實(shí)現(xiàn)。

• CircleAvatar

var img = 'https://b-ssl.duitang.com/uploads/item/' +
        '201602/15/20160215235057_EU3tS.thumb.700_0.jpeg';

new CircleAvatar(
    backgroundImage: new NetworkImage(url),
    radius: 100.0,      // --> 半徑越大航罗，圖片越大
),

• Container
  使用 Container 實(shí)現(xiàn)禀横，其原理是把圖片放在 decoration 里，而不是 child 里粥血，因?yàn)榘褕D片放在 child 里并設(shè)置 borderRadius 時(shí)會(huì)出現(xiàn)一個(gè)圖片穿透的問(wèn)題柏锄，Container 還沒(méi)有 overflow 屬性酿箭。

new Container(
    width: 200.0,
    height: 200.0,
    margin: const EdgeInsets.all(20.0),
    decoration: new BoxDecoration(
        color: Colors.white,
        image: new DecorationImage(image: new NetworkImage(this.imgsrc), fit: BoxFit.cover),
        shape: BoxShape.circle,
    ),
),

上面實(shí)現(xiàn)的都是一個(gè)圓形圖片，下面的實(shí)現(xiàn)一個(gè)真正的圓角圖片趾娃。

new Container(
    width: 200.0,
    height: 200.0,
    margin: const EdgeInsets.all(20.0),
    decoration: new BoxDecoration(
        color: Colors.white,
        image: new DecorationImage(image: new NetworkImage(this.imgsrc), fit: BoxFit.cover),
        shape: BoxShape.rectangle,              // <-- 這里需要設(shè)置為 rectangle
        borderRadius: new BorderRadius.all(
            const Radius.circular(20.0),        // <-- rectangle 時(shí)缭嫡，BorderRadius 才有效
        ),
    ),
),

3，Button

3.1繼承關(guān)系
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > MaterialButton

在 Flutter 里有很多的 Button抬闷，包括了：MaterialButton妇蛀、RaisedButton、FloatingActionButton笤成、FlatButton评架、IconButton、ButtonBar炕泳、DropdownButton 等纵诞。
一般常用的 Button 是 MaterialButton、IconButton培遵、FloatingActionButton浙芙。

3.2構(gòu)造方法

• 3.2.1 MaterialButton

  const MaterialButton({
    Key key,
    @required this.onPressed,
    this.onHighlightChanged,
    this.textTheme,
    this.textColor,
    this.disabledTextColor,
    this.color,
    this.disabledColor,
    this.highlightColor,
    this.splashColor,
    this.colorBrightness,
    this.elevation,
    this.highlightElevation,
    this.disabledElevation,
    this.padding,
    this.shape,
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.child,
  }) : super(key: key);

tips:
VoidCallback onPressed 和 ValueChanged<bool> onHighlightChanged
VoidCallback onPressed： 點(diǎn)擊激活按鈕時(shí)調(diào)用的方法
ValueChanged<bool> onHighlightChanged： 按下和抬起時(shí)都會(huì)調(diào)用的方法

• 用法

MaterialButton(
      key: ValueKey("text"),
      child: Text("MaterialButton"),
      onPressed: pressedBtn(context),
      onHighlightChanged: onHighlightChanged(context),
      textTheme: ButtonTextTheme.normal,
      textColor: Colors.blue,
      disabledTextColor: Colors.red,
      color: Color(0xFF82B1FF),
      disabledColor: Colors.grey,
      highlightColor: Colors.grey,
      // 按下的背景色
      splashColor: Colors.green,
      // 水波紋顏色
      colorBrightness: Brightness.light,
      // 主題
      elevation: 10,
      highlightElevation: 10,
      disabledElevation: 10,
      padding: EdgeInsets.all(10),
//       MaterialButton shape 子類才起效
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          side: BorderSide(
              color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2)),
      clipBehavior: Clip.antiAlias,
      materialTapTargetSize: MaterialTapTargetSize.padded,
      animationDuration: Duration(seconds: 1),
      minWidth: 200,
      height: 50,
    );

• 3.2.2 RaisedButton
  RaisedButton 與 MaterialButton 類似
• 構(gòu)造方法

new RaisedButton(
    child: new Text('點(diǎn)我'),
    onPressed: () {},
)

• 3.2.3 FlatButton
  FlatButton 與 MaterialButton 類似，不同的是它是透明背景的籽腕。如果一個(gè) Container 想要點(diǎn)擊事件時(shí)嗡呼，可以使用 FlatButton 包裹，而不是 MaterialButton节仿。因?yàn)?MaterialButton 默認(rèn)帶背景晤锥，而 FlatButton 默認(rèn)不帶背景。
• 構(gòu)造方法

new FlatButton(
    child: new Text('點(diǎn)我'),
    onPressed: () {},
)

• 3.2.4 IconButton
  IconButton 顧名思義就是 Icon + Button 的復(fù)合體廊宪，當(dāng)某個(gè) Icon 需要點(diǎn)擊事件時(shí)矾瘾，使用 IconButton 最好不過(guò)。
• 構(gòu)造方法

new IconButton(
    icon: new Icon(Icons.volume_up),
    tooltip: 'Increase volume by 10%',
    onPressed: () {
        // ...
    },
)

tips: 還有已經(jīng)定義好的 Icon Button：CloseButton箭启、BackButton壕翩。他們都有導(dǎo)航返回的能力。

• 3.2.5 FloatingActionButton
  FloatingActionButton 是一個(gè)浮動(dòng)在頁(yè)面右下角的浮動(dòng)按鈕傅寡。
• 構(gòu)造方法

new Scaffold(
    // ...
    floatingActionButton: new FloatingActionButton(
        onPressed: () {},
        child: new Icon(Icons.add_a_photo),
        elevation: 3.0,
        highlightElevation: 2.0,
        backgroundColor: Colors.red,        // 紅色
    ),
)

• 3.2.6 FloatingActionButton
  ButtonBar 是一個(gè)布局組件放妈，可以讓 Button 排列在一行。- 構(gòu)造方法

new ButtonBar(
    children: <Widget>[
        new CloseButton(),
        new BackButton(),
    ],
)

4荐操，Container

4.1繼承關(guān)系
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container
4.2構(gòu)造方法

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })

4.3用法

new Container(
  constraints: new BoxConstraints.expand(
    height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  decoration: new BoxDecoration(
    border: new Border.all(width: 2.0, color: Colors.red),
    color: Colors.grey,
    borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
    image: new DecorationImage(
      image: new NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
      centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  padding: const EdgeInsets.all(8.0),
  alignment: Alignment.center,
  child: new Text('Hello World',
    style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
  transform: new Matrix4.rotationZ(0.3),
)

4.4 decoration
decoration可以設(shè)置邊框芜抒、背景色、背景圖片托启、圓角等屬性宅倒，非常實(shí)用。對(duì)于transform這個(gè)屬性屯耸，一般有過(guò)其他平臺(tái)開(kāi)發(fā)經(jīng)驗(yàn)的拐迁，都大致了解蹭劈，這種變換，一般不是變換的實(shí)際位置线召，而是變換的繪制效果铺韧，也就是說(shuō)它的點(diǎn)擊以及尺寸、間距等都是按照未變換前的缓淹。

decoration = decoration ?? (color != null ? new BoxDecoration(color: color) : null),

可以看出哈打，對(duì)于顏色的設(shè)置，最后都是轉(zhuǎn)換為decoration來(lái)進(jìn)行繪制的割卖。如果同時(shí)包含decoration和color兩種屬性前酿，則會(huì)報(bào)錯(cuò)。

@override
  Widget build(BuildContext context) {
    Widget current = child;

    if (child == null && (constraints == null || !constraints.isTight)) {
      current = new LimitedBox(
        maxWidth: 0.0,
        maxHeight: 0.0,
        child: new ConstrainedBox(constraints: const BoxConstraints.expand())
      );
    }

    if (alignment != null)
      current = new Align(alignment: alignment, child: current);

    final EdgeInsetsGeometry effectivePadding = _paddingIncludingDecoration;
    if (effectivePadding != null)
      current = new Padding(padding: effectivePadding, child: current);

    if (decoration != null)
      current = new DecoratedBox(decoration: decoration, child: current);

    if (foregroundDecoration != null) {
      current = new DecoratedBox(
        decoration: foregroundDecoration,
        position: DecorationPosition.foreground,
        child: current
      );
    }

    if (constraints != null)
      current = new ConstrainedBox(constraints: constraints, child: current);

    if (margin != null)
      current = new Padding(padding: margin, child: current);

    if (transform != null)
      current = new Transform(transform: transform, child: current);

    return current;
  }

Container的build函數(shù)不長(zhǎng)鹏溯，繪制也是一個(gè)線性的判斷的過(guò)程罢维，一層一層的包裹著widget，去實(shí)現(xiàn)不同的樣式丙挽。

最里層的是child肺孵，如果為空或者其他約束條件，則最里層包含的為一個(gè)LimitedBox颜阐，然后依次是Align平窘、Padding、DecoratedBox凳怨、前景DecoratedBox瑰艘、ConstrainedBox、Padding（實(shí)現(xiàn)margin效果）肤舞、Transform紫新。

Container的源碼本身并不復(fù)雜，復(fù)雜的是它的各種布局表現(xiàn)李剖。我們謹(jǐn)記住一點(diǎn)芒率，如果內(nèi)部不設(shè)置約束，則按照父節(jié)點(diǎn)盡可能的擴(kuò)大篙顺，如果內(nèi)部有約束偶芍，則按照內(nèi)部來(lái)。

5德玫， Row&Column

5.1 Row

• 5.1.1 繼承關(guān)系
  Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Row
• 5.1.2 簡(jiǎn)介
  在Flutter中非常常見(jiàn)的一個(gè)多子節(jié)點(diǎn)控件匪蟀，將children排列成一行。估計(jì)是借鑒了Web中Flex布局宰僧，所以很多屬性和表現(xiàn)萄窜，都跟其相似。但是注意一點(diǎn)，自身不帶滾動(dòng)屬性查刻，如果超出了一行，在debug下面則會(huì)顯示溢出的提示凤类。
• 5.1.3 布局行為
  Row的布局有六個(gè)步驟穗泵，這種布局表現(xiàn)來(lái)自Flex（Row和Column的父類）：
  首先按照不受限制的主軸（main axis）約束條件，對(duì)flex為null或者為0的child進(jìn)行布局谜疤，然后按照交叉軸（ cross axis）的約束佃延，對(duì)child進(jìn)行調(diào)整；
  按照不為空的flex值夷磕，將主軸方向上剩余的空間分成相應(yīng)的幾等分履肃；
  對(duì)上述步驟flex值不為空的child，在交叉軸方向進(jìn)行調(diào)整坐桩，在主軸方向使用最大約束條件尺棋，讓其占滿步驟2所分得的空間；
  Flex交叉軸的范圍取自子節(jié)點(diǎn)的最大交叉軸绵跷；
  主軸Flex的值是由mainAxisSize屬性決定的膘螟，其中MainAxisSize可以取max、min以及具體的value值碾局；
  每一個(gè)child的位置是由mainAxisAlignment以及crossAxisAlignment所決定荆残。
  Row的布局行為表面上看有這么多個(gè)步驟，其實(shí)也還算是簡(jiǎn)單净当，可以完全參照web中的Flex布局内斯，包括主軸、交叉軸等概念像啼。

布局方式

-5.1.4 構(gòu)造方法

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline textBaseline,
  List<Widget> children = const <Widget>[],
})

• 5.1.5 屬性解析
  MainAxisAlignment：主軸方向上的對(duì)齊方式俘闯，會(huì)對(duì)child的位置起作用，默認(rèn)是start埋合。
  其中MainAxisAlignment枚舉值：

center：將children放置在主軸的中心备徐；
end：將children放置在主軸的末尾；
spaceAround：將主軸方向上的空白區(qū)域均分甚颂，使得children之間的空白區(qū)域相等蜜猾，但是首尾child的空白區(qū)域?yàn)?/2；
spaceBetween：將主軸方向上的空白區(qū)域均分振诬，使得children之間的空白區(qū)域相等蹭睡，首尾child都靠近首尾，沒(méi)有間隙赶么；
spaceEvenly：將主軸方向上的空白區(qū)域均分肩豁，使得children之間的空白區(qū)域相等，包括首尾child；
start：將children放置在主軸的起點(diǎn)清钥；

其中spaceAround琼锋、spaceBetween以及spaceEvenly的區(qū)別，就是對(duì)待首尾child的方式祟昭。其距離首尾的距離分別是空白區(qū)域的1/2缕坎、0、1篡悟。
MainAxisSize：在主軸方向占有空間的值谜叹，默認(rèn)是max。
MainAxisSize的取值有兩種：

max：根據(jù)傳入的布局約束條件搬葬，最大化主軸方向的可用空間荷腊；
min：與max相反，是最小化主軸方向的可用空間急凰；

CrossAxisAlignment：children在交叉軸方向的對(duì)齊方式女仰，與MainAxisAlignment略有不同。
CrossAxisAlignment枚舉值有如下幾種：

baseline：在交叉軸方向香府，使得children的baseline對(duì)齊董栽；
center：children在交叉軸上居中展示；
end：children在交叉軸上末尾展示企孩；
start：children在交叉軸上起點(diǎn)處展示锭碳；
stretch：讓children填滿交叉軸方向；

TextDirection：阿拉伯語(yǔ)系的兼容設(shè)置勿璃，一般無(wú)需處理擒抛。
VerticalDirection：定義了children擺放順序，默認(rèn)是down补疑。
VerticalDirection枚舉值有兩種：

down：從top到bottom進(jìn)行布局歧沪；
up：從bottom到top進(jìn)行布局。

top對(duì)應(yīng)Row以及Column的話莲组，就是左邊和頂部诊胞，bottom的話，則是右邊和底部锹杈。
TextBaseline：使用的TextBaseline的方式撵孤，有兩種，前面已經(jīng)介紹過(guò)竭望。

• 5.1.6 用法

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
        padding: EdgeInsets.all(5.0),
      ),
      flex: 1,
    ),
    Expanded(
      child: Container(
        color: Colors.yellow,
        padding: EdgeInsets.all(5.0),
      ),
      flex: 2,
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
        padding: EdgeInsets.all(5.0),
      ),
      flex: 1,
    ),
  ],
)

5.2 Flex

• 5.2.1 構(gòu)造函數(shù)

Flex({
  Key key,
  @required this.direction,
  this.mainAxisAlignment = MainAxisAlignment.start,
  this.mainAxisSize = MainAxisSize.max,
  this.crossAxisAlignment = CrossAxisAlignment.center,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  this.textBaseline,
  List<Widget> children = const <Widget>[],
})

tips: 可以看出邪码，F(xiàn)lex的構(gòu)造函數(shù)就比Row和Column的多了一個(gè)參數(shù)。Row跟Column的區(qū)別咬清，正是這個(gè)direction參數(shù)的不同闭专。當(dāng)為Axis.horizontal的時(shí)候奴潘，則是Row，當(dāng)為Axis.vertical的時(shí)候影钉，則是Column画髓。

• 5.2.2 使用方法

while (child != null) {
  final FlexParentData childParentData = child.parentData;
  totalChildren++;
  final int flex = _getFlex(child);
  if (flex > 0) {
    totalFlex += childParentData.flex;
    lastFlexChild = child;
  } else {
    BoxConstraints innerConstraints;
    if (crossAxisAlignment == CrossAxisAlignment.stretch) {
      switch (_direction) {
        case Axis.horizontal:
          innerConstraints = new BoxConstraints(minHeight: constraints.maxHeight,
                                                maxHeight: constraints.maxHeight);
          break;
        case Axis.vertical:
          innerConstraints = new BoxConstraints(minWidth: constraints.maxWidth,
                                                maxWidth: constraints.maxWidth);
          break;
      }
    } else {
      switch (_direction) {
        case Axis.horizontal:
          innerConstraints = new BoxConstraints(maxHeight: constraints.maxHeight);
          break;
        case Axis.vertical:
          innerConstraints = new BoxConstraints(maxWidth: constraints.maxWidth);
          break;
      }
    }
    child.layout(innerConstraints, parentUsesSize: true);
    allocatedSize += _getMainSize(child);
    crossSize = math.max(crossSize, _getCrossSize(child));
  }
  child = childParentData.nextSibling;
}

5.3 Column
在講解Row的時(shí)候，其實(shí)是按照Flex的一些布局行為來(lái)進(jìn)行的斧拍，包括源碼分析雀扶，也都是在用Flex進(jìn)行分析的。Row和Column都是Flex的子類肆汹，只是direction參數(shù)不同。Column各方面同Row予权，因此在這里不再另行講解昂勉。
在講解Flex的時(shí)候，也說(shuō)過(guò)是參照了web的Flex布局扫腺，如果有相關(guān)開(kāi)發(fā)經(jīng)驗(yàn)的同學(xué)岗照，完全可以參照著去理解，這樣子更容易去理解它們的用法和原理笆环。
關(guān)于row和column轉(zhuǎn)載鏈接：http://www.reibang.com/p/0ce74751d970

6攒至，Text

• 6.1 用法

appBar: new AppBar(
    title: new Text('首頁(yè)'),
    leading: new Icon(Icons.home),
    backgroundColor: Colors.blue,
    centerTitle: true,
    actions: <Widget>[
        // 非隱藏的菜單
        new IconButton(
            icon: new Icon(Icons.add_alarm),
            tooltip: 'Add Alarm',
            onPressed: () {}
        ),
        // 隱藏的菜單
        new PopupMenuButton<String>(
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                this.SelectView(Icons.message, '發(fā)起群聊', 'A'),
                this.SelectView(Icons.group_add, '添加服務(wù)', 'B'),
                this.SelectView(Icons.cast_connected, '掃一掃碼', 'C'),
            ],
            onSelected: (String action) {
                // 點(diǎn)擊選項(xiàng)的時(shí)候
                switch (action) {
                    case 'A': break;
                    case 'B': break;
                    case 'C': break;
                }
            },
        ),
    ],
),

圖示

• 6.2 屬性說(shuō)明
  leading → Widget - 在標(biāo)題前面顯示的一個(gè)控件，在首頁(yè)通常顯示應(yīng)用的 logo躁劣；在其他界面通常顯示為返回按鈕迫吐。
  title → Widget - Toolbar 中主要內(nèi)容，通常顯示為當(dāng)前界面的標(biāo)題文字账忘。
  actions → List - 一個(gè) Widget 列表志膀，代表 Toolbar 中所顯示的菜單，對(duì)于常用的菜單鳖擒，通常使用 IconButton 來(lái)表示溉浙；對(duì)于不常用的菜單通常使用 PopupMenuButton 來(lái)顯示為三個(gè)點(diǎn)，點(diǎn)擊后彈出二級(jí)菜單蒋荚。
  bottom → PreferredSizeWidget - 一個(gè) AppBarBottomWidget 對(duì)象戳稽，通常是 TabBar。用來(lái)在 Toolbar 標(biāo)題下面顯示一個(gè) Tab 導(dǎo)航欄期升。
  elevation → double - 控件的 z 坐標(biāo)順序惊奇，默認(rèn)值為 4，對(duì)于可滾動(dòng)的 SliverAppBar吓妆，當(dāng) SliverAppBar 和內(nèi)容同級(jí)的時(shí)候赊时，該值為 0， 當(dāng)內(nèi)容滾動(dòng) SliverAppBar 變?yōu)?Toolbar 的時(shí)候行拢，修改 elevation 的值祖秒。
  flexibleSpace → Widget - 一個(gè)顯示在 AppBar 下方的控件，高度和 AppBar 高度一樣，可以實(shí)現(xiàn)一些特殊的效果竭缝，該屬性通常在 SliverAppBar 中使用房维。
  backgroundColor → Color - Appbar 的顏色，默認(rèn)值為 ThemeData.primaryColor抬纸。改值通常和下面的三個(gè)屬性一起使用咙俩。
  brightness → Brightness - Appbar 的亮度，有白色和黑色兩種主題湿故，默認(rèn)值為 ThemeData.primaryColorBrightness阿趁。
  iconTheme → IconThemeData - Appbar 上圖標(biāo)的顏色、透明度坛猪、和尺寸信息脖阵。默認(rèn)值為 ThemeData.primaryIconTheme。
  textTheme → TextTheme - Appbar 上的文字樣式墅茉。
  centerTitle → bool - 標(biāo)題是否居中顯示命黔，默認(rèn)值根據(jù)不同的操作系統(tǒng)，顯示方式不一樣就斤。

toolbarOpacity → double

關(guān)于app的轉(zhuǎn)載鏈接： http://www.reibang.com/p/77f8b7ee8460