前面讲解了 Flutter 的几个基础组件，这节课将讲解跟布局相关的 Widget。
每个平台的应用都有其自己的布局方式，例如 Android 有线性布局、相对布局、绝对布局、帧布局、表格布局等等，HTML 前端也有自己的布局方式。Flutter 当然也不例外。那么这节课就带领大家对 Flutter 的基础布局 Widget 中的几个典型的布局Widget进行详细分析，并结合案例进行详细的用法讲解。

1.基本布局

1.1 Scaffold

Flutter 布局系列的 Widget 一般分为两种，一种是只有单个子元素的布局 Widget，也就是SingleChildRenderObjectWidget；另一个种是具有多个子元素的布局 Widget，一般都有 children 参数，继承自MultiChildRenderObjectWidget。非布局系列 Widget 也有无子元素的 Widget，如 Text、Image 组件，这些无子元素的 Widget 属于 LeafRenderObjectWidget。Flutter 中不同的布局 Widget 对子 Widget 的排列渲染方式不同。接下来我们看下其中比较常用的一个布局 Widget——Scaffold。

Scaffold 是一个页面布局脚手架，实现了基本的 Material 布局，继承自 StatefulWidget，是有状态组件。我们知道大部分的应用页面都是含有标题栏，主体内容，底部导航菜单或者侧滑抽屉菜单等等构成，那么每次都重复写这些内容会大大降低开发效率，所以 Flutter 提供了 Material 风格的 Scaffold 页面布局脚手架，可以很快地搭建出这些元素部分：

Scaffold 有下面几个主要属性。

• appBar：显示在界面上的一个标题栏 AppBar。
• body： 当前页面的主体内容 Widget。
• floatingActionButton：页面的主要功能按钮，不配置就不会显示。
• persistentFooterButtons：固定显示在下方的按钮，比如对话框下方的确定、取消按钮。
• drawer：侧滑抽屉菜单控件。
• backgroundColor：body 内容的背景颜色。
• bottomNavigationBar：显示在页面底部的导航栏。
• resizeToAvoidBottomPadding：类似于 Android 中的 android:windowSoftInputMode=‘adjustResize’，避免类似弹出键盘这种操作遮挡布局使用的。
• bottomSheet：底部拉出菜单。

具体可配置的属性参数，我们看下看下 Scaffold 构造方法：

const Scaffold({
    Key key,
    // 标题栏
    this.appBar,
    // 中间主体内容部分
    this.body,
    // 悬浮按钮
    this.floatingActionButton,
    // 悬浮按钮位置
    this.floatingActionButtonLocation,
    // 悬浮按钮动画
    this.floatingActionButtonAnimator,
    // 固定在下方显示的按钮
    this.persistentFooterButtons,
    // 侧滑抽屉菜单
    this.drawer,
    this.endDrawer,
    // 底部菜单
    this.bottomNavigationBar,
    // 底部拉出菜单
    this.bottomSheet,
    // 背景色
    this.backgroundColor,
    this.resizeToAvoidBottomPadding,
    // 重新计算body布局空间大小，避免被遮挡
    this.resizeToAvoidBottomInset,
    // 是否显示到底部，默认为true将显示到顶部状态栏
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.down,
  })

如果想显示 Snackbar 或 bottomSheet，可以这样调用：

Scaffold.of(context).showSnackBar(new SnackBar(
      content: Text('Hello!'),
    ));

Scaffold.of(context).showBottomSheet…
接下来看个实例的代码：

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class ScaffoldSamples extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScaffoldSamplesState();
  }
}

class ScaffoldSamplesState extends State<ScaffoldSamples> {
  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return scaffoldWidget(context);
  }

  Widget scaffoldWidget(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("标题栏"),
        actions: <Widget>[
          //导航栏右侧菜单
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
      body: Text("Body内容部分"),
      //抽屉
      drawer: Drawer(
        child: DrawerHeader(
          child: Text("DrawerHeader"),
        ),
      ),
      // 底部导航
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(
              icon: Icon(Icons.category), title: Text('Cagergory')),
          BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text('Persion')),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.blue,
        onTap: _onItemTap,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          _onAdd();
        },
      ),
    );
  }

  void _onItemTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _onAdd() {}
}

这个实例实现效果如前面两张图片所示效果。

1.2 Container

Container 是一个容器类布局 Widget，Container 可以说是多个小组件的一个组合容器，如可以设置 padding、margin、Align、Decoration、Matrix4 等等，可以说用起来很方便，很高效。

我们看下 Container 构造方法相关属性和作用：

Container({
    Key key,
    // 容器子Widget对齐方式
    this.alignment,
    // 容器内部padding
    this.padding,
    // 背景色
    Color color,
    // 背景装饰
    Decoration decoration,
    // 前景装饰
    this.foregroundDecoration,
    // 容器的宽度
    double width,
    // 容器的高度
    double height,
    // 容器大小的限制条件
    BoxConstraints constraints,
    // 容器外部margin
    this.margin,
    // 变换，如旋转
    this.transform,
    // 容器内子Widget
    this.child,
  })

接下来看个实例的代码：

body: Container(
        constraints: BoxConstraints.expand(
          height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
        ),
        padding: const EdgeInsets.all(8.0),
        // 背景色
        color: Colors.teal.shade700,
        // 子Widget居中
        alignment: Alignment.center,
        // 子Widget元素
        child: Text('Hello World',
            style: Theme.of(context)
                .textTheme
                .display1
                .copyWith(color: Colors.white)),
        // 前景装饰
        foregroundDecoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage('https://www.example.com/images/frame.png'),
            centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
          ),
        ),
        // Container旋转
        transform: Matrix4.rotationZ(0.1),
      ),

运行效果如下图所示：

1.3 Center

Center 主要用于对齐，将内部子 Widget 与自身进行居中对齐，并根据子 Widget 的大小自动调整自身大小。

Center Widget 是继承自 Align，Align 继承自 SingleChildRenderObjectWidget，也是单子元素 Widget。

看下 Center 的构造方法：

 Center({
    Key key,
    // 宽度因子
    double widthFactor, 
    // 高度因子
    double heightFactor, 
    // 子元素
    Widget child
   })

大家可能对这个宽度和高度因子的作用不太明白，其实就是设置 Center 的宽度和高度是子元素宽度和高度的倍数的，widthFactor 和 heightFactor 可以不设置，默认 Center 容器宽度横向充满，高度包裹子元素。如将widthFactor 和 heightFactor 设置为 2.0 的话，则 Center 容器的占用宽度和高度是子元素宽度和高度的 2 倍，但是最大不超过屏幕的宽高。

接下来看个实例演示用法：

body: Column(
        children: <Widget>[
          Container(
            color: Colors.blueGrey,
            child: Center(
              widthFactor: 2,
              heightFactor: 2,
              child: Container(
                width: 60,
                height: 30,
                color: Colors.red,
              ),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Center(
            child: Container(
              width: 60,
              height: 30,
              color: Colors.teal,
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Center(
            child: Container(
              height: 100.0,
              width: 100.0,
              color: Colors.yellow,
              child: Align(
                // 设置对齐位置约束
                alignment: FractionalOffset(0.2, 0.6),
                child: Container(
                  height: 40.0,
                  width: 40.0,
                  color: Colors.red,
                ),
              ),
            ),
          ),
        ],
      ),

运行效果如下图所示：

2.线性布局

2.1 Row

Row 布局组件类似于 Android 中的 LinearLayout 线性布局，它用来做水平横向布局使用，里面的 children 子元素按照水平方向进行排列。

Row 的继承关系如下：

Row -> Flex -> MultiChildRenderObjectWidget -> RenderObjectWidget …

可以看出 Row 是 Flex 的拓展子类，也是多子元素的一个组件之一（内部可以包含多个子元素）。

我们看下 Row 布局组件的大致效果图：

所有元素水平排成一行。

那么接下来我们看下 Row 的构造方法：

Row({
    Key key,
    // 主轴方向上的对齐方式（Row的主轴是横向轴）
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    // 在主轴方向（Row的主轴是横向轴）占有空间的值，默认是max
    MainAxisSize mainAxisSize = MainAxisSize.max,
    // 在交叉轴方向(Row是纵向轴)的对齐方式，Row的高度等于子元素中最高的子元素高度
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    // 水平方向子元素的排列方向：从左到右排列还是反向
    TextDirection textDirection,
    // 表示纵轴（垂直）的对齐排列方向，默认是VerticalDirection.down，表示从上到下。这个参数一般用于Column组件里
    VerticalDirection verticalDirection = VerticalDirection.down,
    // 字符对齐基线方式
    TextBaseline textBaseline,
    // 子元素集合
    List<Widget> children = const <Widget>[],
  })

接下来详细看下 Row 的主轴和交叉轴属性。

MainAxisAlignment（主轴属性：主轴方向上的对齐方式，Row 是横向轴为主轴）

enum MainAxisAlignment {
  // 按照主轴起点对齐，例如：按照靠近最左侧子元素对齐
  start,

  // 将子元素放置在主轴的末尾，按照末尾对齐
  end,

  // 子元素放置在主轴中心对齐
  center,

  // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，首尾子元素都靠近首尾，没有间隙。有点类似于两端对齐
  spaceBetween,

  // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，但是首尾子元素的空白区域为1/2
  spaceAround,

  // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，包括首尾子元素
  spaceEvenly,
}

再看下 Row 的交叉属性。

CrossAxisAlignment（交叉属性：在交叉轴方向的对齐方式，Row 是纵向轴。Row 的高度等于子元素中最高的子元素高度）

enum CrossAxisAlignment {
  // 子元素在交叉轴上起点处展示
  start,

  // 子元素在交叉轴上末尾处展示
  end,

  // 子元素在交叉轴上居中展示
  center,

  // 让子元素填满交叉轴方向
  stretch,

  // 在交叉轴方向，使得子元素按照baseline对齐
  baseline,
}

再看下 MainAxisSize 属性。

MainAxisSize（在主轴方向子元素占有空间的方式，Row 的主轴是横向轴。默认是 max）

enum MainAxisSize {
  // 根据传入的布局约束条件，最大化主轴方向占用可用空间，也就是尽可能充满可用宽度
  max,

  // 与max相反，是最小化占用主轴方向的可用空间
  min,
}

接下来我们通过一个实例来学习下 Row 的布局特点。

Column(
        children: <Widget>[
          // 默认横向排列元素
          Row(
            verticalDirection: VerticalDirection.up,
            textBaseline: TextBaseline.ideographic,
            children: <Widget>[
              RaisedButton(
                color: Colors.blue,
                child: Text(
                  '我是按钮一\n 按钮',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {},
              ),
              RaisedButton(
                color: Colors.grey,
                child: Text(
                  '   我是按钮二  ',
                  style: TextStyle(color: Colors.black),
                ),
                onPressed: () {},
              ),
              RaisedButton(
                color: Colors.orange,
                child: Text(
                  '      我是按钮三    ',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {},
              ),
            ],
          ),
          SizedBox(
            height: 10,
          ),
          // 默认横向排列元素
          Row(
            children: <Widget>[
              const FlutterLogo(),
              const Expanded(
                child: Text(
                    'Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
              ),
              const Icon(Icons.sentiment_very_satisfied),
            ],
          ),
          SizedBox(
            height: 10,
          ),
          // 居中排列元素
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                " 我们居中显示 |",
                style: TextStyle(color: Colors.teal),
              ),
              Text(" Flutter的Row布局组件 "),
            ],
          ),
        ],
    ),

运行效果如下图所示：

2.2 Column

在学习完了 Row 布局组件后，再学习 Column 很容易，Row 是横向排列元素，Column 是纵向排列子元素，可以对比着学习。

Column 的继承关系如下：

Column -> Flex -> MultiChildRenderObjectWidget -> RenderObjectWidget …

Column 也是 Flex 的拓展子类，也是多子元素的一个组件之一（内部可以包含多个子元素）。

我们看下 Column 布局组件的大致效果图：

所有元素纵向排成一列。

构造方法是一致的，只不过主轴和交叉轴和 Row 是相反的。这里就不再重复讲解了。

接下来看一个实例：

Column(
        // 纵向排列子元素
        children: <Widget>[
          RaisedButton(
            color: Colors.blue,
            child: Text(
              '我是按钮一',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () {},
          ),
          RaisedButton(
            color: Colors.grey,
            child: Text(
              '   我是按钮二  ',
              style: TextStyle(color: Colors.black),
            ),
            onPressed: () {},
          ),
          RaisedButton(
            color: Colors.orange,
            child: Text(
              '      我是按钮三    ',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () {},
          ),
          SizedBox(
            height: 10,
          ),
          const FlutterLogo(),
          Text(
              'Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
          const Icon(Icons.sentiment_very_satisfied),
        ],
      ),

运行效果如下图所示：

3.弹性布局

Flex 组件是 Row 和 Column 的父类，主要用于弹性布局，类似于HTML 中的 Flex 弹性盒子布局，可以按照一定比例进行分类布局空间。

Flex 继承自 MultiChildRenderObjectWidget，Flex 也是多子元素的一个组件之一（内部可以包含多个子元素）。

Flex 一般和 Expanded 搭配使用，Expanded 组件从名字就可以看出它的特点，就是让子元素扩展占用 Flex 的剩余空间。

我们看下 Flex 布局组件的大致效果图：

按钮一占用 2/3 的横向空间，按钮二占用剩余 1/3 空间。

我们看下 Flex 构造方法：

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

单独看 Flex 组件没有意义，因为一般直接用它的子类 Row 和 Column 来使用。而 Flex 主要是和 Expanded 搭配使用。我们再看下 Expanded 组件构造方法：

const Expanded({
    Key key,
    // 占用空间比重、权重
    int flex = 1,
    // 子元素
    @required Widget child,
  }) 

我们通过一个实例看下 Flex 和 Expanded 搭配用法：

body: Row(
          children: <Widget>[
            Expanded(
              // flex设置权重，这里是占2/5空间
              flex: 2,
              child: RaisedButton(
                color: Colors.blue,
                child: Text(
                  '我是按钮一',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {},
              ),
            ),
            // flex设置权重，这里是占1/5空间
            Expanded(
              flex: 1,
              child: Column(
                children: <Widget>[
                  Expanded(
                    flex: 2,
                    child: RaisedButton(
                      color: Colors.grey,
                      child: Text(
                        '   我是按钮一  ',
                        style: TextStyle(color: Colors.black),
                      ),
                      onPressed: () {},
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: RaisedButton(
                      color: Colors.teal,
                      child: Text(
                        '   我是按钮二  ',
                        style: TextStyle(color: Colors.white),
                      ),
                      onPressed: () {},
                    ),
                  )
                ],
              ),
            ),
            // flex设置权重，这里是占2/5空间
            Expanded(
              flex: 2,
              child: RaisedButton(
                color: Colors.grey,
                child: Text(
                  '   我是按钮二  ',
                  style: TextStyle(color: Colors.black),
                ),
                onPressed: () {},
              ),
            )
          ],
        )

运行效果图如下：

4.层叠布局

Stack 和 IndexStack 都是层叠布局方式，类似于 Android 里的 FrameLayout 帧布局，内部子元素是有层级堆起来的。

Stack 继承自 MultiChildRenderObjectWidget，Stack 也是多子元素的一个组件之一（内部可以包含多个子元素）。

而 IndexedStack 继承自 Stack，扩展了 Stack的一些特性。它的作用是显示第 index 个子元素，其他子元素都是不可见的。所以 IndexedStack 的尺寸永远是跟最大的子元素尺寸一致。

Stack 的布局行为，是根据子元素是 positioned 还是 non-positioned 来区分的：

• 对于 positioned 的子元素，它们的位置会根据所设置的 top、bottom、right 或 left 属性来确定，这几个值都是相对于 Stack 的左上角；
• 对于 non-positioned 的子元素，它们会根据 Stack 的 aligment 来设置位置。

Stack 布局的子元素层级堆叠顺序：最先布局绘制的子元素在最底层，越后绘制的越在顶层。类似于 Web 中的 z-index。

看下 Stack 布局组件的效果图：

默认按照左上角，有层级的绘制排列。

看下 Stack 的构造方法：

Stack({
    Key key,
    // 对齐方式，默认是左上角（topStart）
    this.alignment = AlignmentDirectional.topStart,
    // 对齐方向
    this.textDirection,
    // 定义如何设置无定位子元素尺寸，默认为loose
    this.fit = StackFit.loose,
    // 超过的部分子元素处理方式
    this.overflow = Overflow.clip,
    // 子元素
    List<Widget> children = const <Widget>[],
  })

我们看下 alignment：

  // 左上角
  static const Alignment topLeft = Alignment(-1.0, -1.0);

  // 主轴顶部对齐，交叉轴居中
  static const Alignment topCenter = Alignment(0.0, -1.0);

  // 主轴顶部对齐，交叉轴偏右
  static const Alignment topRight = Alignment(1.0, -1.0);

  // 主轴居中，交叉轴偏左
  static const Alignment centerLeft = Alignment(-1.0, 0.0);

  // 居中
  static const Alignment center = Alignment(0.0, 0.0);

  // 主轴居中，交叉轴偏右
  static const Alignment centerRight = Alignment(1.0, 0.0);

  // 主轴底部对齐，交叉轴偏左
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);

  // 主轴底部对齐，交叉轴居中
  static const Alignment bottomCenter = Alignment(0.0, 1.0);

  // 主轴底部对齐，交叉轴偏右
  static const Alignment bottomRight = Alignment(1.0, 1.0);

看下 fit 属性：

enum StackFit {
  // 子元素宽松的取值，可以从min到max的尺寸
  loose,

  // 子元素尽可能的占用剩余空间，取max尺寸
  expand,

  // 不改变子元素的约束条件
  passthrough,
}

最后看下 overflow 属性：

enum Overflow {
  // 超出部分不会被裁剪，正常显示
  visible,

  // 超出部分会被裁剪
  clip,
}

我们看下 IndexedStack 构造方法：

IndexedStack({
    Key key,
    AlignmentGeometry alignment = AlignmentDirectional.topStart,
    TextDirection textDirection,
    StackFit sizing = StackFit.loose,
    // 多了一个索引，索引的这个元素显示，其他元素隐藏
    this.index = 0,
    // 子元素
    List<Widget> children = const <Widget>[],
  })

接下来通过一个实例来演示下 Stack 和 IndexedStack 的用法：

body: Column(
          children: <Widget>[
            // Stack层叠布局
            Stack(
              children: <Widget>[
                Container(
                  width: 300,
                  height: 300,
                  color: Colors.grey,
                ),
                Container(
                  width: 200,
                  height: 200,
                  color: Colors.teal,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
                Text(
                  "Stack",
                  style: TextStyle(color: Colors.white),
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            // IndexedStack层叠布局
            IndexedStack(
              // 指定显示的子元素序号，其余子元素隐藏
              index: 2,
              children: <Widget>[
                Container(
                  width: 300,
                  height: 300,
                  color: Colors.grey,
                ),
                Container(
                  width: 200,
                  height: 200,
                  color: Colors.teal,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
                Text(
                  "Stack",
                  style: TextStyle(color: Colors.white),
                ),
              ],
            )
          ],
        )

运行效果图如下：