一、單子布局組件

單子布局組件的含義是其只有一個(gè)子組件

比較常用的單子布局組件有：Align、Center、Padding、Container。

1.1 Align組件

在Flutter中，Align也是一個(gè)組件，和其他語(yǔ)言有很大的區(qū)別(iOS Android中僅僅只是一個(gè)屬性)

//源碼分析
const Align({
  Key key,
  this.alignment: Alignment.center, // 對(duì)齊方式，默認(rèn)居中對(duì)齊
  this.widthFactor, // 寬度因子，不設(shè)置的情況，會(huì)盡可能大
  this.heightFactor, // 高度因子，不設(shè)置的情況，會(huì)盡可能大
  Widget child // 要布局的子Widget
})

widthFactor和heightFactor作用：

• 因?yàn)樽咏M件在父組件中的對(duì)齊方式必須有一個(gè)前提，就是父組件需要明確自己的范圍（寬度和高度）；
• 如果widthFactor和heightFactor不設(shè)置，那么默認(rèn)Align會(huì)盡可能的大（盡可能占據(jù)自己所在的父組件）；
• 我們也可以對(duì)他們進(jìn)行設(shè)置，比如widthFactor設(shè)置為3，那么相對(duì)于Align的寬度是子組件寬度的3倍；

下面演練一下Align:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      child: Icon(Icons.pets, size: 36, color: Colors.red),
      alignment: Alignment.bottomRight,
      widthFactor: 3,
      heightFactor: 3,
    );
  }
}

1.2 Center組件

通過(guò)源碼即可看到：Center組件繼承自Align，只是將alignment設(shè)置為Alignment.center

沒(méi)啥好講的，演練一下Center:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Icon(Icons.pets, size: 36, color: Colors.red),
      widthFactor: 1,
      heightFactor: 1,
    );
  }
}

1.3 Padding組件

Padding組件在iOS、Android端也是一個(gè)屬性，但是在Flutter中也是一個(gè)Widget

Padding通常用于設(shè)置子Widget到父Widget的邊距(理解為父組件的內(nèi)邊距或子Widget的外邊距)。

//源碼分析
const Padding({
  Key key,
  @required this.padding, // EdgeInsetsGeometry類型（抽象類），使用EdgeInsets
  Widget child,
})

演練一下Padding:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20),
      child: Text(
        "莫聽(tīng)穿林打葉聲，何妨吟嘯且徐行。竹杖芒鞋輕勝馬，誰(shuí)怕？一蓑煙雨任平生。",
        style: TextStyle(
          color: Colors.redAccent,
          fontSize: 18
        ),
      ),
    );
  }
}

在EdgeInsets中有很多根據(jù)不同的使用場(chǎng)景對(duì)應(yīng)的設(shè)置方法

1.4 Container組件

Container組件類似于Android中的View，iOS中的UIView。

如果你需要一個(gè)視圖，可以設(shè)置背景顏色、圖像、固定的尺寸、邊框、圓角等效果，那么就可以使用Container組件。

1.4.1 Container組件介紹

Container在開(kāi)發(fā)中被使用的頻率是非常高的，特別是我們經(jīng)常會(huì)將其作為容器組件。

Container({
  this.alignment,
  this.padding, //容器內(nèi)補(bǔ)白，屬于decoration的裝飾范圍
  Color color, // 背景色
  Decoration decoration, // 背景裝飾
  Decoration foregroundDecoration, //前景裝飾
  double width,//容器的寬度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制條件
  this.margin,//容器外補(bǔ)白，不屬于decoration的裝飾范圍
  this.transform, //變換
  this.child,
})

需要注意的幾點(diǎn)：

• 容器的大小可以通過(guò)width、height屬性來(lái)指定，也可以通過(guò)constraints來(lái)指定，如果同時(shí)存在時(shí)，width、height優(yōu)先。實(shí)際上Container內(nèi)部會(huì)根據(jù)width、height來(lái)生成一個(gè)constraints；(查看源碼)
• color和decoration是互斥的，實(shí)際上，當(dāng)指定color時(shí)，Container內(nèi)會(huì)自動(dòng)創(chuàng)建一個(gè)decoration；
• decoration屬性稍后我們?cè)敿?xì)學(xué)習(xí)；

演練一下Container:

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Color.fromRGBO(3, 3, 255, .5),
        width: 100,
        height: 100,
        child: Icon(Icons.pets, size: 32, color: Colors.white),
      ),
    );
  }
}

1.4.2 BoxDecoration

Container有一個(gè)非常重要的屬性 decoration：

• 他對(duì)應(yīng)的類型是Decoration類型，但是它是一個(gè)抽象類。
• 在開(kāi)發(fā)中，我們經(jīng)常使用它的實(shí)現(xiàn)類BoxDecoration來(lái)進(jìn)行實(shí)例化。

//查看源碼
const BoxDecoration({
    this.color, // 顏色，會(huì)和Container中的color屬性沖突
    this.image, // 背景圖片
    this.border, // 邊框，對(duì)應(yīng)類型是Border類型，里面每一個(gè)邊框使用BorderSide
    this.borderRadius, // 圓角效果
    this.boxShadow, // 陰影效果
    this.gradient, // 漸變效果
    this.backgroundBlendMode, // 背景混合
    this.shape = BoxShape.rectangle, // 形變
  })

部分效果演示：

class _ZQHomeContentState extends State<ZQHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
                // color: Color.fromRGBO(3, 3, 255, .5),
        width: 150,
        height: 150,
        child: Icon(Icons.pets, size: 32, color: Colors.white),
        decoration: BoxDecoration(
            color: Colors.amber, // 背景顏色
            border: Border.all(
                color: Colors.redAccent,
                width: 3,
                style: BorderStyle.solid
            ),
            borderRadius: BorderRadius.circular(75),// 這里也可以使用.only分別設(shè)置
            // shape: BoxShape.circle, // 會(huì)和borderRadius沖突
            boxShadow: [
              BoxShadow(
                  offset: Offset(5, 5),
                  color: Colors.purple,
                  blurRadius: 5
              )
            ],
            gradient: LinearGradient(
                colors: [
                  Colors.green,
                  Colors.red
                ]
            )
        ),
      ),
    );
  }
}

上一個(gè)章節(jié)我們提到可以通過(guò) Container+BoxDecoration來(lái)實(shí)現(xiàn)圓角圖像

二、多子布局組件

在開(kāi)發(fā)中將多個(gè)Widget放在一起進(jìn)行布局，比如水平方向、垂直方向排列，甚至需要進(jìn)行層疊效果時(shí)，就需要使用多子布局組件(Multi-child layout widgets)

比較常用的多子布局組件是Row、Column、Stack

2.1 Flex組件

在學(xué)習(xí)Row和Column之前，我們先學(xué)習(xí)主軸和交叉軸的概念。

因?yàn)镽ow是一行排布，Column是一列排布，那么它們都存在兩個(gè)方向，并且兩個(gè)Widget排列的方向應(yīng)該是對(duì)立的。

都有主軸(MainAxis)和交叉軸(CrossAxis)的概念：

• 對(duì)于Row來(lái)說(shuō)，主軸(MainAxis)和交叉軸(CrossAxis)

  
  
  

• 對(duì)于Column來(lái)說(shuō)，主軸(MainAxis)和交叉軸(CrossAxis)

  
  
  Simulator Screen Shot - iPhone 11 - 2020-11-12 at 17.06.01.png

2.1.1 Row、Colum組件

在前面我們用到過(guò)Row、Colum這兩個(gè)組件，實(shí)際上均是繼承自Flex組件。

• Flex組件和Row、Column屬性主要的區(qū)別就是多一個(gè)direction。(查看源碼)
• 當(dāng)direction的值為Axis.horizontal的時(shí)候，則是Row。
• 當(dāng)direction的值為Axis.vertical的時(shí)候，則是Column。

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, // 主軸對(duì)齊方式
  MainAxisSize mainAxisSize = MainAxisSize.max, // 水平方向盡可能大
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 交叉處對(duì)齊方式
  TextDirection textDirection, // 水平方向子widget的布局順序（默認(rèn)為系統(tǒng)當(dāng)前Locale環(huán)境的文本方向(如中文、英語(yǔ)都是從左往右，而阿拉伯語(yǔ)是從右往左））
  VerticalDirection verticalDirection = VerticalDirection.down, // 表示Row縱軸（垂直）的對(duì)齊方向
  TextBaseline textBaseline, // 如果上面是baseline對(duì)齊方式，那么選擇什么模式（有兩種可選）
  List<Widget> children = const <Widget>[],
})

Column({
    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>[],
  })

通過(guò)定義我們發(fā)現(xiàn)，二者是差不多的，所以屬性我們放在一塊講解，下面以Row為例，Column基本相似：

mainAxisSize：

• 表示Row在主軸(水平)方向占用的空間，默認(rèn)是MainAxisSize.max，表示盡可能多的占用水平方向的空間，此時(shí)無(wú)論子widgets實(shí)際占用多少水平空間，Row的寬度始終等于水平方向的最大寬度
• 而MainAxisSize.min表示盡可能少的占用水平空間，當(dāng)子widgets沒(méi)有占滿水平剩余空間，則Row的實(shí)際寬度等于所有子widgets占用的的水平空間；

mainAxisAlignment：表示子Widgets在Row所占用的水平空間內(nèi)對(duì)齊方式

• 如果mainAxisSize值為MainAxisSize.min，則此屬性無(wú)意義，因?yàn)樽觲idgets的寬度等于Row的寬度
• 只有當(dāng)mainAxisSize的值為MainAxisSize.max時(shí)，此屬性才有意義
• MainAxisAlignment.start表示沿textDirection的初始方向?qū)R，
• 如textDirection取值為TextDirection.ltr時(shí)，則MainAxisAlignment.start表示左對(duì)齊，textDirection取值為TextDirection.rtl時(shí)表示從右對(duì)齊。
• 而MainAxisAlignment.end和MainAxisAlignment.start正好相反；
• MainAxisAlignment.center表示居中對(duì)齊。

crossAxisAlignment：表示子Widgets在縱軸方向的對(duì)齊方式

• Row的高度等于子Widgets中最高的子元素高度
• 它的取值和MainAxisAlignment一樣(包含start、end、 center三個(gè)值)
• 不同的是crossAxisAlignment的參考系是verticalDirection，即verticalDirection值為VerticalDirection.down時(shí)crossAxisAlignment.start指頂部對(duì)齊，verticalDirection值為VerticalDirection.up時(shí)，crossAxisAlignment.start指底部對(duì)齊；而crossAxisAlignment.end和crossAxisAlignment.start正好相反；

2.1.2 Expanded

在上圖中，如果我們希望三個(gè)Container鋪滿Row剩余的部分，則需要使用Expanded包裹

Expanded有一個(gè)很重要的屬性flex,默認(rèn)值為1. 一旦被Expanded包裹，原本設(shè)置的width無(wú)效，flex即為靈活控件占比

class _ZQHomeContentState extends State<ZQHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(flex : 2,child: Container(width: 100,height: 100,color: Colors.red, child: Align(child: Text('helloWorld')))),
        SizedBox(height: 10,),
        Expanded(flex : 1,child: Container(width: 100,height: 100,color: Colors.green, child: Align(child: Text('helloWorld')))),
        SizedBox(height: 10,),
        Container(width: 100,height: 100,color: Colors.blue, child: Align(child: Text('helloWorld'))),
      ],
    );
  }
}

2.2 Stack組件

層疊布局Stack

Stack({
  Key key,
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,
  List<Widget> children = const <Widget>[],
})
alignment：此參數(shù)決定如何去對(duì)齊沒(méi)有定位（沒(méi)有使用Positioned）或部分定位的子widget。所謂部分定位，在這里**特指沒(méi)有在某一個(gè)軸上定位：**left、right為橫軸，top、bottom為縱軸，只要包含某個(gè)軸上的一個(gè)定位屬性就算在該軸上有定位。

• textDirection：和Row、Wrap的textDirection功能一樣，都用于決定alignment對(duì)齊的參考系即：textDirection的值為TextDirection.ltr，則alignment的start代表左，end代表右；textDirection的值為TextDirection.rtl，則alignment的start代表右，end代表左。

• fit：此參數(shù)用于決定沒(méi)有定位的子widget如何去適應(yīng)Stack的大小。StackFit.loose表示使用子widget的大小，StackFit.expand表示擴(kuò)伸到Stack的大小。

• overflow：此屬性決定如何顯示超出Stack顯示空間的子widget，值為Overflow.clip時(shí)，超出部分會(huì)被剪裁（隱藏），值為Overflow.visible 時(shí)則不會(huì)。

Stack會(huì)經(jīng)常和Positioned一起來(lái)使用，Positioned可以決定組件在Stack中的位置，用于實(shí)現(xiàn)類似于Web中的絕對(duì)定位效果。

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          color: Colors.purple,
          width: 300,
          height: 300,
        ),
        Positioned(
          left: 20,
          top: 20,
          child: Icon(Icons.favorite, size: 50, color: Colors.white)
        ),
        Positioned(
          bottom: 20,
          right: 20,
          child: Text("你好啊，李銀河", style: TextStyle(fontSize: 20, color: Colors.white)),
        )
      ],
    );
  }
}

注意：Positioned組件只能在Stack中使用。